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
Section settings Description
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.
Block settings Description
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.
Block settings Description
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.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp

Back to Concept Support