Available sections in Concept

Concept allows you to add sections and relevant blocks to any pages.

In Concept, sections are typically divided into four major groups: Header, Overlay, Template, and Footer. Each of them contains multiple sections. A section can be added in with blocks.

This article provides an overview of all sections and blocks.

On this page

A section group in a web page is a collection of sections that are grouped together for a specific purpose. There are oftenly 4 mains section groups: Header group, Overlay group, Template group, and Footer group.

A. Header group

  1. Announcement bar (Static section)
  2. Header (Static section)
  3. Available sections (Dynamic sections)

B. Overlay group

  1. Cart drawer (Static section)
  2. Search drawer (Static section)
  3. Cookie banne (Static section)
  4. Newsletter popup (Static section)

C.Template group

This group enables you to create dynamic sections with greater flexibility.

  1. Blog posts
  2. Collage
  3. Collage blog posts
  4. Collection list
  5. Contact form
  6. Contact with Map
  7. Countdown timer
  8. Custom liquid
  9. Email signup
  10. Empty space
  11. FAQ
  12. Featured collection
  13. Featured product
  14. Image comparison
  15. Image with text
  16. Images with text
  17. Image with text overlay
  18. Images with text overlay
  19. Logo list
  20. Lookbook
  21. Map
  22. Multicolumn
  23. Multicolumn with icon
  24. Multiple featured collections
  25. Portfolio
  26. Recently viewed
  27. Rich text
  28. Scrolling text
  29. Shop the look
  30. Slideshows
  31. Testimonials
  32. Testimonials banner
  33. Timeline
  34. Video
  35. Video hero
  36. Video with text overlay

D. Footer group

  1. Footer
  2. Footer Copyright
  3. Available sections

A.Section groups

"Section groups enable theme developers to create dynamic conglomerations of sections in a theme layout. In other words, they enable you to group certain sections together in your theme. This in turn allows merchants to add, remove, and reorder sections directly in the theme editor." Read more

1. Header group

The section at the top of the page that typically contains the website's logo, navigation menu, and other important information.

1.1.Announcement bar

The announcement bar lets you communicate important information to your customers from any page. You can customize up to 3 different announcement blocks to display. You can add a link to an announcement bar to make it clickable and take customers to a specific page.

The settings for the Announcement bar section
Section settings Settings Description
Announcement bar
Show social media icons Displays social media icons that you've set up in your Theme settings.
Enable language selector Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
Enable country/region selector Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Invert icons and selectors Toggling this option will swap the positions of the icons and selectors in the browser. When the option is ticked, the icons will be on the right and the selectors will be on the left. When the option is not ticked, the icons and selectors will be in their original positions.
Announcement
Desktop announcement position The position of the desktop announcement can be set to left, center, or right. This position will be automatically optimized for mobile devices.
Auto-rotate announcements Sets the carousel to play automatically. This also adds a play toggle button.
Change announcements every second The display time of your announcements can be set from 3 seconds to 10 seconds, depending on your preference.
Show navigation Displays navigation buttons.
Colors

 
Text The color of the announcement text.
Background The color of the announcement bar background.
Background gradient The gradient of the announcement bar background.
Highlight The color of the highlight.
Highlight gradient The gradient of the highlight.
Sections
Make section full width Makes the section the full width of the browser window.
Make section rounded Makes the section the rounde of the browser window.
Custom CSS Adds custom CSS to this section.

Only Announcement blocks are available in this section.

The setting for the Announcement block.
Block settings Settings Description
Announcement
Icon Selects the type of icon from the long list.
Text The announcement that you want to display to your customers on desktop.
Link The link that you want customers to navigate to if they click the announcement bar.
Mobile layout
Hide icon on mobile Enable to hide icon on mobile
Text on mobile The announcement that you want to display to your customers on mobile.
Highlighted text

 
Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Requires highlighted text style to be set to Hand-drawn scribble.

 This setting provides five methods for hand-drawing scribble highlighted text:
  • Circle
  • Basic underline
  • Sketch underline
  • Ssquiggle underline
  • Squiggle underline 2

The header displays on all pages in your theme.

