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
- Announcement bar (Static section)
- Header (Static section)
- Available sections (Dynamic sections)
B. Overlay group
- Cart drawer (Static section)
- Search drawer (Static section)
- Cookie banne (Static section)
- Newsletter popup (Static section)
C.Template group
This group enables you to create dynamic sections with greater flexibility.
- Blog posts
- Collage
- Collage blog posts
- Collection list
- Contact form
- Contact with Map
- Countdown timer
- Custom liquid
- Email signup
- Empty space
- FAQ
- Featured collection
- Featured product
- Image comparison
- Image with text
- Images with text
- Image with text overlay
- Images with text overlay
- Logo list
- Lookbook
- Map
- Multicolumn
- Multicolumn with icon
- Multiple featured collections
- Portfolio
- Recently viewed
- Rich text
- Scrolling text
- Shop the look
- Slideshows
- Testimonials
- Testimonials banner
- Timeline
- Video
- Video hero
- Video with text overlay
D. Footer group
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.
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:
|
|
Highlighted scribble
Requires highlighted text style to be set to Hand-drawn scribble. |
This setting provides five methods for hand-drawing scribble highlighted text:
|
1.2.Header
The header displays on all pages in your theme.
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:
|
|
Enable dropdown on hover |
|
|
Sticky header | There are three options for sticky header:
|
|
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:
|
|
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.
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 | 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.
Section settings | Description | |
---|---|---|
Custom CSS | Adds custom CSS to this section. |
2.3. Cookie banner
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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. |
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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:
|
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.
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:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
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:
|
|
Desktop content position | The position of the content on desktop:
|
|
Desktop content alignment | The alignment of the content on desktop:
|
|
Mobile layout | ||
Mobile image | The image for the block displayed on mobile. | |
Mobile image ratio | The image ratio for the images on mobile browser:
|
|
Mobile content position | The position of the content on mobile browser:
|
|
Mobile content alignment | The alignment of the content on mobile browser:
|
|
Highlighted text | ||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
|
Desktop content position | Sets the position of the content on desktop:
|
|
Desktop content alignment | Sets the alignmentf the content on desktop:
|
|
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:
|
|
Mobile content position | Sets the position of the content on mobile browser:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Highlighted text | ||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the block, including the following:
|
3. Collage blog posts
This section capturea readers' attention with a collage of blog posts.
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:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
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:
|
|
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:
|
|
Mobile layout | ||
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
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:
|
|
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.
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:
|
|
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Desktop content position | Sets the position of the content on desktop:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
Mobile layout | ||
Mobile image | Cover image of the section on mobile browser. | |
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Mobile content position | Sets the position of the content on mobile browser:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
7.2 The settings for the Subheading block.
Block settings | Settings | Description |
---|---|---|
Subheading | ||
Subheading | The subheading for the heading. | |
Subheading size | Size of subheading:
|
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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:
|
|
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.
Section settings | Settings | Description |
---|---|---|
Email signup | ||
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
Section settings | Settings | Description |
---|---|---|
Empty space | ||
Desktop height | Determines the height of the image when viewed on desktop:
|
|
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
12. Featured collection
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
13. Featured product
You can add a section that features a specific product.
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:
|
|
Thumbnail position | The position of Thumbnail: Next to media or Below media | |
Image zoom | 3 options available:
|
|
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:
|
13.3 The settings for the Title block.
Block settings | Settings | Description |
---|---|---|
Title | ||
Title size | The size of the title:
|
|
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:
|
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.
Section settings | Settings | Description |
---|---|---|
Image comparison | ||
Layout | Displays the comparison in two formats:
|
|
Desktop height | Determines the height of the image when viewed on desktop:
|
|
Mobile layout | ||
Mobile height | Determines the height of the image when viewed 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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
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:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
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:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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:
|
|
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:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
Mobile layout | ||
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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:
|
|
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 is the default mobile layout. |
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
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:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
17.2 The settings for the Subheading block.
Block settings | Settings | Description |
---|---|---|
Subheading | ||
Subheading | The subheading for the heading. | |
Subheading size | Size of subheading:
|
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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:
|
|
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Desktop content position | Sets the position of the content on desktop:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
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:
|
|
Mobile content position | Sets the position of the content on mobile browser:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
18.2 The settings for the Subheading block.
Block settings | Settings | Description |
---|---|---|
Subheading | ||
Subheading | The subheading for the heading. | |
Subheading size | Size of subheading:
|
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
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:
|
|
Desktop content position | Sets the position of the content on desktop:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
Mobile layout | ||
Mobile layout | Choose a style to display this section on mobile browser:
|
|
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
21.2 The settings for the Subheading block.
Block settings | Settings | Description |
---|---|---|
Subheading | ||
Subheading | The subheading for the heading. | |
Subheading size | Size of subheading:
|
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Image | The image for the block. | |
Image ratio | The image ratio for blocks images:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
23. Multicolumn with icons
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:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
24. Multiple featured collections
You may add a section to display products from any combination of collections.
Each collection is set up in Collection block
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Image ratio | The image ratio for the images on desktop browser:
|
|
Mobile layout | ||
Mobile image ratio | The image ratio for the images on mobile browser:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
Section settings | Settings | Description |
---|---|---|
Rich text | ||
Desktop content alignment | The alignment of the content on desktop:
|
|
Mobile content alignment | Sets the alignment of the content 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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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.
Section settings | Settings | Description |
---|---|---|
Scrolling text | ||
Direction | Select the desired scrolling direction:
|
|
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:
|
|
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
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
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:
|
|
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Mobile layout | ||
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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.
|
|
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:
|
|
Highlighted text | ||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
32. Testimonials banner
This section displays testimonials from satisfied customers, often used to build trust and credibility with potential customers.
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:
|
|
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Mobile layout | ||
Mobile image | The image for the section on mobile browser. | |
Mobile height | Determines the height of the image when viewed on mobile:
|
|
Mobile content position | Sets the position of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
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.
|
|
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:
|
|
Highlighted text | ||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
33. Timeline
Section settings | Settings | Description |
---|---|---|
Timeline | ||
Image ratio | The image ratio for the images on desktop browser:
|
|
Mobile image ratio | The image ratio for the images 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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
34. Video
A section that displays a video.
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:
|
|
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:
|
|
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.
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:
|
|
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:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
36. Video with text overlay
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:
|
|
Desktop content width | Determines the width of the image when viewed on desktop:
|
|
Desktop content position | Sets the position of the content on desktop:
|
|
Desktop content alignment | Sets the alignment of the content on desktop:
|
|
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:
|
|
Mobile content position | Sets the position of the content on mobile browser:
|
|
Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
Color | You can optionally customize the colors of the section, including the following:
|
|
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
36.2 The settings for the Subheading block.
Block settings | Settings | Description |
---|---|---|
Subheading | ||
Subheading | The subheading for the heading. | |
Subheading size | Size of subheading:
|
|
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:
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:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
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:
|
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. |
D. Footer group
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.
1. Footer
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 | Enable to show Follow on Shop. | |
Color | You can optionally customize the colors of the section, including the following:
|
|
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 | 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. |
2. Footer copyright
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:
|
|
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.
3. Available sections in Footer group
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
Share:
Custom Javascript event listeners and triggers in Concept