✨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