Maya
  • Overview
    • 💡Support and documentation
    • ✨Announcement bar
    • ✨Header
    • ✨Slideshow with marquee
    • ✨Hero carousel
    • ✨Trending products
    • ✨Collection carousel
    • ✨Rich text
    • ✨Featured collection
    • ✨Products grid
    • ✨Lookbook
    • ✨Highlight text with image
    • ✨Media with text
    • ✨Collapsible content
    • ✨Blog posts
    • ✨Vertical carousel
    • ✨Burst effects
    • ✨Collection tabs
    • ✨Best selling products
    • ✨Collection list
    • ✨Images comparison
    • ✨Images with text carousel
    • ✨Media with cards
    • ✨Media grid
    • ✨Media with text overlay
    • ✨Scrollable collections
    • ✨Scrolling text
    • ✨Scrollable marquee
    • ✨Testimonials
    • ✨Text with icons
    • ✨Custom liquid
    • ✨Featured product
    • ✨Footer
    • ✨Setup home-two page
    • ✨Theme settings
    • ✨Age verification popup
    • ✨Newsletter popup
    • ✨Template product
    • ✨Setup product specifications on product page
    • ✨Template default collection
    • ✨Template- Blog
    • ✨Template - Default blog post
    • ✨Template- Cart
Powered by GitBook
On this page
  • Configure the section
  • Block settings: Grid gallery
  1. Overview

Media grid

Configure the section

Go to Customize theme. Click the dropdown menu at the top and select the Home page template.

From the left side menu, select Media grid.

Customize this section by using the setting on the right side of the theme editor, as described in the following table:

Media grid

Section visibility Select from the options to select the visibility of this section: -Always -Small devices(On selecting this, the section will be visible on mobile devices only.) -Large devices Section background Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme. Section width Choose the section width from following options: - Small - Medium - Large - Fullwidth Section corner style Choose the section's corner style from following options: - None - Top rounded - Bottom rounded - Fully rounded

Desktop

Gap Adjust the range bar to determine the gap between the blocks on desktop view. Row height Adjust the range bar to determine the block's row height on desktop view. Card radius Adjust the range bar to determine the radius of blocks on desktop view.

Mobile

Gap Adjust the range bar to determine the gap between the blocks on mobile view. Row height Adjust the range bar to determine the block's row height on mobile view.

Background color schemes

(Note: These color schemes are used for the section's background, gradients and spotlight. If the grid contains slides, the background color will dynamically change during slide transitions.) Default scheme Select any color scheme defined in the theme settings>Colors>Schemes. Color scheme(1-3) Select any color scheme defined in the theme settings>Colors>Schemes. Spotlight opacity Adjust the range bar to determine the opacity of spotlight, which appears on hover of the section.

Section spacing

Desktop top space

Adjust the range bar to add spacing at the top of the section for desktop view.

Desktop bottom space

Adjust the range bar to add spacing at the bottom of the section for desktop view.

Mobile top space

Adjust the range bar to add spacing at the top of the section for mobile view.

Mobile bottom space Adjust the range bar to add spacing at the bottom of the section for mobile view.

Block settings: Grid gallery

Layout

Color scheme Select any color scheme defined in the theme settings>Colors>Schemes. Desktop Column Adjust the range bar to determine the width of the block, on the basis of columns, for the desktop view. Row Adjust the range bar to determine the height of the block, on the basis of rows, for the desktop view. Mobile Column Adjust the range bar to determine the width of the block, on the basis of columns, for the mobile view. Row Adjust the range bar to determine the height of the block, on the basis of rows, for the mobile view.

Slide settings

(Note: Slider settings will only take effect if the content includes more than one slide.) Slide direction Choose the slide direction from the following options: - Left to right - Right to left - Top to bottom Heading size Select the heading size from the following options: - XXX- large - XX- large - X- large - Large - Medium - Small - X-small Description size Select the description size from the following options: - X- large - Large - Medium - Normal - Small - X-small - XX-small Content alignment Choose the content alignment from the following options: - Left - Center - Right Content position Choose the content position from the following options: - Top left - Top center - Top right - Center left - Center - Center right - Bottom left - Bottom center - Bottom right Overlay opacity Adjust the range bar to determine the overlay opacity above the image. (Note: To change overlay color, edit the scheme "Image overlay" color in the color scheme under theme settings.) Button size Select from the following options to determine the button size. - Global - Small - Medium - Large Button style Choose the button style from the following options: - Animated - Outlined - Link - Solid - Solid animated

Content slides

Slide 1-4 (Note: The carousel arrows appear on adding slides content at-least in two slides.) Image Choose any image from the store library. Heading Add heading text. Description Enter the description text. Button label Add button text. (Note: Leave the label blank to hide the button.) Button link Add a link to the button label to redirect.

PreviousMedia with cardsNextMedia with text overlay

Last updated 1 month ago

✨