Custom grid

Configure the section

Select the customize theme option. Click on the dropdown menu at the top of the page to select the Home page template.

From the side menu, select Custom grid.

Customize the section by utilizing the settings on the right side of the theme editor, as described below:

General

Section visibility Select from the options to select the visibility of this section: -Always -Small (On selecting this, the section will be visible on mobile devices only.) -Large (On selecting this, the section will be visible on large devices only.) Color scheme Select any color scheme defined in the theme settings>Colors>Schemes. Background Choose the section background from below options: - Solid - Gradient Container width Choose the container width from below options: - Small - Standard - Wide - Edge - Full width

Section spacing

Choose from Choose spacing for: - Desktop - Mobile Desktop: Top spacing Adjust the range bar to add spacing at the top of the section for desktop view.

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

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

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

Desktop layout

Row height Adjust the range bar to determine the height of rows, on the desktop view. Column gap Adjust the range bar to determine the gap between the columns, on the desktop view. Card radius Adjust the range bar to determine the gap between the columns. (Note: Radius is automatically optimized for mobile.)

Mobile layout

Row height Adjust the range bar to determine the height of rows, on the mobile view. Column gap Adjust the range bar to determine the gap between the columns, on the mobile view.

Background

Background image Choose any image for the background image. Show behind "Trust icons" section Select this checkbox to show the background image behind the trust icons. Corner style Choose the corners style from below options: - Sharp - Rounded

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Main block settings: Media card

Layout

Column width Adjust the range bar to determine the column's width, on the desktop view. Row height Adjust the range bar to determine the row's width, on the desktop view. Mobile column width Choose from one or two to determine the column's width, on the mobile view. Mobile row height Choose from one or two to determine the row's width, on the mobile view.

Media

Media type Choose the media type from following options: - Image - Video Desktop image Select an image to show in the desktop view. Mobile image Select an image to show in the mobile view. Desktop video Select any video to show as a background video in slides, for desktop view only. (Note: It supports .mp4 videos only.) Mobile video Select any video to show as a background video in slides, for mobile view only. (Note: It supports .mp4 videos only.)

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Content

Text alignment Choose the alignment from below options: - Left - Center - Right Vertical alignment Choose the vertical alignment from the below options: - Top - Middle - Bottom

Text ident

Desktop horizontal Adjust the range bar to manage the text spacing in horizontal position, on desktop view. Desktop vertical Adjust the range bar to manage the text spacing in vertical position, on desktop view. Mobile horizontal Adjust the range bar to manage the text spacing in horizontal position, on mobile view. Mobile vertical Adjust the range bar to manage the text spacing in vertical position, on mobile view.

Sticker

Enable sticker Select this checkbox to enable the sticker. Sticker width Adjust the range bar to determine the width of sticker. Style Choose the sticker style from a list of options. Text Enter the sticker text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Text font size Choose the font size from following options: - Extra large - Large - Medium - Regular - Small - Extra small Emphasize highlight text size Adjust the range bar to emphasize the highlight text. Custom image Selecting an image will override the shape and text options set above. Image Choose any image for the sticker. Desktop/mobile layout Horizontal position Adjust the range bar to determine the horizontal position of stickers on desktop and mobile. Vertical position Adjust the range bar to determine the vertical position of stickers on desktop and mobile. Rotate Adjust the range bar to determine the rotate degree of sticker. Colors Sticker background Choose any color for the sticker's background. Text Choose any color for the sticker's text. Highlight color Choose any color for the sticker's highlight text.

Block settings inside Media card

Heading

Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Heading color Choose any color for the heading text. Highlight text Highlight style Choose the style from following options: - None - Underline - Text color - Gradient Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid or gradient color for the heading's highlight text.

Description

Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Description color Choose any color for the description text.

Button

Button text Enter the button label. (Note: Leave the label blank to hide the button.) Button link Add the button link to redirect it. Open in new tab Select this checkbox to open the button link in next tab of browser. Set button as a link Select this checkbox to show button as a link. Colors Choose button colors for the text, background, border and their hover.

Main block settings: Slideshow

Layout

Column width Adjust the range bar to determine the column's width, on the desktop view. Row height Adjust the range bar to determine the row's width, on the desktop view. Mobile column width Choose from one or two to determine the column's width, on the mobile view. Mobile row height Choose from one or two to determine the row's width, on the mobile view.

Slide

Animation style Choose the animation style from the following options: - Fade - Slide Auto rotate slides Select this checkbox to enable the auto rotation of slides. Change slides every Adjust the range bar to choose the rotation time in seconds.

Navigation

Navigation style Choose the style from following options: - None - Arrows - Floating arrows - Dots - Progress bar - Arrows with dots - Arrows with progress bar - Floating arrows with progress bar - Floating arrows with dots Color Choose the color from light or dark for the chosen navigation style.

Blocks inside Slideshow:

Slide

Media type Choose the media type from following options: - Image - Video Desktop image Select an image to show in the desktop view. Mobile image Select an image to show in the mobile view. Desktop video Select any video to show as a background video in slides, for desktop view only. (Note: It supports .mp4 videos only.) Mobile video Select any video to show as a background video in slides, for mobile view only. (Note: It supports .mp4 videos only.)

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Content

Text alignment Choose the alignment from below options: - Left - Center - Right Vertical alignment Choose the vertical alignment from the below options: - Top - Middle - Bottom - Justify

