In Be Yours, you can add sections on any page. There a few default sections that appear on each page, such as the announcement bar, the header, and the footer.
The announcement bar lets you communicate important information to your customers from any page. You can customize up to 6 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
The settings for the Announcement bar section
Setting
Description
Show on home page only
Displays the announcement message on the home page only.
Use carousel style on desktop
Displays the announcements in one-item slider style on desktop. On mobile, this style is the default layout.
Carousel style settings
The carousel settings for the Announcement bar section
Setting
Description
Auto-rotate announcements
Set the carousel to play automatically. This also adds a play toggle button.
Change announcements every
Choose how often to change announcements.
Show navigation
Displays navigation buttons.
Marquee style settings
The marquee style settings for the Announcement bar section
Setting
Description
Direction
Set the marquee-style announcement bar to scroll from left to right or reverse the direction (right to left).
Speed
Adjust the speed of the marquee-style announcement bar.
Color settings
The color settings for the Announcement bar section
Setting
Description
Text
Changes the color of the announcement text.
Background
Changes the color of the announcement bar background.
Background gradient
Changes the color and type of the announcement bar background gradient.
Announcement block
The settings for the announcement block in the announcement bar section
Setting
Description
Text
The announcement that you want to display to your customers.
Link
The link that you want customers to navigate to if they click the announcement bar.
Header
The header displays on all pages in your theme.
Section settings
The settings for the heading section
Setting
Description
Logo image
The logo for your store.
Custom logo height
The height of the logo (in pixel). From 30 px to 120 px. The default is 50 px.
Desktop logo position
Where the logo displays in the header when a customer views the site on a large screen, such as a desktop.
Middle left (default) - Displays the logo inline with the main menu, centered vertically and aligned to the left.
Top left - Displays the logo above the main menu, and aligns the logo and menu items to the left.
Top center - Displays the logo above the main menu, and aligns the logo and menu items in the center.
Center, off-canvas menu - Displays the logo in the center of the header; the menu can be revealed by sliding in the view from the left, hiding the page behind it.
Center, menu split - Displays the logo inline with the main menu, centered vertically; menu items are split on the logo's left and right.
Menu
The menu to use for your main menu.
Enable dropdown menu
Displays the menu in dropdown style. To know how to setup mega menu, please check this article.
Show separator line
Displays a line to visually separate the header from the page's content.
Enable sticky header
Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down.
Icons weight
Sets how thick header icons should be displayed. The thickness is increasing corresponding to Extra-light to Extra-bold
Transparent header settings
The Transparent header settings for the Header section
Setting
Description
Enable on homepage
Enables transparent header on homepage.
Enable on collection pages
Enables transparent header on collection pages.
Custom pages
The menu whose items linked to the pages you want to enable the transparent header. For further instruction, please follow this article.
Show separator line
Displays a line to visually separate the header from the page's content.
Text color
Changes the color of the text on transparent header.
Logo image
Uses this logo on the pages which transparent header is enabled.
Section color settings
The color settings for the Header section
Setting
Description
Text
Changes the color of the header text. This setting is not applied to transparent header.
Lines
Changes the color of the header lines, including the separator. This setting is not applied to transparent header.
Background
Changes the color of the header background. This setting is not applied to transparent header.
Footer
The footer displays on all pages in your theme.
Section settings
The settings for the footer section
Setting
Description
Show email signup
Includes an email signup form where customers can subscribe to your newsletter and marketing.
Heading
The title for the Show email signup form. If Show email signup isn't enabled, then this doesn't display.
Subheading
The the secondary text for the Show email signup form. If Show email signup isn't enabled, then this doesn't display.
Show social media icons
Displays icons for any social media platforms that you've entered a profile link for in your theme settings.
Heading
The title for the social media icons. If Show social media icons isn't enabled, then this doesn't display.
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.
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.
Show payment icons
Displays the icons for all payment methods that are enabled on your store.
Additional copyright text
The text informs the public that your store is protected by copyright.
Section color settings
The color settings for the footer section
Setting
Description
Text
Changes the color of the footer text.
Heading
Changes the color of the footer heading.
Link
Changes the color of the footer link.
Lines
Changes the color of the footer lines.
Background
Changes the color of the footer background.
Menu block
The settings for the menu block in the footer section
Setting
Description
Heading
The title for the block.
Menu
The menu to display in the block.
Text block
The Text block can be used to highlight important information, such as store details, promotions, or contact information.
The settings for the text block in the footer section
Setting
Description
Heading
The title for the block.
Subtext
The text to display in the block.
Image block
The settings for the image block in the footer section
Setting
Description
Image
The image to display in the block.
Image width
Sets the width of the image. Can be any multiple of 5, from 50 px to 200 px. Default is 100 px.
Image alignment on large screen
Aligns the image within the block:
Left - Aligns the image to the left of the block.
Center (default) - Aligns the image to the center of the block.
Right - Aligns the image to the right of the block.
Link
The link that you want customers to navigate to if they click the image.
Description
The description for the image.
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
The settings for the blog posts section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Blog
The blog you want to display blog posts from. Defaults to the first blog alphabetically on your Blogs page.
Blog posts
The number of blog posts that you want to display in the section. Maximum: 4 posts.
Enable "View all" button if blog includes more blog posts than shown
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 settings
The mobile layout settings for the blog posts section
Setting
Description
Enable swipe on mobile
Changes the mobile display to one row only, where customers can swipe sideways to see more blog posts.
Enable one column on mobile
Changes the mobile display to one blog post per row.
Blog card settings
The blog card settings for the blog posts section
Setting
Description
Show featured image
Displays the featured image for the blog post. Suggested image aspect ratio: 2:3.
Image ratio
The image ratio for the blog post images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Image focal point
Choose the most important area of the image in view.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Title block
The settings for the title block on the blog post page
Setting
Description
Show date
Displays the date that the blog post was published.
Show author
Displays the author of the blog post.
Show comment count
Displays the the number of published comments of the blog post.
Excerpt block
This block displays the excerpt of the blog post. It has no adjustable settings.
Each blog post in the Blog posts section shows the first 55 words of a post's excerpt. If the blog post doesn't have an excerpt, then the first 30 words of the post are displayed instead.
Read more block
This block displays the link that navigates to the blog post. It has no adjustable settings.
Select a blog
In your theme editor, click the title of the blog posts section.
In the Blog section, click Change.
Select the blog.
Click Select, and then click Save
Collage
You can create a collage of videos, images, products, and collections. Each Collage section contains three blocks. By default, the section contains a video, product, and collection block.
To create a collage of more than three blocks, add additional collage sections below the first and don't include a Heading value to the lower collage sections. The collage sections will appear to flow together as a single section.
Section settings
The settings for the collage section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Desktop layout
How the blocks display on desktop.
Left large block (default) - The first block in the section displays on the left and larger than any other blocks.
Right large block - The last block in the section displays on the right and larger than any other blocks.
Mobile layout
How the blocks display on mobile.
Collage - Displays the images in a collage layout:
If Left large block is enabled in Desktop layout, then the first block in the section displays on the top and larger than any other block.
If Right large block is enabled in Desktop layout, then the last block in the section displays on the bottom and larger than any other block.
Column - Displays the images all the same size and in a column.
Apply overlay on image
Improves text readability by adding an overlay on the image.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Video block
The settings for the video block in the collage section
Setting
Description
Cover image
The image that displays before a customer plays the video.
URL
The YouTube or Vimeo link to the video. The video must be publicly available.
Video alt text
Describe the video to make it accessible for customers using screen readers.
Video heading
The heading of the video block.
Product block
The settings for the product block in the collage section
Setting
Description
Product
The product that you want to display.
Show second image on hover
When a customer hovers their cursor over the product image, displays the second product image if the product has one.
Enable quick view
Adds a button that opens a popup displaying all the essential product details.
Collection block
The settings for the collection block in the collage section
Setting
Description
Collection
The collection that you want to display.
Image block
The settings for the image block in the collage section
Setting
Description
Image
The image that you want to display.
Heading
The title of the column.
Link
The link that you want customers to navigate to if they click the image.
Collection list
You can add a list of collections that you want to highlight. You can add up to 12 collection blocks to a collection list.
Section settings
The settings for the collection list section
Setting
Description
Heading
The title of the section
Heading size
The size of the heading text:
Small
Medium
Large
Image ratio
The image ratio for the featured images of the collections:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Apply overlay on image
Improves text readability by adding an overlay on the image.
Enable "View all" button if list includes fewer collections than entire store does
If the collection list has fewer collections than the entire store does, then this displays a "View all" button that takes the customers to the list of collections.
Mobile layout settings
The mobile layout settings for the collection list section
Setting
Description
Enable swipe on mobile
Changes the mobile display to one row only, where customers can swipe sideways to see more collection blocks.
Enable one column on mobile
Changes the mobile display to one collection per row.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Choose collections
From your theme editor, click the Collection block that you want to add a collection to.
Click Select collection.
Click a collection, and then click Select.
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 fields:
Name
Email (required)
Comment
Section settings
The settings for the contact form section
Setting
Description
Heading
The title of the section.
Show phone number
Displays the input for phone number.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Contact press block
The settings for the contact press block in the contact form section
Setting
Description
Heading
The title of the column.
Subtext
The text to display in the block.
Link
The link that you want customers to navigate to if they click the text.
Social media icons block
Displays icons for any social media platforms that you've entered a profile link for in your theme settings.
The settings for the contact press block in the contact form section
Setting
Description
Heading
The title of the column.
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
The settings for the countdown timer section
Setting
Description
Image
The image for the section.
Image focal point
Choose the most important area of the image in view.
Desktop layout
The layout for the section on desktop:
Image first - Displays the image on the left.
Image second - Displays the text on the left.
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Make section full width
Makes the section the full width of the browser window.
Mobile layout
The layout for the section on desktop:
Image first - Displays the image on the first.
Text first - Displays the text on the first.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Section color settings
The color settings for the countdown timer section
Setting
Description
Text
Changes the color of the text box.
Background
Changes the color of the text box background.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the countdown timer section
Setting
Description
Heading
Large text for the title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block in the countdown timer section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Button block
The settings for the button block in the countdown timer section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Countdown block
The settings for the countdown block in the countdown timer section
Setting
Description
End date
Type the date you want the countdown to end. The format must be as follow: mm-dd-yyyy. For sample, if you want the countdown to end on October 09, 2022, the value should be 10-09-2022
Number size
The size of the Number text:
Small
Medium
Large
Message
You can simply set message to display once the timer reaches zero.
Message size
The size of the Message:
Small
Medium
Large
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 padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Email signup
You can add a section where customers can enter their email address and subscribe to your newsletter or marketing. When a customer subscribes, a customer account is created in your Shopify admin.
The section comes with three default blocks:
Heading
Subheading
Email form
Section settings
The settings for the email signup section
Setting
Description
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Make section full width
Makes the section the full width of the browser window.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the collection list section
Setting
Description
Heading
The title for the section.
Subheading block
The settings for the subheading block in the collection list section
Setting
Description
Description
The description for the section.
Email form
The email form block displays a field where a customer can enter an email address to sign up for your marketing. The block has no customizable settings.
Empty space
With this section, you can customize the vertical space height between sections, respectively to different devices.
Section settings
The settings for the page section
Setting
Description
Desktop height
Determines the height of the empty space when viewed on desktop. Can be from 0 px to 200 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 200 px, increasing arithmetically of 4 px. Default is 28 px.
FAQ
The FAQ (frequently asked questions) section displays common questions and answers from customers using a dynamic, accordion-style layout.
Section settings
The settings for the FAQ section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Make section narrow
Makes its container narrow.
Enable secondary background
Adds a color to the background. The color is interpolated from the text color.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Rich text block
Use the this block to create separate sections of questions.
The settings for the rich text block in the FAQ section
Setting
Description
Heading
The title for the block.
Content
The text to display in the block.
Question block
Use the this block to add an expandable answer box.
The settings for the question block in the FAQ section
Setting
Description
Question
The question for the block.
Answer
The answer for the block.
Featured product
You can add a section that features a specific product.
Section settings
The settings for the featured product section
Setting
Description
Product
The product that you want to feature in the section.
Desktop layout
The layout for the section on desktop:
Media first - Displays the media on the left.
Text first - Displays the text on the left.
Make section full width
Makes the section the full width of the browser window.
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 image zoom
Turns on the zoom feature for main images.
Enable video looping
Allows the video to be played again. Customers must click to start the replay.
Image ratio
This setting is valid only when the Enable layered images is enabled.
The image ratio for the product images:
Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Adapt to first image (default) - Uses the aspect ratio of the first image for all the rest.
Image focal point
This setting is valid only when the Enable layered images is enabled.
Choose the most important area of layered image in view.
Enable layered images
Overlaps absolutely positioned images. The first 4 images will be used if product has 4 or more. Other media types will be ignored.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Section blocks
In Be Yours, you can add the following blocks in your Featured product section.
The blocks available in the featured product section
Block
Settings
Text
Enter text for your featured product:
Icon: Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.
Text: Accepts text or dynamic source.
Text style: Choose between Body, Subtitle, or Uppercase.
Title
Displays the product's title:
Title size: Choose between Small, Medium, or Large.
Description
Displays the product's description. It has no adjustable settings.
Price
Displays the product's pricing information, such as price and compare at price. It has no adjustable settings.
Variant picker
Displays any variant options for the product:
Show variant labels: Displays the label of the variants.
Type: The style of the variant picker. Choose either Dropdown or Button.
Enable color swatches: Displays the color variants in swatches. This requires 'Button' variant picker type.
Swatch type: Determine the shape of a swatch item.
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.
If a product is eligible, a size chart button should display along with the Size option. When clicked, it opens a popup containing the page's content.
For more info about size chart, please check this article.
Buy buttons
This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout 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: Displays any dynamic checkout options that you've enabled in your Payments settings.
Inventory status
Displays a message that timely informs customers about product stock status:
Low inventory threshold: Allows you set a value that the product stock must be at least for the message to be visible. Must be an even number. Minimum: 0. Maximum: 20. The default is 10.
Show inventory transfer notice: If you have multiple locations for your store, this will displays transfer message about the date regarding shipping or stock status.
Image
Displays a custom image, ideal for trust badge image.
Image: Choose your image.
Custom height: The height of the image (in pixel). From 10 px to 100 px. The default is 20 px.
Link: The link that you want customers to navigate to if they click the image.
Read more
Adds a link that directs customers to the product detailed page.
Share
Allows customers to share the product to their social media. It has no adjustable settings.
Product rating
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.
This block displays a collapsible tab with a title. When a customer clicks the title, the tab expands to display additional content.
The settings for the collapsible tab block in the product information section
Setting
Description
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.
Tab content
The content of the tab. Displays only when the tab is expanded.
Tab 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.
Pop-up
This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.
The settings for the pop-up block in the product information section
Setting
Description
Icon
Choose a pre-made SVG icon that accommodates your popup. The None option will disable the icon.
Link label
The clickable text that customers click to display the pop-up window.
Page
The page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template.
Empty space
Add empty space with custom height between blocks, respectively to different devices.
Featured collection
You can add a section that displays products in one collection.
Section settings
The settings for the featured collection section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Collection
Which collection you want to display products from.
Maximum products to show
The number of products from the collection to display. Must be an even number. Minimum: 2. Maximum: 12.
Enable "View all" button if collection has more products than shown
If the collection has more products than set in the Maximum products to show field, then this displays a "View all" button that takes the customers to the collection page.
Mobile layout settings
The mobile layout settings for the featured collection section
Setting
Description
Enable swipe on mobile
Changes the mobile display to one row only, where customers can swipe sideways to see more products.
Display one column on mobile
Changes the mobile display to one product per row.
Product card settings
The product card settings for the featured collection section
Setting
Description
Image ratio
The image ratio for the product images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Image focal point
Choose the most important area of the image in view.
Show second image on hover
When the customer hovers their cursor over the product image, displays the second product image if the product has one.
Show quick add to cart button
When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.
Show vendor
Displays the vendors of the products.
Show product rating
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.
Enable quick view
Adds a button that opens a popup displaying all the essential product details.
Enable color swatches
Displays swatches allows you to quickly select a color.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Guarantees
This section displays your commitments to honor your customers.
Section settings
The settings for the guarantees section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Layout
This is how the blocks display on the section. The Sidebar option makes a layout with the header on the left, instead of across the top in the Default.
Column alignment
The alignment of the images and text within the columns:
Left (default) - Aligns the images and text to the left.
Center - Aligns the images and text in the center.
Right - Aligns the images and text to the right.
Enable secondary background
Adds a background color. The color is interpolated from the text color.
Make section full width
Makes the section the full width of the browser window.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Guarantee block
The settings for the guarantee block in the guarantees section
Setting
Description
Icon
Choose a pre-made SVG icon that accommodates your message. The None option will disable the icon.
Heading
Large text for the title of the text box.
Content
The paragraph text in the column.
Image banner
The image banner section supports one or two images, and a text box with buttons. If two images are used, then they are displayed side by side on desktop. On mobile, you can choose whether the images display side by side or in a column.
On desktop, the text box partially covers the image. On mobile, the text box displays below the image.
Section settings
The settings for the image banner section
Setting
Description
First image
The main image for the banner. If two images are added to the section, then this image displays on either the left or the top, depending on whether the customer is on desktop or mobile.
Second image
The secondary image for the banner. If two images are added to the section, then this image displays on either the right or the bottom, depending on whether the customer is on desktop or mobile.
Image focal point
Choose the most important area of the image in view.
Desktop content position
Positions the content relative to the image banner:
Top Left - Positions the content to the top vertically and the left horizontally.
Top Center - Positions the content to the top vertically and the center horizontally.
Top Right - Positions the content to the top vertically and the right horizontally.
Middle Left - Positions the content to the middle vertically and the left horizontally.
Middle Center - Positions the content to the middle vertically and the center horizontally.
Middle Right - Positions the content to the middle vertically and the right horizontally.
Bottom Left - Positions the content to the bottom vertically and the left horizontally.
Bottom Center - Positions the content to the bottom vertically and the center horizontally.
Bottom Right - Positions the content to the bottom vertically and the right horizontally.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Show container on desktop
Adds a container for the text parts with a dark background for more readability.
Make section full width
Makes the section the full width of the browser window.
Mobile layout settings
The mobile layout settings for the image banner section
Setting
Description
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Stack images on mobile
Displays images in a vertical column on mobile.
Show text below images
The text displays below the images, instead of lying on the images.
Section color settings
The color settings for the image banner section
Setting
Description
Text
Changes the color of the text box.
Overlay
Changes the color of the overlay.
Overlay opacity
Dims the banner images with an overlay. Use the slider to set the opacity of the overlay. The default is 30%.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the image banner section
Setting
Description
Heading
Large text for the title of the text box.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block in the image banner section
Setting
Description
Description
Displays paragraph-style text.
Description size
The size of the description text:
Small
Medium
Large
Button block
The settings for the button block in the image banner section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
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
The settings for the image with text section
Setting
Description
Image
The image for the section.
Image focal point
Choose the most important area of the image in view.
Desktop layout
The layout for the section on desktop:
Image first - Displays the image on the left.
Text first - Displays the text on the left.
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Make section full width
Makes the section the full width of the browser window.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the image with text section
Setting
Description
Heading
Large text for the title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block in the image with text section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block in the image with text section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
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
The settings for the image with text overlay section
Setting
Description
Image
The image for the section.
Image focal point
Choose the most important area of the image in view.
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Make section full width
Makes the section the full width of the browser window.
Mobile layout
The layout for the section on desktop:
Image first - Displays the image above the text.
Text overlay - The text overlays the image.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Section color settings
The color settings for the image with text overlay section
Setting
Description
Text
Changes the color of the text box.
Overlay
Changes the color of the overlay.
Overlay opacity
Dims the banner images with an overlay. Use the slider to set the opacity of the overlay. The default is 30%.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the image with text overlay section
Setting
Description
Heading
Large text for the title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block in the image with text overlay section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block in the image with text overlay section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Layered images with text
You can add a section that contains four images and a text block with an optional button to link customers to a new page. Pair text with four images to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
Section settings
The settings for the layered images with text section
Setting
Description
First image
The main image for the section.
Second image
The secondary image for the section.
Third image
The tertiary image for the section.
Fourth image
The quaternary image for the section.
Image ratio
The image ratio for the product images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Image focal point
Choose the most important area of the images in view.
Desktop layout
The layout for the section on desktop:
Images first - Displays the images on the left.
Text first - Displays the text on the left.
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Make section full width
Makes the section the full width of the browser window.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the layered images with text section
Setting
Description
Heading
Large text for the title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block in the layered images with text section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block in the layered images with text section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Lookbook
This section creates pins of product on a picture board in which each pin directs customers to the product details.
The settings for the lookbook section
Setting
Description
Image
The image for the section.
Make section full width
Makes the section the full width of the browser window.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Look block
You can have a maximum of 6 looks in one section.
The settings for the column block in the lookbook section
Setting
Description
Product
The product that you want to display.
Enable quick view
Opens a popup displaying all the essential product details, instead of directing customers to the product details page.
Color
Set the color of the hotspot.
Horizontal position
Specifies the distance between the spot and the left edge of the image.
Vertical position
Specifies the distance between the spot and the top edge of the image.
Map
This section displays a Google map that highlights the location of your business.
The settings for the map section
Setting
Description
Map address
Google will find the location based on this value, so you should provide a detailed address as possible.
Google Maps API key
To get the map working, you need to register a Google Maps API key on your own. If you don't have one, please follow this instruction for registration, then copy your API key and paste here.
Map zoom
The resolution of the current view. The allowed zoom levels are between 12 to 20. To understand what this means, the 0 value makes the entire world can be seen on the map.
Map style
Standard Google Maps styles. For preview, please check this Styling Wizard.
Image
The image will replace the map in case Google Maps fails to load.
Image focal point
Choose the most important area of the image in view.
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Make section full width
Makes the section the full width of the browser window.
Mobile layout
The layout for the section on desktop:
Image first - Displays the image above the text.
Text overlay - The text overlays the image.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Section color settings
The color settings for the image with text overlay section
Setting
Description
Text
Changes the color of the text box.
Overlay
Changes the color of the overlay.
Overlay opacity
Dims the banner images with an overlay. Use the slider to set the opacity of the overlay. The default is 30%.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the image with text overlay section
Setting
Description
Heading
Large text for the title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block in the image with text overlay section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block in the image with text overlay section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
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
The settings for the multicolumn section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Image ratio
The image ratio for the product images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Image focal point
Choose the most important area of the image in view.
Desktop content alignment
The alignment of the images and text within the columns on desktop:
Left (default) - Aligns the images and text to the left.
Center - Aligns the images and text in the center.
Right - Aligns the images and text to the right.
Mobile layout settings
The mobile layout settings for the multicolumn section
Setting
Description
Mobile content alignment
The alignment of the images and text within the columns on mobile:
Left (default) - Aligns the images and text to the left.
Center - Aligns the images and text in the center.
Right - Aligns the images and text to the right.
Enable swipe on mobile
Changes the mobile display to one row only, where customers can swipe sideways to see more column blocks.
Enable one column on mobile
Changes the mobile display to one column per row.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Column block
You can have a maximum of 12 columns in one section. If you have one, two, or three column blocks, then they display in one row on desktop. If you have four or more column blocks, then they display in a layout of two columns.
The settings for the column block in the multicolumn section
Setting
Description
Image
The image that you want to display.
Heading
The title of the column.
Description
The paragraph text in the column.
Button label
The text that displays on the button. If you do not want to include a button in the column, then leave this field empty.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Page
You can choose to display the content of a custom page in a section. This brings the entire content of the page into the section, but doesn't bring any Liquid code from any template.
The section's color scheme uses the following settings:
By default, text is the color of Text. Any specific styling that's applied to text on the page is brought to the section.
Hyperlinks are the color of Outline button.
Section settings
The settings for the page section
Setting
Description
Page
The page from your online store that you want to display.
Heading size
The size of the heading text:
Small
Medium
Large
Make section narrow
Makes its container narrow.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Quotes
Quotes are important because they allow merchants to build trust with customers by displaying positive messages from previous customers or brand supporters.
Section settings
The settings for the quotes section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Quote block
Use the this block to create separate sections of questions.
The settings for the testimonial block in the testimonials section
Setting
Description
Icon
Choose a pre-made icon that displays right above the quote text. The None option will disable the icon.
None
Quote
5 stars
4 stars
3 stars
2 stars
1 star
Quote
Your custom text, this could be the review from your customer or the message from your brand partner.
Author
Your custom text, this could be the customer's name or the brand partner's name.
Reveal banner
This section displays a banner that automatically hides or reveals its content based on the scroll behavior.
Section settings
The settings for the reveal banner section
Setting
Description
Image
The image for the section.
Image focal point
Choose the most important area of the image in view.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Make section full width
Makes the section the full width of the browser window.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Show text below image
Makes the text parts lie under the image instead of overlaying on mobile.
Section color settings
The color settings for the reveal banner section
Setting
Description
Text
Changes the color of the text box.
Overlay
Changes the color of the overlay.
Overlay opacity
Dims the banner images with an overlay. Use the slider to set the opacity of the overlay. The default is 30%.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the reveal banner section
Setting
Description
Heading
Add the primary text to pair with the section.
Heading size
The size of the heading text:
Small
Medium
Large
Subheading block
The settings for the subheading block in the reveal banner section
Setting
Description
Subheading
Add the secondary text to pair with the section.
Subheading size
The size of the subheading text:
Small
Medium
Large
Buttons block
The settings for the buttons block in the reveal banner section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Video button label
The text that displays on the video button.
Video URL
The YouTube or Vimeo link to the video. The video must be publicly available.
Video alt text
Describe the video to make it accessible for customers using screen readers.
Text slide block
The Text slide block will appear when customer scroll to bottom.
The settings for the text slide block in the reveal banner section
Setting
Description
Heading
The title of the block.
Heading size
The size of the heading text:
Small
Medium
Large
Description
Displays paragraph-style text in the text block.
Description size
The size of the description text:
Small
Medium
Large
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Text color
Changes the color of the text box.
Background color
Changes the color of the text box background.
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
The settings for the rich text section
Setting
Description
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Make section narrow
Makes its container narrow.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block in the rich text section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The Text block is a good way to share information about your brand with your customers. You can describe the benefits of your products, make announcements, welcome customers to your store, or talk about your brand values.
The settings for the text block in the rich text section
Setting
Description
Description
Paragraph-style text for the main content of the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block in the rich text section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
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.
Section settings
The settings for the Slideshow section
Setting
Description
Slideshow type
Determines the look of your slideshow:
Modern - A slider with smooth animation and the upcoming image sticks halfway out on the left.
Legacy - Classic slider with images and texts on.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Auto-rotate slides
Set the slideshow to play automatically.
Change slides every
Choose how often to change slides.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Section color settings
The color settings for the slideshow section
Setting
Description
Text
Changes the color of the text box.
Background
Changes the color of the background.
Overlay
In Legacy type, changes the color of the overlay on images. In Modern type, changes the color of the texting's container.
Overlay opacity
In Legacy type, dims the banner images with an overlay. In Modern type, dims the container of the texts.
Navigation buttons text
Changes the color of the arrow icons on the navigation.
Navigation buttons background
Changes the background color of the navigation.
Section padding settings
The padding settings for the slideshow section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Image slide block
You can have a maximum of 6 image slides in one section.
The settings for the Image slide block in the Slideshow section
Setting
Description
Image
The image that you want to display.
Mobile image
Optionally, you can set an image for mobile.
Image focal point
Choose the most important area of the image in view.
Desktop content position
Positions the content relative to the image on desktop :
Top Left - Positions the content to the top vertically and the left horizontally.
Top Center - Positions the content to the top vertically and the center horizontally.
Top Right - Positions the content to the top vertically and the right horizontally.
Middle Left - Positions the content to the middle vertically and the left horizontally.
Middle Center - Positions the content to the middle vertically and the center horizontally.
Middle Right - Positions the content to the middle vertically and the right horizontally.
Bottom Left - Positions the content to the bottom vertically and the left horizontally.
Bottom Center - Positions the content to the bottom vertically and the center horizontally.
Bottom Right - Positions the content to the bottom vertically and the right horizontally.
Subheading
Add the secondary text to pair with the image. This text appears above the heading text.
Subheading size
The size of the subheading text:
Small
Medium
Large
Heading
Add the primary text to pair with the image.
Heading size
The size of the heading text:
Small
Medium
Large
Description
Add the paragraph text to pair with the image. This text appears below the heading text.
Description size
The size of the description text:
Small
Medium
Large
Button label
The text that displays on the button. If you do not want to include a button in the section, then leave this field empty.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Tab collage
You can create a collage of videos, images, products, and collections in tab style. Each Tab collage section contains maximum 6 blocks.
Section settings
The settings for the tab collage section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Image focal point
Choose the most important area of the image in view.
Desktop layout
The layout for the section on desktop:
Image first - Displays the image on the left.
Image second - Displays the image on the right.
Desktop content position
Sets the vertical position of the content on desktop:
Top - Displays the content at the top.
Middle - Displays the content in the middle.
Bottom - Displays the text at the bottom.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the image when viewed on desktop:
Adapt to image - Keeps the image's original aspect ratio.
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Make section full width
Makes the section the full width of the browser window.
Mobile layout
The layout for the section on desktop:
Image first - Displays the image at the top.
Image second - Displays the image at the bottom.
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the image when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Section color settings
The color settings for the tab collage section
Setting
Description
Text
Changes the color of the text box.
Background
Changes the color of the text box background.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Video block
The settings for the video block in the tab collage section
Setting
Description
Cover image
The image that displays before a customer plays the video.
URL
The YouTube or Vimeo link to the video. The video must be publicly available.
Heading
The title of the column.
Description
The description of the column.
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Product block
The settings for the product block in the tab collage section
Setting
Description
Product
The product that you want to display.
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Collection block
The settings for the collection block in the tab collage section
Setting
Description
Collection
The collection that you want to display.
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Image block
The settings for the image block in the tab collage section
Setting
Description
Image
The image that you want to display.
Heading
The title of the column.
Description
The description of the column.
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
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.
Section settings
The settings for the testimonials section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Auto-rotate testimonials
Set the testimonials to play automatically.
Change testimonials every
Choose how often to change testimonials.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Testimonial block
Use the this block to create separate sections of questions.
The settings for the testimonial block in the testimonials section
Setting
Description
Icon
Choose a pre-made icon that displays right above the testimonial text. The None option will disable the icon.
None
Quote
5 stars
4 stars
3 stars
2 stars
1 star
Testimonial
Your custom text, this could be the review from your customer.
Author's image
This could be your customer's image to make the testimonial more trustworthy.
Author
Your custom text, this could be the customer's name.
Video
You can add a video section to embed a video from YouTube or Vimeo on a page in your store.
Section settings
The settings for the video section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Cover image
The image that displays before a customer plays the video.
URL
The YouTube or Vimeo link to the video. The video must be publicly available.
Video alt text
Describe the video to make it accessible for customers using screen readers.
Make section full width
Makes the section the full width of the browser window.
Section padding settings
The padding settings for the section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Popup
Displays onsite messages in popup to ask your visitors/clients to perform an email subscription.
The section comes with 6 blocks:
Heading
Subheading
Text
Button
Social media icons
Newsletter
Floating bar
Section settings
The settings for the popup section
Setting
Description
Display mode
Choose the mode that suits your demand:
Enable - The popup is working and accommodating all settings.
Disable - Turns the popup off.
Test mode - The popup always displays despite the relevant settings or is dismissed so that you can review it all the time. It's ideal for testing.
Show on home page only
Displays the popup on the home page only.
Show only for visitors
Displays the popup to visitors only. It is hidden to registered users.
Delay
The delay time in seconds for the popup to appear.
Frequency
Number of days before a dismissed popup reappears.
Popup width
The width in pixels of the popup.
Content padding
The thickness in pixels of the inner space of the popup.
Content alignment
Sets the alignment of the content:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Image
The image for the popup. In order to meet Google's interstitial guidelines for improved SEO, the image does not appear on mobile.
Desktop position
The position of the image against the popup content:
Top - Image is above the popup content.
Left - Image is on the left of the popup content.
Right - Image is on the right of the popup content.
Bottom - Image is below the popup content.
Color: Text
Changes the color of the texts.
Color: Borders
Changes the color of the borders, including the button borders and the underlines.
Color: Background
Changes the color of the popup background.
Heading block
The settings for the heading block in the popup section
Setting
Description
Heading
The title of the section
Heading size
The size of the heading text:
Small
Medium
Large
Subheading block
The settings for the subheading block in the popup section
Setting
Description
Subheading
The title of the section
Subheading size
The size of the subheading text:
Small
Medium
Large
Text block
The settings for the text block in the popup section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block in the popup section
Setting
Description
Button label
The text that displays on the button. Leave the label blank to hide the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
Social media icons block
Displays icons for any social media platforms that you've entered a profile link for in your theme settings. It has no adjustable settings.
Newsletter block
The newsletter block displays a field where a customer can enter an email address to sign up for your marketing.
The settings for the newsletter block in the popup section
Setting
Description
Description
Displays paragraph-style text in the section.
Use outline button style
Uses outline style for the button.
Make button full width
Expands the button across the popup's width instead of placing it next to the text box.
Floating bar block
The floating bar block displays a sticky vertical bar on the left or the right of the screen that allows your shoppers to open the popup by clicking on the bar.
The settings for the toolbar block in the popup section
Setting
Description
Heading
The heading of the bar. It is clickable to open the popup.
Show social media icons
Includes icons for any social media platforms that you've entered a profile link for in your theme settings.
Content position
Sets the position of the toolbar:
Left - Displays the toolbar on the left side.
Right - Displays the toolbar on the right side.
Color
Changes the color of the heading and social media icons.
Disable on mobile
Makes the toolbar appear on desktop only.
Recently viewed products
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
The settings for the Recently viewed products section
Setting
Description
Heading
The title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Mobile layout settings
The mobile layout settings for the Recently viewed products section
Setting
Description
Enable swipe on mobile
Changes the mobile display to one row only, where customers can swipe sideways to see more products.
Display one column on mobile
Changes the mobile display to one product per row.
Product card settings
The product card settings for the Recently viewed products section
Setting
Description
Image ratio
The image ratio for the product images:
Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
Square - Crops the images to use a 1:1 ratio.
Portrait - Crops the images to use a 2:3 ratio.
Landscape - Crops the images to use a 3:2 ratio.
Wide - Crops the images to use a 16:9 ratio.
Image focal point
Choose the most important area of the image in view.
Show second image on hover
When the customer hovers their cursor over the product image, displays the second product image if the product has one.
Show quick add to cart button
When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.
Show vendor
Displays the vendors of the products.
Show product rating
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.
Enable quick view
Adds a button that opens a popup displaying all the essential product details.
Enable color swatches
Displays swatches allows you to quickly select a color.
Section padding settings
The padding settings for the Recently viewed products section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Video hero
Displays a large banner consists a video in background and a text box with buttons.
Section settings
The settings for the Video hero section
Setting
Description
URL
The YouTube or Vimeo link to the video. The video must be publicly available. You can also put the direct link to your MP4 video file.
Desktop content position
Positions the content relative to the image banner:
Top Left - Positions the content to the top vertically and the left horizontally.
Top Center - Positions the content to the top vertically and the center horizontally.
Top Right - Positions the content to the top vertically and the right horizontally.
Middle Left - Positions the content to the middle vertically and the left horizontally.
Middle Center - Positions the content to the middle vertically and the center horizontally.
Middle Right - Positions the content to the middle vertically and the right horizontally.
Bottom Left - Positions the content to the bottom vertically and the left horizontally.
Bottom Center - Positions the content to the bottom vertically and the center horizontally.
Bottom Right - Positions the content to the bottom vertically and the right horizontally.
Desktop content alignment
Sets the alignment of the content on desktop:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Desktop height
Determines the height of the video when viewed on desktop:
450px - 450 px.
550px - 550 px.
650px - 650 px.
750px - 750 px.
Full screen - Extends the image to be the height of the browser window.
Show container on desktop
On desktop, shrinks the video overlay to be the container for the text content for more readability.
Make section full width
Makes the section the full width of the browser window.
Mobile layout settings
The mobile layout settings for the Video hero section
Setting
Description
Mobile content alignment
Sets the alignment of the content on mobile:
Left - Aligns the content to the left.
Center - Aligns the content to the center.
Right - Aligns the content to the right.
Mobile height
Determines the height of the video when viewed on mobile:
Auto - The browser will decide based on the desktop value.
250px - 250 px.
300px - 300 px.
400px - 400 px.
500px - 500 px.
Full screen - Extends the image to be the height of the browser window.
Show text below images
The text displays below the video, instead of lying on.
Section color settings
The color settings for the Video hero section
Setting
Description
Text
Changes the color of the text box.
Overlay
Changes the color of the overlay.
Overlay opacity
Sets the opacity of the overlay.
Section padding settings
The padding settings for the Video hero section
Setting
Description
Top padding
Determines the height of the top inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0 px to 100 px, increasing arithmetically of 4 px.
Heading block
The settings for the heading block of the Video hero section
Setting
Description
Heading
Large text for the title of the section.
Heading size
The size of the heading text:
Small
Medium
Large
Text block
The settings for the text block of the Video hero section
Setting
Description
Description
Displays paragraph-style text in the section.
Description size
The size of the description text:
Small
Medium
Large
Enable secondary color
Applies a little bit lighter color based on the text color.
Button block
The settings for the button block of the Video hero section
Setting
Description
Button label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Use underline button style
Uses the underline style for the button.
You can disable product recommendations by clicking the eye symbol. Disabling product recommendations hides the section from your product listing, but doesn't delete it.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours 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
