Boost Your Sales, Transform Your Store with Concept. Try free now

Sections available in Be Yours

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.

On this page

Announcement bar

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.

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.

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

  1. In your theme editor, click the title of the blog posts section.
  2. In the Blog section, click Change.
  3. Select the blog.
  4. 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

  1. From your theme editor, click the Collection block that you want to add a collection to.
  2. Click Select collection.
  3. 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.

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.
Custom Liquid Add custom Liquid or HTML code.
Collapsible tab

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.

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.

    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

    Chat on WhatsApp

    World-class support

    Benefit from our 5-Star customer service for a seamless shopping experience. No wait times, no hassle, just expert help.

    Free lifetime updates

    Your store will receive free & regular updates, compatible with industry standards & trends, for life.

    Design that sells anything

    It is easy to create an online store and start selling your products right away.

    Speed-tested and approved

    Meets Shopify’s performance standards, ensuring a faster shopping experience for your buyers.
    © 2024 RoarTheme - Premium Shopify Themes, Apps and Services. 
    Powered by Shopify