Block settings inside Slide

Content

Subheading Add subheading text. Color Choose any color for the subheading text. Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading font size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Heading color Choose any color for the heading text. Highlight text Highlight style Choose the style from following options: - None - Underline - Text color - Gradient Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid or gradient color for the heading's highlight text.

Description

Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Description color Choose any color for the description text.

Button

Button text Enter the button label. (Note: Leave the label blank to hide the button.) Button link Add the button link to redirect it. Open in new tab Select this checkbox to open the button link in next tab of browser. Set button as a link Select this checkbox to show button as a link. Colors Choose button colors for the text, background, border and their hover.

Main block settings: Lookbook

Layout

Column width Adjust the range bar to determine the column's width, on the desktop view. Row height Adjust the range bar to determine the row's width, on the desktop view. Mobile column width Choose from one or two to determine the column's width, on the mobile view. Mobile row height Choose from one or two to determine the row's width, on the mobile view.

Image

Desktop image Select an image to show in the desktop view. Mobile image Select an image to show in the mobile view.

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Spotlight

Hotspot color Choose from light or dark to determine the hotspot color. Make the first spotlight active by default Select this checkbox to make the first hotspot active by default.

Content

Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading font size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Text alignment Choose the text alignment from the following options: - Left - Center - Right Vertical alignment Choose the vertical alignment from the following options: - Top - Middle - Bottom Highlight text Highlight style Choose the style from following options: - None - Underline - Text color Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid color for the heading's highlight text. Heading and description color Choose heading and description color for the lookbook.

Blocks inside Lookbook:

Spotlight

Product Choose any product from the store library.

Position

Choose for Set the position for desktop and mobile. Horizontal position Adjust the range bar to determine the horizontal position. Vertical position Adjust the range bar to determine the vertical position.

Main block settings: Countdown timer

Layout

Column width Adjust the range bar to determine the column's width, on the desktop view. Row height Adjust the range bar to determine the row's width, on the desktop view.

Image

Desktop image Select an image to show in the desktop view. Mobile image Select an image to show in the mobile view.

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Content

Text alignment Choose the text alignment from the following options: - Left - Center - Right Vertical alignment Choose the vertical alignment from the following options: - Top - Middle - Bottom

Block settings inside Countdown timer

Countdown

Style Choose the style from below options: - Digital - Animated Countdown type Choose the countdown type from below options: - Evergreen - Fixed (Note: With evergreen, the count down will restart after the selected time interval and with Fixed, the countdown will be set as per the selected end date.) Evergreen duration Choose the duration from: - Every 2 hrs. - Every 6 hrs. - Every 12 hrs. - Every 24 hrs. - Every week - Every month Fixed time End date Enter the date to set as the end date of countdown timer. (Note: Date format: YYYY/MM/DD HH:MM or YYYY/MM/DD HH:MM AA. Sample date format: 2025/09/11 23:59 or 2025/09/11 11:59 PM) Text show on countdown expiry Enter the text that will display on countdown expiry. Digital Number size Choose the number's size from below options: - Extra Large - Large - Medium - Regular - Small Unit size Choose the unit size from below options: - Medium - Regular - Small - Extra small Colors Border Choose the border's color. Number Choose the number's color. Unit Choose the unit's color.

Subheading

Subheading Add subheading text. Color Choose any color for the subheading text.

Heading

Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading font size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Heading color Choose any color for the heading text. Highlight text Highlight style Choose the style from following options: - None - Underline - Text color - Gradient Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid or gradient color for the heading's highlight text.

Description

Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Description color Choose any color for the description text.

Button

Button text Enter the button label. (Note: Leave the label blank to hide the button.) Button link Add the button link to redirect it. Open in new tab Select this checkbox to open the button link in next tab of browser. Set button as a link Select this checkbox to show button as a link. Colors Choose button colors for the text, background, border and their hover.

Main block settings: Video

Layout

Column width Adjust the range bar to determine the column's width, on the desktop view. Row height Adjust the range bar to determine the row's width, on the desktop view. Mobile column width Choose from one or two to determine the column's width, on the mobile view. Mobile row height Choose from one or two to determine the row's width, on the mobile view.

Shopify-hosted video

Choose any video from the store library.

Or embed video from URL

URL Enter video link. It accepts Vimeo or YouTube videos. Cover image Choose any poster image for the video. Video alt text Enter the alt text for the poster image, describing the video for customers using screen readers. Enable video autoplay Select this checkbox to enable the video overlay.

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Mobile layout

Shopify-hosted video Choose any video from the store library, for the mobile view. Or embed video from URL Choose any video from the store library, for the mobile view. It accepts Vimeo or YouTube videos. Cover image Choose any poster image for the video.

Content

Text alignment Choose the alignment from below options: - Left - Center - Right Vertical alignment Choose the vertical alignment from below options: - Top - Middle - Bottom Content visibility Choose the content visibility from below options: - Always - Hidden on play

Play button

Text Enter the play button text. Color Choose any color for the play button.

Block settings inside Video

Heading

Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Heading color Choose any color for the heading text. Highlight text Highlight style Choose the style from following options: - None - Underline - Text color - Gradient Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid or gradient color for the heading's highlight text.

Description

Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Description color Choose any color for the description text.

Last updated