The settings for the Header section
Section settings Settings Description
Header
Logo The logo for your store on desktop browser. Logo is only edited in your Theme settings.
Menu Your main menu.
Menu active The visual indicator for a menu item when it is hovered over can be set to either Dot or Block.
Header layout Customize the layout of your logo and menu in the options list:
  • Logo left, Menu left
  • Logo left, Menu cent
  • Logo left, Menu drawer
  • Logo center, Menu left
  • Logo center, Menu center
  • Logo center, Menu split
  • Logo center, Menu drawer
    		•
    Enable dropdown on hover
    • Enable: The dropdown menu will open when the user hovers over the menu option. This is the default behavior in most web browsers.
    • Disable: The dropdown menu will open when the user clicks the menu option. This reduces the animations to provide a simpler user experience.
    Sticky header There are three options for sticky header:
    • None: The sticky header will not be displayed.
    • Scroll up: The sticky header will hide when scrolling down and reappear when scrolling up.
    • Always: Sticky header is always visible.
    Mobile layout
    Logo The logo displayed on mobile. Logo is only edited in your Theme settings.
    Mobile logo position The logo position on mobile: Left or Center.
    Show social media icons Displays social media icons that you've set up in your Theme settings.
    Enable language selector Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
    Enable country/region selector Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
    Transparent header Text color Changes the color of the text on the transparent header.
    Colors
    Text Changes the color of the header text. This setting is not applied to transparent header.
    Background Changes the color of the header background. This setting is not applied to transparent header.
    Section
    Top padding Determines the height of the Top inner space of the section. Can be from 0px to 120px, increasing arithmetically of 4px.
    Bottom padding Determines the height of the Bottom inner space of the section. Can be from 0 px to 120 px, increasing arithmetically of 4 px.
    Make section full width Makes the section the full width of the browser window.
    Make section rounded Makes the section the rounde of the browser.
    Custom CSS Adds custom CSS to this section.

    This section permits the addition of the Mega menu.

    The settings for the Mega menu.
    Mega menu settings Settings Description
    Mega menu
    Menu item The menu item name you want to add a megamenu to.
    Show mega menu images Enables the display of mega menu images.
    Button label

    Leaves the label blank to hide the button.

    		 The button text
    Button link The URL of the button.
    Promotion

     
    Image The image that you want to display
    Image ratio The image ratio for the blog post images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Heading The promotion title.
    Subtext Promotion description text.
    Overlay text on image Activates the Overlay text on image option. If this option is deactivated, the text will be displayed below the image.
    Link The URL that you want to link to.
    Tag A small piece of text that is displayed on a product page to provide additional information about the produc.
    Text color The color of the text.
    Overlay text color The ovelay color of the text.

    Text overlay opacity can be set from 0 to 100%.

    1.3.Available sections

    Additional sections may be added to this group, such as:

    2. Overlay group

    A group of sections that behaves in a pop-up window.

    2.1. Cart drawer

    A cart drawer is a user interface element that displays a summary of the items a customer has added to their cart without redirecting them to a separate cart page.

    The settings for the Cart drawer section
    Section settings Settings Description
    Cart drawer

     
    Show vendor Displays the vendors of the products.
    Show cart note Displays the cart note.
    Show shipping rates caculator

    Shipping calculator

    		 Enable a Theme settings that allows customers to calculate the approximate shipping fee by entering their country/region, province, and postal/zipcode.
    Show view cart button Displays view cart button.
    Show checkout button Displays checkout button.
    Free shipping bar
    Show free shipping bar Displays the free shipping bar
    Free shipping minimum amount Enter amount using number only. If using multiple currencies, separate each currency code with its amount (e.g: USD:100, EUR:95, JPY:13000)
    Cart recommendations

     
    Enable cart recommendations Displays cart recommendation
    Heading The cart recommendations title.
    Maximum products to show Displays between 1 and 10 products at a time.
    Show vendor Displays the vendors of the products.
    Show price Displays the prices of the products.
    Empty cart recommendations
    Text Uses your own text, such as: "Not sure where to start? Try these collections:"
    Collection list Select recommended collections
    Recently viewed products

     
    Enable recently viewed products Displays the recently viewed products.
    Heading The section title.
    Maximum products to show Displays between 1 and 10 products at a time.
    Show vendor Displays the vendor of the products.
    Show price Displays the price of the products.
    Custom CSS Adds custom CSS to this section.

    2.2. Search drawer

    Search drawer won't appear to your customers if you have set the cart type to "Page" in your theme settings.

    The settings for the Search drawer section
    Custom CSS Adds custom CSS to this section.

    A cookie banner is a notification that appears on a website when a user visits it for the first time. It informs the user about the cookies that the website uses and asks for the user's consent to store cookies on their device.

    The settings for the Cookie bannerr section
    Section settings Settings Description
    Cookier banner

     
    Display mode In Test mode, the banner always displays despite the relevant settings or dismissing so that you can review it all the time. When satisfied with the look, switch to Enable.
    Delay

    Delay is disabled in theme editor for visibility.

    		 This section's render time, from the moment the page just loads.

    Adjusts from 2s to 60s.
    Text alignment Selects your preferred text alignment from the following three options: Left, Center or Right.
    Content position Selects your preferred content position: Bottom Left or Bottom Right.
    Colors

     
    Text The text color.
    Background The background color.
    Highlight The highlight color.
    Button text The button text color.
    Button background The button background color.
    Button background gradient The button background gradient.

    Available blocks:

    • 2.3.1 Heading block
    • 2.3.2 Text block
    • 2.3.3 Buttons block
    • 2.3.4 Image block
    • 2.3.5 Custom liquid
    • 2.3.6 Empty space
    2.3.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    2.3.2 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    2.3.3 The settings for the Buttons block.
    Block settings Settings Description
    Buy buttons
    Accept button label Text on the accept button.

    Leave the label blank to hide the button.
    Decline button label Text on the decline button.

    Leave the label blank to hide the button.
    2.3.4 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom:
      • Maximum width - Desktop image width - 20px to 1000px in 10px increments..
      • Mobile maximum width - Mobile image width - 20px to 600px in 10px increments.
    2.3.5 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    2.3.6 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    2.4. Newsletter popup

    A pop-up window appears on a website, typically when a user first visits the site or has been on the site for a certain amount of time. The pop-up usually contains a form that users can complete to subscribe to the website's newsletter.

    The settings for the Newsletter popup section
    Section settings Settings Description
    Newsletter popup

     
    Display mode

    In Test mode, the banner always displays despite the relevant settings or dismissing so that you can review it all the time. When satisfied with the look, switch to Enabke.
    Show one home page only:
    Show only for visitors:
    Delay

    Delay is disabled in theme editor for visibility.

    		 This section's render time, from the moment the page just loads.

    Adjusts from 2s to 60s.
    Frequency Number of days before a dismissed popup re-appear, adjust from 1 day to 30 days.
    Text alignment Selects your preferred text alignment from the following three options: Left, Center, or Right.
    Content position Selects your preferred content position: Bottom Left or Bottom Right.
    Image

     

    		 Image Chooses/Uploads an image for the section.
    Colors

     
    Text Changes the color text.
    Background Changes the color of the background.
    Highlight Changes the color of the highlight.
    Button text Changes the color of the button text.
    Button background Changes the color of the button background.
    Button background gradient Changes the color of the button background gradient.

    Available blocks:

    • 2.4.1 Heading
    • 2.4.2 Text
    • 2.4.3 Button
    • 2.4.4 Link
    • 2.4.5 Image
    • 2.4.6 Form
    • 2.4.7 Social media icons
    • 2.4.8 Empty space
    • 2.4.9 Custom liquid
    • 2.4.10 Floating bar
    2.4.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    2.4.2 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    2.4.3 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjusts size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    2.4.4 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    2.4.5 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom:
      • Maximum width - Desktop image width - 20px to 1000px in 10px increments..
      • Mobile maximum width - Mobile image width - 20px to 600px in 10px increments.
    2.4.6 The settings for the Form block.

    No customizable settings available.

    2.4.7 The settings for the Social media icons block.

    To display your social media accounts, link them in your Theme settings.

    2.4.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.
    2.4.9 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    2.4.10 The settings for the Floating bar block.
    Block settings Settings Description
    Floating bar
    Heading The block title.
    Content position Selects your preferred content position: Left or Right
    Show social media icons To display your social media accounts, link them in your Theme settings
    Social media heading Title of the social media.
    Mobile layout
    Disable on mobile Hides on mobile.
    Hides social media icons Enable to hide social media icons.
    Color You can optionally customize the colors of the block, including the following:
    • Text
    • Background

    C. Template group

    A collection of sections that are used to create a specific type of page on a website.

    1. Blog posts

    If you have a blog on your Shopify store, then you can use a Blog post section to highlight posts from that blog.

    The settings for the Blog posts section>
    Section settings Settings Description
    Blog posts
    Blog Selects the blog from which you want to display blog posts. If no blog is selected, the first blog alphabetically on your Blogs page will be used.
    Number of blog posts to show The number of blog posts that you want to display in the section.
    Number of column on desktop Customizes the number of columns displayed on desktop from 1 to 5.
    Enable carousel on desktop Displays a carousel of blog posts from the collection on desktop browser.
    Enable "View all" button Displays a View all button that links to the blog page if the blog has more posts than the specified limit.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Blog posts card
    Image ratio The image ratio for the blog post images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Show tags Displays tags from admin blog posts with images.
    Show date Shows blog post published date.
    Show comment count Displays the total number of published comments.
    Show author Displays the author of the blog posts.
    Show except Displays the excerpt of the blog posts.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    2. Collage

    This section creates a collage of videos or images in two columns. By default, the section contains a video, product, and collection block.

    The settings for the Collage section
    Section settings Settings Description
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section.
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.

    Parallax direction can be chosen one of 3 following options:

  • Vertical
  • Horizontal
  • Zoom
    		•
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 2.1 Image block
    • 2.2 Video block
    2.1 The settings for the Image block.
    Block settings Settings Description
    Image
    Subheading The subheading for the heading is placed above the heading.
    Heading The block title.
    Link The link that you want customers to navigate to if they click on.
    Invert subheading and heading Swaps position the heading and subheading.
    Image Chooses/Uploads an image for the block.
    Image ratio The image ratio for the blog post images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Desktop content position The position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Desktop content alignment The alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout
    Mobile image The image for the block displayed on mobile.
    Mobile image ratio The image ratio for the images on mobile browser:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    • Rounded - Crop the images as a circle
    Mobile content position The position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Mobile content alignment The alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    2.2 The settings for the Video block.
    Block settings Settings Description
    Video
    Subheading The subheading for the heading is placed above the heading.
    Heading The block title.
    Link The link that you want customers to navigate to if they click on.
    Invert subheading and heading Swaps position the heading and subheading.
    Shopify-hosted video Video Chooses a video from Shopify-hosted video
    Embed video from URL
    URL The YouTube or Vimeo link to the video. The video must be publicly available.
    Cover image The image that displays before the video plays.
    Video ALT text Describe the video to make it accessible for customers using screen readers.
    Enable video autoplay Playing video automatically.
    Enable video looping Playing video repeatedly.
    Image ratio The image ratio for the blog post images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Desktop content alignment Sets the alignmentf the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout

     
    Mobile video Chooses/Uploads a video by uploading for mobile browser.
    Or embed video from URL Embed a video from a URL on a mobile browser.
    Mobile cover image The image that displays before the video plays on mobile.
    Mobile image ratio The image ratio for the images on desktop browser:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the block, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient

    3. Collage blog posts

    This section capturea readers' attention with a collage of blog posts.

    The settings for the Collage blog posts section>
    Section settings Settings Description
    Collage blog posts
    Blog The blog you want to display blog posts from.
    Number of blog posts to show The number of blog posts that you want to display in the section.
    Enable "View all" button Displays a View all button that links to the blog page if the blog has more posts than the specified limit.
    Blog post card
    Image ratio The image ratio for the blog post images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Show tags Displays of tags from Admin Blog Posts, incorporating images as appropriate to enhance the content.
    Show date Shows blog post published date.
    Show comment count Displays the total number of published blog post comments.
    Show author Displays the author of the blog post.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight text
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    4. Collection list

    You can add a list of collections that you want to highlight.

    The settings for the Collection list section
    Section settings Settings Description
    Collection list
    Number of columns on desktop Customize the number of columns displayed on desktop browser from 1 to 5.
    Enable carousel on desktop Displays a carousel of products from the collection on desktop browser.
    Image Choose images from Collection image or First Product.
    Image ratio The image ratio for the collection images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Enable "View all" button If the blog has more blog posts than set in the Blog post field, then this displays a "View all" button that takes the customers to the blog's page.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available block: Collection block.

    The settings for the Collection block.
    Block settings Settings Description
    Collection
    Collection Choose collection you want to display products from.
    Products You can display individual products instead of the entire collection.
    Title The title of the Featured collection

    5. Contact form

    Your contact form sends all submissions to your store's Sender email address. You can change the sender email address in the General settings of your Shopify admin.

    The form has the following fundamental:

    • Name
    • Email (required)
    • Comment
    • Custom fields are also supported.
    The settings for the Contact form section
    Section settings Settings Description
    Contact form All submissions are sent to the sender email address of your store.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Add custom styles to this section with CSS

    Available blocks:

    • 5.1 Contact pressk
    • 5.2 Social media icons
    • 5.3 Custom field
    5.1 The settings for the Contact press block.
    Block settings Settings Description
    Contact press
    Heading The block title (ex: Customer service.)
    Text The text to display in the block.

     

    5.2 The settings for the Social media icons block.
    Heading

    Allows you to change the title of this block.

     

    5.2 The settings for the Custom field block.
    Block settings Settings Description
    Custom field

     
    Type Selects 5 of the following to display the block types:
  • Text - short
  • Text - long
  • Checkbox
  • Radio buttons
  • Dropdown list
    		•
    Label Adds the label text.
    Required Marks this setting as a required option.
    Full width Makes the block setting full width.
    Checkbox

     
    Checked value Sets the value for checked value.
    Unchecked value Sets the value for unchecked value.
    Radio buttons

     

    		 Options Adds the options. Separates your options with a comma (e.g: Option 1, Option 2, Option 3).
    Dropdown list

     

    		 Options Adds the options. Separates your options with a comma (e.g: Option 1, Option 2, Option 3).

    6. Contact with Map

    A section displays a map address.

    The settings for the Contact with Map section
    Section settings Settings Description
    Contact with Map All submissions are sent to the sender email address of your store.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Map
    Map address Enter your address. Google Maps will find the exact location.
    Google Maps API key

     

     

    		 Enter your Google API key
    Map zoom Zoom in from level 12 to 20. Higher zoom levels show more detail.
    Map style Chooses one of the following 6 options to format the Map style:
  • Standard
  • Silver
  • Retro
  • Dark
  • Night
  • Aubergine
    		•
    Image Chooses a backup map image to display if the map fails to load.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Mobile layout Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.

    Parallax direction can be chosen one of 3 following options:

  • Vertical
  • Horizontal
  • Zoom
    		•
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 6.1 Contact pressk
    • 6.2 Social media icons
    • 6.3 Custom field
    6.1 The settings for the Contact press block.
    Block settings Settings Description
    Contact press
    Heading The block title (ex: Customer service.)
    Text The text to display in the block.

     

    6.2 The settings for the Social media icons block.
    Heading

    Allows you to change the title of this block.

     

    6.3 The settings for the Custom field block.
    Block settings Settings Description
    Custom field

     
    Type Selects 5 of the following to display the block types:
  • Text - short
  • Text - long
  • Checkbox
  • Radio buttons
  • Dropdown list
    		•
    Label Adds label text.
    Required Marks this setting as a required option.
    Full width Makes the block setting full width.
    Checkbox

     
    Checked value Sets the value for checked value.
    Unchecked value Sets the value for unchecked value.
    Radio buttons

     

    		 Options Adds the options. Separate your options with a comma (e.g: Option 1, Option 2, Option 3.)
    Dropdown list

     

    		 Options Adds the options. Separate your options with a comma (e.g: Option 1, Option 2, Option 3.)

    7. Countdown timer

    This section displays an active countdown clock that is set to expire at a given time. This can be used for a wide range of purposes including sales starting, stores opening, and exclusive offer expiry. Here's a sample from us of the weekly sales countdown timer for a specific product.

    The settings for the Countdown timer section
    Section settings Settings Description
    Countdown timer
    Allow transparent header This setting only applies when this section is the first one
    Image The image for the section on desktop browser.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout
    Mobile image Cover image of the section on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    • Overlay, can be adjusted from 0 to 100%
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.

    Parallax direction can be chosen one of 3 following options:

  • Vertical
  • Horizontal
  • Zoom
    		•
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 7.1 Heading
    • 7.2 Subheading
    • 7.3 Text
    • 7.4 Button
    • 7.5 Link
    • 7.6 Image
    • 7.7 Custom liquid
    • 7.8 Empty space
    7.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    7.2 The settings for the Subheading block.
    Block settings Settings Description
    Subheading
    Subheading The subheading for the heading.
    Subheading size Size of subheading:
  • Small
  • Medium
  • Large
    		•
    Use secondary color Applies a little bit lighter color based on the text color.
    7.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    7.4 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjusts size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    7.2 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    7.6 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    7.7 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    7.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    8. Custom Liquid

    You can add your own Liquid code to create a custom section.

    • Add app snippets provided in the instructions from your downloaded apps to easily introduce apps to your pages.
    • Add custom Liquid code directly in the editor.
    The settings for the Custom Liquid section>
    Section settings Settings Description
    Custom liquid Liquid code Add app snippets or other code to create advanced customizations.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    9. Email signup

    You can add your own Liquid code to create a custom section.

    • Add app snippets provided in the instructions from your downloaded apps to easily introduce apps to your pages.
    • Add custom Liquid code directly in the editor.
    The settings for the Email signup section
    Section settings Settings Description
    Email signup
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 9.1 Heading
    • 9.2 Subheading
    • 9.3 Text
    • 9.4 Button
    • 9.5 Link
    • 9.6 Image
    • 9.7 Custom liquid
    • 9.8 Empty space
    9.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    9.2 The settings for the Social media icons block.

    Displays social media accounts that you've set up in your Theme settings.

    9.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    9.4 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    9.5 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    9.6 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    9.7 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    9.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    10. Empty space

    With this section, you can customize the vertical space height between sections, respectively to different devices.

    The settings for the Empty space section
    Section settings Settings Description
    Empty space
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Background
    • Background gradient
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    11. FAQ

    The FAQ (frequently asked questions) section displays common questions and answers from customers using a dynamic, accordion-style layout.

    The settings for the FAQ section
    Section settings Settings Description
    FAQ Style Choose With border style or With background style to display the section
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 11.1 Rich text
    • 11.2 Question
    • 11.3 Contact form
    11.1 The settings for the Rich text block.
    Block settings Settings Description
    Rich text
    Title The block title.
    Text Adds descriptive text for this block.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    11.2 The settings for the Question block.
    Block settings Settings Description
    Question
    Question Adds a frequently asked question.
    Answer Adds the answer.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    11.3 The settings for the Contact form block.
    Block settings Settings Description
    Contact form
    Title The column title.
    Text The text to display in the block.
    Show phone number Displays phone number.
    Team avatar Chooses/Uploads an image to display team avatar.
    Team avatar height The height of team avatar, can be adjusted from 20px to 100px.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    This section allows you to display multiple collections in multiple columns, with each column displayed in its own tab. You can also add a section that features a specific collection.

    The settings for the Featured collection section>
    Section settings Settings Description
    Featured collection
    Collection Chooses collection you want to display products from.
    Products Add up to 50 products to display.

    Replaces collection when selected.
    Maximum products to show The number of complementary products can range from 2 to 12.
    Number of columns on desktop Customize the number of columns displayed on desktop browser from 1 to 5.
    Enable carousel on desktop Displays a carousel of products from the collection on a desktop browser.
    Enable "View all" button

     

    		 The "View all" button will be added below your collection list. This is suggested when the list includes more collections than are shown.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    You can add a section that features a specific product.

    The settings for the Featured product section
    Section settings Settings Description
    Featured product
    Product Select a product to display for this section.
    Enable sticky content on desktop Pin the content to the screen when the customer scrolls down (or up) the featured product's images.
    Media
    Desktop media width The width of the media on desktop, which can be adjusted from 35% to 70% to modify the size of this section.

     

     

     
    Desktop layout Displays desktop layout:
    • Free scroll - Display the first image of your product on the left and the other images in a scrolling list on the right.
    • 2 columns - Display product images in two columns.
    • Thumbnails - Display small images of large images to make it easier to find a specific image in a large group of images.
    Thumbnail position The position of Thumbnail: Next to media or Below media
    Image zoom 3 options available:
    • Open lightbox: Zoom image in a pop up lightbox without leaving the page.
    • Click and Hover: One-click or hover triggers inner image zoom.
    • No zoom.
    Hide other variants'media after selecting a variant. When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.
    Enable video autoplay Playing video automatically.
    Enable video looping Playing video repeatedly.
    Mobile layout
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 13.1 Breadcrumb
    • 13.2 Text
    • 13.3 Title
    • 13.4 Price
    • 13.5 SKU
    • 13.6 Inventory status
    • 13.7 Quantity selector
    • 13.8 Variant picker
    • 13.9 Buy buttons
    • 13.10 Pickup availability
    • 13.11 Description
    • 13.12 Share
    • 13.13 Help desk
    • 13.14 Custom liquid
    • 13.15 Product rating
    • 13.16 Complementary products
    • 13.17 collapsible row
    • 13.18 Read more
    • 13.19 Spinning text
    13.1 The settings for the Breadcrumb block.

    Enable to show collections page in breadcrumb list.

    13.2 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adds your text.
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
    		•
    13.3 The settings for the Title block.
    Block settings Settings Description
    Title
    Title size The size of the title:
  • Small
  • Medium
  • Large
    		•
    Show product price Enables to display product price
    Show product rating Enables to display product rating.
    13.4 The settings for the Price block.

    Enable Show taxes notice to display the taxes notice.

    13.5 The settings for the SKU block.

    No customizable settings available.

    13.6 The settings for the Inventory status block.
    Block settings Settings Description
    Inventory status
    Low inventory threshold The minimum quantity of a specific product that a business wants to have on hand at any given time.

    Chooses 0 to always show in stock if available.
    Show inventory transfer notice Displays the inventory transfer notice
    Color scheme Choose one of the following 6 options:
  • Accent 1
  • Accent 2
  • Accent 3
  • Accent 4
  • Accent 5
  • Accent 6
    		•
    13.7 The settings for the Quality selector block.

    No customizable settings available.

    13.8 The settings for the Variant picker block.
    Block settings Settings Description
    Variant pickers
    Show variant labels Displays the label of the variants.
    Type The style of the variant picker. Choose either Dropdown or Button.
    Enable color swatches

    Requires variant picker type to be "Button".

    		 Displays the color variants in swatches. This requires 'Button' variant picker type.
    Size chart Size chart page If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page. Here's to choose your page that represents size chart content

     

     
    13.9 The settings for the Buy buttons block.

    This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout buttons.

    Block settings Settings Description
    Buy buttons
    Show quantity selector Displays a quantity selector that customers can use to change how many units of the product that they want to purchase. The default quantity is 1.
    Show dynamic checkout buttons Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay.
    Show recipient information form for gift cards. Allows buyers to send gift cards on a scheduled date along with a personal message.
    13.10 The settings for the Pickup availabilityblock.

    Allows your customers to see availability in retail stores by setting up local pickup.

    13.11 The settings for the Description block.

    Selects the size for the description text:

  • Small
  • Medium
  • Large
  • Extra large
    •
    13.12 The settings for the Share block.
    Block settings Settings Description
    Share Text Adds text for the block
    Help desk
    Show help desk Enables to show help desk
    Help label Text describes Help label block.
    Help page Adds the URL you want to link.
    13.13 The settings for the Help desk block.
    Block settings Settings Description
    Help desk
    Help label Text describes Help label block.
    Help page Select a page to link the Help desk block to.
    13.14 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    13.15 The settings for the Product rating block.

    Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

    13.16 The settings for the Complementary product block.
    Block settings Settings Description
    Complementary products
    Heading Enter text for your complementary product.
    Maximum products to show The number of complementary products can range from 1 to 10.
    Show vendor Displays the vendors of the products.
    Show price Displays the prices of the products.
    13.17 The settings for the collapsible row block.
    Block settings Settings Description
    collapsible row
    Icon Choose a pre-made SVG icon that accommodates your collapsible tab. The None option will disable the icon.
    Heading The title of the tab. Displays when collapsed and expanded.
    Row content The content of the tab. Displays only when the tab is expanded.
    Row content from page Displays content from a page in the tab. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Tab content displays above the page content.
    13.18 The settings for the Read more block.

    No customizable settings available.

    13.19 The settings for the Spinning text block.

    Text: Adds the spinning text.

    14. Image comparison

    This section is for comparing two products, based on your purpose.

    The settings for the Image comparison section
    Section settings Settings Description
    Image comparison
    Layout Displays the comparison in two formats:
  • Horizontal
  • Vertical
    		•
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Mobile layout Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Adds up to 2 image blocks in this section.

    The settings for the Image block.
    Block settings Settings Description
    Image
    Image Assign an image to be used as a comparison for this collection on desktop browsers.
    Mobile image Assign an image to be used as a comparison for this collection on mobile browsers.
    Subheading Subheadings are placed above their corresponding headings and are smaller in size.
    Heading Large text for the title of the image.
    Content position Position of Heading and Subheading text. Choose one of the 3 options: Star, Center and End.
    Text color Color of Text.

    15. Image with text

    You can add a section that contains an image and a text block with an optional button to link customers to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

    The settings for the Image with text section
    Section settings Settings Description
    Image with textt
    Image The image for the section displayed on desktop browser.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Desktop image width Determine the width of the image when viewed on desktop: Small, Medium or Large
    Desktop image placement The layout for the section on desktop:
    • Image first: Displays the image on the left.
    • Image second: Displays the text on the left.
    Image first is the default mobile layout
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout
    Mobile image The image for the section displayed on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
    • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen - Extends the image to be the height of the browser window.
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 15.1 Heading
    • 15.2 Text
    • 15.3 Button
    • 15.4 Link
    • 15.5 Image
    • 15.6 Custom liquid
    • 15.7 Empty space
    15.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    15.2 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    15.3 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    15.4 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    15.5 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    15.6 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    15.7 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    16. Images with text

    This section is similar to the [Image with text] section, but it allows you to display two images simultaneously. This provides greater design flexibility for your page.

    The settings for the Images with text section
    Section settings Settings Description
    Image with textt
    Image The first image for the section displayed on desktop browser.
    Image 2 The second image for the section displayed on desktop browser.
    Image ratio The image ratio for the images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    • Rounded - Crop the images as a circle
    Desktop image width Determine the width of the image when viewed on desktop: Small, Medium or Large

    Image is automatically optimized for mobile
    Desktop image placement The layout for the section on desktop:
    • Image first: Display the image on the left.
    • Image second: Display the text on the left.
    Image first is the default mobile layout.
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 16.1 Heading
    • 16.2 Text
    • 16.3 Button
    • 16.45 Link
    • 16.5 Image
    • 16.6 Custom liquid
    • 16.7 Empty space
    16.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    16.2 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    16.3 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    16.4 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    16.5 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    16.6 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    16.7 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    17. Image with text overlay

    You can feature a large image with a custom text overlay to your customers. Your message could describe a product, share an announcement, or welcome customers to your store.

    The settings for the Image with text overlay section
    Section settings Settings Description
    Image with textt
    Image The image for the section displayed on desktop browser.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Desktop image width Determine the width of the image when viewed on desktop: Small, Medium or Large

    Image is automatically optimized for mobile.
    Desktop image placement The layout for the section on desktop:
    • Image first: Display the image on the left.
    • Image second: Display the text on the left.

    Image first is the default mobile layout.
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout
    Mobile image The image for the section displayed on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 17.1 Heading
    • 17.2 Subheading
    • 17.3 Text
    • 17.4 Button
    • 17.5 Link
    • 17.6 Image
    • 17.7 Custom liquid
    • 17.8 Empty space
    17.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    17.2 The settings for the Subheading block.
    Block settings Settings Description
    Subheading
    Subheading The subheading for the heading.
    Subheading size Size of subheading:
  • Small
  • Medium
  • Large
    		•
    Use secondary color Apply a little bit lighter color based on the text color.
    17.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    17.4 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    17.5 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    17.6 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    17.7 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    17.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    18. Images with text overlay

    This section is similar to the [Image with text overlay] section, but it allows you to display up to five images simultaneously. This provides greater design flexibility for your page.

    The settings for the Images with text overlay section
    Section settings Settings Description
    Image with text overlay
    Allow transparent header This setting only applies when this section is the first one.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Image 1 The first image for the section displayed on desktop browser.
    Image 2 The second image for the section displayed on desktop browser.
    Image 3 The third image for the section displayed on desktop browser.
    Image 4 The fourth image for the section displayed on desktop browser.
    Image 5 The fifth image for the section displayed on desktop browser.
    Mobile layout
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Highlight
    • Highlight gradient
    • Button background
    • Button background gradient
    • Overlay, can be adjusted from 0% to 100%.
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 18.1 Heading
    • 18.2 Subheading
    • 18.3 Text
    • 18.4 Button
    • 18.5 Link
    • 18.6 Image
    • 18.7 Custom liquid
    • 18.8 Empty space
    18.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    18.2 The settings for the Subheading block.
    Block settings Settings Description
    Subheading
    Subheading The subheading for the heading.
    Subheading size Size of subheading:
  • Small
  • Medium
  • Large
    		•
    Use secondary color Apply a little bit lighter color based on the text color.
    18.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    18.4 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    18.5 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    18.6 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    18.7 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    18.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    19. Logo list

    A section allows displaying a horizontal list of logos.

    The settings for the Logo list section
    Section settings Settings Description
    Logo list
    Style Choose With border style or With background style to display the section.
    Horizontal space Horizontal spacing of adjacent logos. Can be from 50px to 200px, increasing arithmetically of 5px.
    Marquee style

     
    Direction Navigate the movement of the logo Left or Right.
    Speed Adjust the speed of navigation, from 1x to 30x.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Makes section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Each logo is set up in Logo block

    The settings for the Logo block.
    Block settings Settings Description
    Logo
    Image Selects an logo image.
    Image height Adjusts the height of logo, from 0px to 200px, increasing arithmetically of 4px.
    Link Adds the URL you want to link.

    20. Lookbook

    This section creates pins of product on a picture board in which each pin directs customers to the product details.

    The settings for the Lookbook section
    Section settings Settings Description
    Lookbook
    Image The image of the section on desktop.
    Mobile image The image of the section on mobile.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • Product block
    • Content block
    20.1 The settings for the Product block.
    Block settings Settings Description
    Product Select product Selects a product of this block.
    Hotspot
    Text Adjusts color of text.
    Vertical positiont Specifies the distance between the spot and the top edge of the image.
    Horizontal position Specifies the distance between the spot and the left edge of the image.
    Mobile layout
    Vertical position Specifies the distance between the spot and the top edge of the image on mobile browser.
    Horizontal position Specifies the distance between the spot and the left edge of the image on mobile browser.
    20.2 The settings for the Content block.
    Block settings Settings Description
    Content
    Title Title of the spot.
    Text Subtext, which is smaller than the Title.
    Link The link that you want customers to navigate to if they click on.
    Hotspot
    Text The text color.
    Vertical positiont Specifies the distance between the spot and the top edge of the image.
    Horizontal position Specifies the distance between the spot and the left edge of the image.
    Mobile layout
    Vertical position Specifies the distance between the spot and the top edge of the image on mobile browser.
    Horizontal position Specifies the distance between the spot and the left edge of the image on mobile browser.

    21. Map

    This section displays a Google Maps that highlights the location of your business.

    The settings for the Map section
    Section settings Settings Description
    Map
    Allow transparent header This setting only is applicable when this section is the first one.
    Map address Enter your address. Google Maps will find the exact location.
    Google Maps API key

     

     

    		 Enter your Google API key.
    Map zoom Zoom in from level 12 to 20. Higher zoom levels show more detail.
    Map style Choose one of the following 6 options to format the Map style:
  • Standard
  • Silver
  • Retro
  • Dark
  • Night
  • Aubergine
    		•
    Image Choose a backup map image to display if the map fails to load.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout
    Mobile layout Choose a style to display this section on mobile browser:
    • Map first - Display the map above the text.
    • Text overlay - The text overlays the map.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.

    Parallax direction can be chosen one of 3 following options:

  • Vertical
  • Horizontal
  • Zoom
    		•
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 21.1 Heading
    • 21.2 Subheading
    • 21.3 Text
    • 21.4 Button
    • 21.5 Link
    • 21.6 Image
    • 21.7 Custom liquid
    • 21.8 Empty space
    21.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    21.2 The settings for the Subheading block.
    Block settings Settings Description
    Subheading
    Subheading The subheading for the heading.
    Subheading size Size of subheading:
    • Small
    • Medium
    • Large
    Use secondary color Apply a little bit lighter color based on the text color.
    21.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    21.4 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    21.5 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    21.6 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    21.7 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    21.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    22. Multicolumn

    You can use the mulitcolumn section to display content in a column layout, and add a button below the columns to take the customer to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or provide a review.

    The settings for the Multicolumn section
    Section settings Settings Description
    Multicolumn Number of columns on desktop Customize the number of columns displayed on desktop browser: 2 columns or 4 columns.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available block: Column block.

    The settings for the Column block.
    Block settings Settings Description
    Column
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Image The image for the block.
    Image ratio The image ratio for blocks images:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large.
    Description The description for the image.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    23. Multicolumn with icons

     

    The settings for the Multicolumn with icons section
    Section settings Settings Description
    Multicolumn with icons
    Number of columns on desktop Customize the number of columns displayed on desktop browser: 2 columns or 4 columns.
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available block: Column block.

    The settings for the Column block.
    \
    Block settings Settings Description
    Column
    Icon Selects an icon in the icon list.
    Heading The column title.
    Description Text describes the column.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    You may add a section to display products from any combination of collections.

    Each collection is set up in Collection block

    The settings for the Multiple featured collections section>
    Section settings Settings Description
    Featured collection
    Maximum products to show The number of complementary products can range from 2 to 12.
    Number of columns on desktop Customizes the number of columns displayed on desktop browser from 1 to 5.
    Enable carousel on desktop Displays a carousel of products from the collection on a desktop browser.
    Enable "View all" button

     

    		 The "View all" button will be added below your collection list. This is suggested when the list includes more collections than are shown.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available block: Collection block.

    The settings for the Collection block.
    Block settings Settings Description
    Collection
    Collection Chooses collection you want to display products from.
    Products You can display individual products instead of the entire collection.
    Title The title of the Featured collection

    25. Portfolio

    This section allows you to add a collection of your work samples, products, and other relevant items to demonstrate your value to clients.

    The settings for the Portfolio section
    Section settings Settings Description
    Portfolio
    Number of columns on desktop Customizes the number of columns displayed on desktop browser from 1 column to 5 columns
    Desktop layout Displays desktop layout:
  • Grid
  • Standard
    		•
    Image ratio The image ratio for the images on desktop browser:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    • Rounded - Crop the images as a circle
    Mobile layout
    Mobile image ratio The image ratio for the images on mobile browser:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    • Rounded - Crop the images as a circle
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Each item in Portfolio is set up in Heading block.

    The settings for the Heading block.
    Block settings Settings Description
    Profile
    Image The image of the block.
    Mobile image The image of the block on mobile browser.
    Heading The block title.
    Text Text describes the block.
    Color text Can adjust Text and Background colors.

    26. Recently viewed

    Helps your customers to find the products they'd previously visited and prompt them to purchase. This is easier for your customers to find them again rather than find their way through the navigation menu.

    The settings for the Recently viewed section
    Section settings Settings Description
    Recently viewed
    Number of recent products The number of complementary products can range from 2 to 12.
    Number of columns on desktop Customizes the number of columns displayed on desktop browser from 1 column to 5 columns
    Enable carousel on desktop Displays a carousel of products from the collection on a desktop browser.
    Mobile layout
    Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
    Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    27. Rich text

    You can add a rich text section with a header, paragraph content, and a button to link customers to a new page.

    The settings for the Rich text section
    Section settings Settings Description
    Rich text
    Desktop content alignment The alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 27.1 Heading
    • 27.2 Text
    • 27.3 Button
    • 27.4 Link
    • 27.5 Image
    • 27.6 Custom liquid
    • 27.7 Empty space
    27.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    27.2 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    27.3 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    27.4 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    27.5 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    27.6 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    27.7 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    28. Scrolling text

    This section allows the creation of scrolling text that moves across the screen. It can be used to display a lot of information in a small space, attract attention, or for other purposes.

    The settings for the Scrolling text section
    Section settings Settings Description
    Scrolling text
    Direction Select the desired scrolling direction:
    • Left: scrolling from right to left
    • Right: scrolling from left to right
    Speed Determines the speed of the Scrolling text. Can be from 0.5/100px to 2.5/100px, increasing arithmetically of 0.1/100px.
    Horizontal space The spacing between texts range from 50px to 200px, increasing in increments of 5px.
    Enable twin marquees Displays two marquees at the same time
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene. This setting can be used to highlight scrolling text.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • Text block
    • Image block
    28.1 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set 12px to 180px.
    Text font Chooses between 2 options for the text formatting: Body or Heading.
    Stencil text Enable stencil text.

    May not work in all browsers.
    28.2 The settings for the Image block.
    Block settings Settings Description
    Text
    Image Selects an image for the block.
    Image height The image height can be set between 12px and 180px.

    29. Shop the look

    A section that lets customers interact with products or a collection when they click on it.

    Each product in Shop the look is set up in Product block

    The settings for the Shop the look section
    Section settings Settings Description
    Shop the look
    Image The image of the section on desktop browser
    Mobile image The image of the section on mobile browser
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available block: Product block

    The settings for the Product block.
    Block settings Settings Description
    Product Select product Selects a product of this block.
    Hotspot
    Text Adjusts color of text.
    Vertical positiont Specifies the distance between the spot and the top edge of the image.
    Horizontal position Specifies the distance between the spot and the left edge of the image.
    Mobile layout
    Vertical position Specifies the distance between the spot and the top edge of the image on mobile browser.
    Horizontal position Specifies the distance between the spot and the left edge of the image on mobile browser.

    30. Slideshow

    You can add a slideshow of images to your home page. In the slideshow section, you can set the height of the slides, add text and buttons, and choose whether your slideshow plays automatically. A minimum of 3 slides is typically recommended for a smooth transition effect.

    Note: Because of the images usage, having a slider may slightly slow down your website. So you can use, but it’s at your own risk.

    The settings for the Slideshow section
    Section settings Settings Description
    Slidesshow
    Auto-rotate slides Sets the slideshow to play automatically.
    Change slides every Sets the slide transition time from 3 seconds to 9 seconds.
    Desktop height Determines the height of the image when viewed on desktop:
    • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen - Extends the image to adapt the height of the window browser.
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Mobile layout Mobile height Determines the height of the image when viewed on mobile:
    • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen - Extends the image to be the height of the browser window.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    • Overlay, can be adjusted from 0% to 100%
    Section Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Custom CSS Adds custom CSS to this section.

    Available blocks: Image slide block and Video slide block

    30.1 The settings for the Image slide block.
    Block settings Settings Description
    Image
    Image The image that you want to display.
    Mobie image Optionally, you can set an image for mobile.
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Use outline button style Displays the outline style for the button.
    30.1 The settings for the Video slide block.
    Block settings Settings Description
    Video
    Shopify-hosted video Chooses a video from Shopify-hosted video
    Embed video from URL Embed video from URL on desktop browser.
    Cover image The image that displays before a customer plays the video.
    Video ALT text Describe the video to make it accessible for customers using screen readers.
    Mobile layout
    Mobile video nsert a video by uploading for mobile browser.
    Embed video from URL Embed a video from a URL on a mobile browser.
    Mobile cover image The image that displays before a customer plays the video on mobile browser.
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Use outline button style Enable outline button style.

    31. Testimonials

    When it comes to making purchasing decisions online, customer reviews and consumer testimonials can make or break a sale. This section helps to build social proof and increase conversions with a dedicated page section.

    Each Testimonial in this section is set up in Testimonials block

    The settings for the Testimonials section
    Section settings Settings Description
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks: Testimonial block.

    The settings for the Testimonial block.
    Block settings Settings Description
    Testimonial
    Icon Chooses a pre-made icon that displays right above the quote text. The None option will disable the icon.
    • None
    • Quote
    • 5 stars
    • 4 stars
    • 3 stars
    • 2 stars
    • 1 stars
    Text Your custom text, this could be the review from your customer.
    Author Your custom text, this could be the customer's name.
    Author's image This could be your customer's image to make the testimonial more trustworthy.
    Image ratio Choose one of the 3 following options:
  • Adapt to image
  • Square
  • Rounded
    		•
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    32. Testimonials banner

    This section displays testimonials from satisfied customers, often used to build trust and credibility with potential customers.

    The settings for the Testimonials banner section
    Section settings Settings Description
    Testimonials banner
    Allow transparent header This setting only applies when this section is the first one.
    Image The image for the section on desktop browser.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen
      - Extends the image to adapt the height of the window browser.
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Mobile layout
    Mobile image The image for the section on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Highlight
    • Highlight gradient
    • Button background
    • Button background gradient
    • Overlay, can be adjusted from 0% to 100%.
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.

    Parallax direction can be chosen one of 3 following options:

  • Vertical
  • Horizontal
  • Zoom
    		•
    Custom CSS Adds custom CSS to this section.

    Available blocks: Testimonial block.

    The settings for the Testimonial block.
    Block settings Settings Description
    Testimonial
    Icon Choose a pre-made icon that displays right above the quote text. The None option will disable the icon.
    • None
    • Quote
    • 5 stars
    • 4 stars
    • 3 stars
    • 2 stars
    • 1 stars
    Text Your custom text, this could be the review from your customer.
    Author Your custom text, this could be the customer's name.
    Author's image This could be your customer's image to make the testimonial more trustworthy.
    Image ratio Choose one of the 3 following options:
    • Adapt to image
    • Square
    • Rounded
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    33. Timeline

     

    The settings for the Timeline section
    Section settings Settings Description
    Timeline
    Image ratio The image ratio for the images on desktop browser:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    • Rounded - Crop the images as a circle
    Mobile image ratio The image ratio for the images on mobile browser:
    • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Square - Crops the images to 1:1 ratio.
    • Portrait - Crops the images to 2:3 ratio.
    • Landscape - Crops the images to 3:2 ratio.
    • Wide - Crops the images to 16:9 ratio.
    • Rounded - Crop the images as a circle
    Heading
    Heading The section title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading alignment The Heading can be aligned to the Left, Center, or Right.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Subheading The subheading for the heading is placed above the heading.
    Description The description text for the heading is placed below the heading.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available block: Content block.

    The settings for the Content block.
    Block settings Settings Description
    Content
    Image The image for the block on desktop browser.
    Mobile image The image for the block on mobile browser.
    Subheading The subheading for the heading is placed above the heading.
    Heading Large text for the title of the block.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Text Adding your text.

    Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
    Button label The text that displays on the button.
    Button link The URL of the button.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    34. Video

    A section that displays a video.

     

    The settings for the Video section
    Section settings Settings Description
    Video Allow transparent header This setting only applies when this section is the first one.
    Shopify-hosted video Video Chooses a video from Shopify-hosted video.
    Embed video from URL
    URL The YouTube or Vimeo link to the video. The video must be publicly available.
    Cover image The image that displays before a customer plays the video on desktop browser.
    Video ALT text Describe the video to make it accessible for customers using screen readers.
    Enable video autoplay Playing video automatically.

    Video are muted automatically to allow autoplay.
    Desktop height Determines the height of the image when viewed on desktop:
    • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen - Extends the image to adapt the height of the window browser.
    Mobile layout
    Mobile video Chooses/Uploads a video by uploading for mobile browser.
    Or embed video from URL Embed a video from a URL on a mobile browser.
    Mobile cover image The image that displays before a customer plays the video on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section full width Make the container full width.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    35. Video hero

    Displays a large banner consists a video in background and a text box with buttons.

     

    The settings for the Video hero section
    Section settings Settings Description
    Video hero Allow transparent header This setting only applies when this section is the first one.
    Shopify-hosted video Video Chooses a video from Shopify-hosted video.
    Embed video from URL
    URL The YouTube or Vimeo link to the video. The video must be publicly available.
    Cover image The image that displays before a customer plays the video.
    Video ALT text Describe the video to make it accessible for customers using screen readers.
    Enable video autoplay Playing video automatically.

    Video are muted automatically to allow autoplay.
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Mobile layout
    Mobile video Chooses/Uploads a video by uploading on a mobile browser.
    Or embed video from URL Embed a video from URL on a mobile browser.
    Mobile cover image The image that displays before a customer plays the video on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section full width Make the container full width.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks: Slide block.

    Block settings Settings Description
    Slide
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2

    36. Video with text overlay

     

     

    The settings for the Video with text overlay section
    Section settings Settings Description
    Video text overlay
    Allow transparent header This setting only applies when this section is the first one
    Video Uploads or embeds a video on a desktop browser.
    Cover Image The image for the section on desktop browser.
    Video ALT text Describe the video to make it accessible for customers using screen readers.
    Enable video autoplay Playing video automatically.

    Video are muted automatically to allow autoplay.
    Enable video looping Playing video repeatedly.
    Desktop height Determines the height of the image when viewed on desktop:
      • Adapt to image - Keeps the image's original aspect ratio.
    • 400px - 400px.
    • 450px - 450px.
    • 550px - 550px.
    • 650px - 650px.
    • 750px - 750px
    • Full screen - Extends the image to adapt the height of the window browser.
    Desktop content width Determines the width of the image when viewed on desktop:
  • Small
  • Medium
  • Large
    		•
    Desktop content position Sets the position of the content on desktop:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
    		•
    Mobile layout
    Mobile video Uploads or embeds a video on a desktop browser.
    Mobile cover image Cover image of the section on mobile browser.
    Mobile height Determines the height of the image when viewed on mobile:
      • Auto - The browser will decide based on the desktop value.
    • 200px - 200px.
    • 250px - 250px.
    • 300px - 300px.
    • 400px - 400px.
    • 500px - 500px.
    • Full screen
      - Extends the image to be the height of the browser window.
    Mobile content position Sets the position of the content on mobile browser:
  • Top Left
  • Middle Left
  • Bottom Left
  • Top Center
  • Middle Center
  • Bottom Center
  • Top Right
  • Middle Right
  • Bottom Right
    		•
    Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
    		•
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Highlight
    • Highlight gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section..
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • 36.1 Heading
    • 36.2 Subheading
    • 36.3 Text
    • 36.4 Button
    • 36.5 Link
    • 36.6 Image
    • 36.7 Custom liquid
    • 36.8 Empty space
    36.1 The settings for the Heading block.
    Block settings Settings Description
    Heading
    Heading The block title.
    Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
    Heading tag Selects the heading tag to structure and organize your content for SEO.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    36.2 The settings for the Subheading block.
    Block settings Settings Description
    Subheading
    Subheading The subheading for the heading.
    Subheading size Size of subheading:
    • Small
    • Medium
    • Large
    Use secondary color Apply a little bit lighter color based on the text color.
    36.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Text Adding your text.

     

     
    Text size The text size can be set to one of the following option:
  • Small
  • Medium
  • Large
  • Extra large
  • Custom.

    • Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px.
    Text font Choose between 2 options for the text formatting: Body or Heading.
    Use secondary color Enable seconday color.
    Highlighted text

     
    Highlighted text Chooses from one of the following 6 options to format your text:
    • Text color
    • Text background color
    • Fancy underline
    • Regular underline
    • Stencil text
    • Hand-drawn scribble
    Highlighted scribble

    Require highlighted text style to be set to Hand-drawn scribble.

    		 This setting offers 5 ways to highlight text:
    • Circle
    • Basic underline
    • Sketch underline
    • Squiggle underline
    • Squiggle underline 2
    36.4 The settings for the Button block.
    Block settings Settings Description
    Button
    Button label The text that displays on the button.
    Button link The URL of the button.
    Button size Adjust size of the button in 3 options: Small, Medium or Large
    Use outline button style Uses the outline style for the button.
    36.5 The settings for the Link block.
    Block settings Settings Description
    Link
    Text The text of the link, which is placed right beside the button.
    Link Add the URL you want to link.
    36.6 The settings for the Image block.
    Block settings Settings Description
    Image
    Image Selects an image for block.
    Image width Chooses one of two image width options:
    • Full width: Image fills the entire browser window.
    • Custom: Sets the image width between 20px and 1000px in 10px increments.
    36.7 The settings for the Custom liquid block.

    You can add your own Liquid code to create a custom block.

    36.8 The settings for the Empty space block.
    Block settings Settings Description
    Empty space
    Desktop height Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px.
    Mobile height Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px.

    A section group at the bottom of the page that typically contains information about the website, such as the copyright notice, the website's contact information, and links to social media pages.

     

    The settings for the Footer section
    Section settings Settings Description
    Footer
    Email Signup

    Subscribers added automatically to your "accepted marketing" customer list Learn more.

    		 Enable to show email signup.
    Heading The section title.
    Title Adds your own text to display description.
    Social media icons

     

    		 Show social media icons Displays social media icons that you've set up in your Theme settings.
    Follow on Shop Enable Follow on Shop

    Learn more

    		 Enable to show Follow on Shop.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    • Button text
    • Button background
    • Button background gradient
    Section
    Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
    Show section divider Shows a line divider above this section.
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
    Custom CSS Adds custom CSS to this section.

    Available blocks:

    • Logo
    • Menu
    • Text
    • Brand information
    1.1 The settings for the Logo block.
    Block settings Settings Description
    Logo
    Image Chooses/Uploads an logo image.
    Image height Adjusts the height of logo, from 0px to 200px, increasing arithmetically of 4px.
    Show social media icons Displays social media icons that you've set up in your Theme settings.
    Enable Follow on Shop

    Learn more

    		 Displays Follow on Shop.
    1.2 The settings for the Menu block.
    Block settings Settings Description
    Menu

     
    Heading Optional, title of the block.
    Choose a menu Choose a menu to display.

    Displays only top-level menu items.
    Column width Adjust the width of the column, from 15px to 95px, increasing arithmetically of 1px.
    1.3 The settings for the Text block.
    Block settings Settings Description
    Text
    Heading Optional, title of the block.
    Text Adds your own text to display description.
    Column width Sets column width from 15% to 95% of section width.
    1.4 The settings for the Brand information block.
    Block settings Settings Description
    Brand information
    Heading Optional, title of the block.
    Tagline #1 Adds a short text.

     

    (eg: company's missions, values, unique selling, etc.)
    Tagline #1 link The link that you want customers to navigate to if they click the image.
    Tagline #2 Adds a short text.
    Tagline #2 link The link that you want customers to navigate to if they click the image.
    Tagline #3 Adds a short text.
    Tagline #3 link The link that you want customers to navigate to if they click the image.
    Tagline #4 Adds a short text.
    Tagline #4 link The link that you want customers to navigate to if they click the image.
    Column width Adjust the width of the column, from 15px to 95px, increasing arithmetically of 1px.

     

    The settings for the Footer copyright section
    Section settings Settings Description
    Language selector Enable language selector

    To add a language, go to your language settings.

    		 Enable to display language selector
    Country/region selector Enable country/region selector

    To add a country/region, go to your market settings.

    		 Enable to display country/region selector
    Policy links Show policy links

    To add store policies, go to your policy settings.

    		 Enable to show policy links.
    Payment methods

     

     
    Show payment icons Enable to show payment icons.
    Use monochrome icons Enable to display monochrome icons.
    Color

     

    		 You can optionally customize the colors of the section, including the following:
    • Text
    • Background
    • Background gradient
    Section
    Show section divider Displays a line divider above this section
    Make section narrow Makes the container narrow.
    Make section rounded Applies a rounded edge to the top two corners.
    Enable parallax effect Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene.
    Custom CSS Adds custom CSS to this section.

    This section does not support adding blocks.

    This section allows you to add more sections from the following list, according to your page setting purpose.

    This article uses the names of well-known brands such as Shopify, Google Maps to illustrate the concepts discussed, not for advertising purposes.

    Back to Concept Support