1. Show Badges : Displays product badges that help highlight important product statuses such
as
sale offers,
discounts, sold-out products, or other promotional labels. These badges improve product
visibility and draw customer attention to key product information.
2. Title : Displays the product title on the product page. This block helps customers quickly
identify
the product they are viewing and serves as the primary product heading.
3. Price : Displays the product price along with compare-at prices, discounts, and sale
pricing
when
applicable. This block ensures customers can clearly see product pricing information before
purchasing.
4. Separator : A horizontal line or separator element used to visually divide content
sections on the product page. This block helps organize the layout and improve readability by
creating distinct visual separation between different content blocks.
- Separator opacity : Separator opacity controls the transparency level of the separator,
allowing you to adjust its visibility and visual prominence on the product page.
- Separator color : Select the color of the separator line.
5. Variant Picker : Allows customers to select available product variants such as size,
color,
flavor,
material, or style. Variants can be displayed using buttons, dropdowns, or a mixed
layout depending on the selected settings.
- Options type – Controls how product variants are displayed.
- Dropdown – Displays all variant options as dropdown selectors.
- Button – Displays all variant options as clickable buttons/swatches.
- Mixed – Displays color options as swatches and all other options as dropdown
selectors.
- Variants style – Determines the layout of variant options.
- Stack – Displays variant options on separate lines.
- Inline – Displays variant options in a single row where space permits.
- Border radius – Adjusts the roundness of the variant picker container corners.
Read more
about adding color swatches using category metafields
6. Quantity Selector : Provides controls for customers to increase or decrease the quantity
of
the
product
before adding it to the cart. This makes it easy to purchase multiple units of the
same item.
7. Inventory : Displays the product's stock status and inventory availability. This block can
be
used
to inform customers about product availability and low-stock situations, helping create
urgency and improve purchasing decisions.
-
Inventory Threshold : Defines the stock quantity limit used to determine when inventory is
considered low. In this example, the threshold is set to 10.
-
Inventory Layout : Controls how inventory information is displayed. Available options are:
- Default: Shows inventory using the standard display format.
- Progress Bar : Displays stock levels visually using a progress bar.
-
In Stock Color : Sets the color used when inventory is above the threshold and available
in
stock. Current color :
#178D2B (green).
-
Out of Stock Color : Sets the color used when inventory reaches zero or is unavailable.
Current color :
#FF0000 (red).
-
Threshold Color : Sets the color used when inventory falls at or below the defined
threshold. Current color :
#3A5A40 (dark green).
8. Custom Content : Allows you to add custom content directly to the product page. This can
be used
to
display additional information, promotional messages, product highlights,
specifications, or any other relevant content.
9. Collapsible Tab : Displays content inside expandable and collapsible sections. This block
is
useful for
organizing information such as product descriptions, benefits, ingredients, care
instructions, FAQs, shipping information, return policies, or other detailed content
without overcrowding the page.
-
Title – Specifies the heading displayed for the collapsible tab. In this example, the title
is "Description".
-
Content – Contains the information shown when the tab is expanded. The rich text editor
allows formatting such as headings, bold text, italics, links, and lists.
-
Show Description – When enabled, the tab's description is displayed alongside or below the
title.
-
Enable Border Top – Adds a border line to the top of the collapsible tab for visual
separation.
-
Enable Border Bottom – Adds a border line to the bottom of the collapsible tab for visual
separation.
-
Keep Tab Open by Default – When enabled, the tab content is expanded and visible when the
page first loads.
-
Show Background in Content – Applies the secondary background color to the content area,
making it visually distinct from the surrounding page content.
10. Pickup Availability : Shows whether a product is available for local pickup at store
locations.
Customers can
view pickup availability and location details directly from the product page when local
pickup is enabled.
11. Size Chart : Displays a size chart that helps customers choose the correct product size.
The block supports custom icons, images, linked pages, sharing options, and product features to
provide additional product information.
- Title : Enter the title displayed for the Size Chart block.
- Select Icon : Upload a custom icon to display alongside the Size Chart title.
- Select Desktop Image : Upload an image to be displayed as the size chart on desktop
devices.
- Select Mobile Image : Upload a separate image for the size chart on mobile devices.
- Select Page : Choose a page containing size chart information to display instead of an
image.
- Link to a Product Option : Display the Size Chart only when the specified product option
is available.
- Product Option Name : Enter the product option name (case-sensitive) used to determine
when the Size Chart is displayed.
- Show Share Button : Display a share button, allowing customers to share the product.
- Add Product Feature : Display product features automatically from the Product Feature
metafield when available.
- Product Feature : Add custom product feature text to display within the block.
11. Add to Cart Button : Displays the Add to Cart button and dynamic checkout options. This
block
allows
customers to add products to their cart and proceed with the purchase process quickly
and efficiently.
- Show Dynamic Checkout Button : – When enabled, a dynamic checkout button (such as "Buy
Now") is displayed alongside the Add to Cart button, allowing customers to skip the cart and
proceed directly to checkout using their preferred payment method.
- Show gift card recipient form : – When enabled, displays a form for collecting gift card
recipient information.
12. Complementary Products : This block displays recommended products that can be purchased
together with the current product. The section appears on the product page as a product slider (for
example, "You Can Buy This With"), helping customers discover related items and encouraging
additional purchases.
- Heading : Customize the title displayed above the complementary products section.
- Number of products to load : Control how many complementary products are displayed in the
slider.
How to Configure Complementary Products:
- Open Shopify Admin.
- Go to Apps → Search & Discovery.
- Select the product for which you want to add recommendations.
- Locate the Complementary Products section.
- Add the products you want to recommend together.
- Save your changes.
- Return to the theme editor and ensure the Complementary Products block is enabled.
Once configured, the selected products will automatically appear in this section on the product
page.
13. Trust Badges : Displays trust-building icons or badges such as secure payment, fast
shipping,
quality
assurance, money-back guarantees, or other customer confidence indicators. These badges
help improve trust and conversion rates.
- Heading – Customize the title displayed above the trust badge section.
- Heading alignment – Adjust the horizontal alignment of the heading and icons.
14. Product Siblings : Allows you to connect related products, such as different colors,
styles,
or
versions
of the same item. Linked products can be displayed as color swatches or product image
swatches, enabling customers to switch between related products easily.
Follow the
link to to know more about
the Product Siblings setup
15.Vendor : Displays the product vendor, brand, manufacturer, or supplier name associated
with
the
product. This can be useful for stores that sell products from multiple brands or
vendors.
16.Size Chart : Displays a size guide or size chart to help customers choose the correct
product
size.
This feature is particularly useful for clothing, footwear, accessories, and other
size-dependent products.
- Title – Defines the text displayed for the size chart.
- Select icon – Choose an icon to display alongside the size chart title.
- Select desktop image – Upload or select the size chart image for desktop devices.
- Select mobile image – Upload or select the size chart image for mobile devices.
- Select page – Choose a Shopify page to display as the size chart content instead of
images.
- Link to a product option – Restricts the size chart to products containing a specific
option.
- Product option name – Enter the exact product option name (case-sensitive). If left
blank, the size chart will be displayed for all products.
17. SKU : Displays the product SKU (Stock Keeping Unit). The SKU helps identify specific
products
or variants and can be useful for inventory management and customer reference.
18. Description : Displays the product's main description content. This block provides
customers
with
detailed information about the product, including features, specifications, usage
details, and other important information entered in the product description field.
Marquee Strip Section
The Marquee Strip section displays continuously scrolling content to highlight
important messages, promotions, announcements, or brand highlights. It helps capture
customer attention and adds an engaging visual element to the storefront.
Available Settings:
-
Color Scheme:
Select the color scheme applied to the Marquee Strip section.
-
Section Width:
Choose between Container and Wide layouts for the section.
-
Scroll Speed:
Control the speed of the scrolling marquee content.
-
Scroll Direction:
Choose whether the content scrolls from right to left or left to right.
-
Pause on Hover:
Enable this option to pause the marquee animation when customers hover over it.
-
Tilt Effect:
Apply a tilted visual effect to the marquee strip for a unique appearance.
-
Inner Padding:
Adjust the spacing inside the marquee strip content area.
-
Text Color:
Set the color of the marquee text.
-
Desktop Spacing:
Configure the top and bottom spacing for desktop devices.
-
Mobile Spacing:
Configure the top and bottom spacing for mobile devices.
Available Blocks:
Image Block : Allows you to add icons, text, and images within the marquee strip
to create engaging promotional content.
-
Show Icon with Text:
Enable displaying an icon along with the text content.
-
Show Icon:
Display an icon image within the marquee item.
-
Icon:
Upload a custom icon image.
-
Show Text Stroke:
Enable an outlined text style effect.
-
Text:
Add the text content displayed in the marquee strip.
-
Font Style:
Choose between heading and body font styles for the text.
-
Font Size:
Select the text size displayed in the marquee item.
-
Image:
Upload an optional image to display within the marquee block.
-
Optional Link:
Add a link to make the marquee item clickable.
Media Showcase Slider Section
The Media Showcase Slider section allows you to display multiple media items in
a responsive slider layout. It is designed to showcase customer testimonials,
product highlights, brand stories, or promotional content with images, videos, and
optional product cards.
Available Settings:
-
Color Scheme:
Select the color scheme applied to the Media Showcase Slider section.
-
Section Border Radius:
Adjust the corner radius of the slider section for a rounded appearance.
-
Content Max. Width:
Set the maximum width of the section content.
-
Heading:
Add a heading displayed above the media slider.
-
Font Style:
Choose the font style for the section heading.
-
Font Size:
Adjust the heading text size.
-
Heading Alignment:
Align the heading to the left, center, or right.
-
Sub Heading:
Add supporting text below the main heading.
-
Enable Social Icon:
Display social icons within the section.
-
Button Text:
Add text for the call-to-action button.
-
Button Link:
Set the destination link for the button.
-
Button Style:
Select the button appearance style.
-
Media Size:
Choose how media items are displayed within the slider.
-
Show Product Card:
Enable product cards to be displayed along with media content.
-
Card Image Background Color:
Select the background color for product card images.
Slider Settings:
-
Slides Per View (Desktop):
Set the number of slides displayed at once on desktop devices.
-
Slides Per View (Tablet):
Set the number of slides displayed at once on tablet devices.
-
Space Between Slides:
Adjust the spacing between slider items.
-
Show Navigation Arrows:
Display navigation arrows for manually changing slides.
-
Show Pagination Dots:
Display pagination indicators below the slider.
-
Enable Infinite Loop:
Allow the slider to continuously loop through slides.
-
Enable Autoplay:
Automatically rotate slides without manual interaction.
-
Autoplay Delay:
Set the delay time between automatic slide changes.
-
Desktop Spacing:
Configure the top and bottom spacing for desktop devices.
-
Mobile Spacing:
Configure the top and bottom spacing for mobile devices.
Available Blocks:
Media Block : Allows you to add individual media content items to the slider.
Each block can contain media elements and optional product information.
-
Media:
Upload or select the media content displayed inside the slider item.
FAQ Showcase Section
The FAQ Showcase section displays frequently asked questions in an organized
and interactive layout. It helps customers quickly find answers to common queries
while improving store navigation and building trust through clear information.
Available Settings:
-
Color Scheme:
Select the color scheme applied to the FAQ Showcase section.
-
Section Border Radius:
Adjust the corner radius of the FAQ section container.
-
Heading:
Add a heading displayed above the FAQ items.
-
Font Style:
Choose the font style for the section heading.
-
Font Size:
Adjust the heading size.
-
Heading Alignment:
Set the heading alignment to left, center, or right.
-
Block Color:
Set the color applied to FAQ blocks.
-
Show First FAQ Active:
Automatically expand the first FAQ item when the section loads.
-
Show Star:
Display a star icon within the FAQ section.
-
Star Image:
Upload a custom star icon image.
-
Show Count Stroke:
Enable the count stroke style for FAQ item numbering.
-
Active Color:
Select the color applied to the active FAQ item.
-
Desktop Spacing:
Configure the top and bottom padding for desktop devices.
-
Mobile Spacing:
Configure the top and bottom padding for mobile devices.
Available Blocks:
FAQ Item : The FAQ Item block allows you to add individual questions and
answers along with optional images and product cards to provide detailed
information to customers.
-
Question:
Add the question text displayed in the FAQ item.
-
Font Size:
Select the question text size.
-
Title Font Style:
Choose the font style for the FAQ question title.
-
Answer:
Add the answer content displayed when the FAQ item is expanded.
-
Left Image:
Upload an optional image displayed alongside the FAQ content.
-
Product:
Select a product to display with the FAQ item.
-
Card Image Background Color:
Set the background color for the product card image.
Image Banner Section
The Image Banner section displays a large visual banner with customizable
content, image or video background, and overlay options. It is designed to create
impactful hero areas for promotions, brand messaging, and featured content.
Available Settings:
-
Color Scheme:
Select the color scheme applied to the Image Banner section.
-
Section Width:
Choose between Wide and Container layouts for the banner.
-
Section Border Radius:
Adjust the corner radius of the banner section.
-
Section Height:
Select the height of the banner section.
-
Overlay Color:
Choose an overlay color displayed over the image or video background.
-
Image:
Upload an image to use as the banner background.
-
Video:
Select a video to display as the banner background.
-
Content Max. Width:
Set the maximum width of the banner content area.
-
Content Position:
Choose the position of the content within the banner.
-
Content Alignment:
Align the banner content to the left, center, or right.
-
Desktop Spacing:
Configure the top and bottom padding for desktop devices.
-
Mobile Spacing:
Configure the top and bottom padding for mobile devices.
Available Blocks:
Heading Block : Allows you to add and customize the main heading displayed
within the banner content.
-
Heading:
Add the main heading text displayed in the banner.
-
Font Style:
Choose the font style for the heading.
-
Font Size:
Select the heading size.
Description Block : Allows you to add supporting text below the heading to
provide additional information.
-
Text:
Add descriptive content displayed below the heading.
Related Products Section
The Related Products section displays product recommendations on the product page
to help customers discover items similar or complementary to the product they are viewing.
This improves product discovery and encourages additional purchases.
Related products are powered by Shopify's Search & Discovery app. Shopify can
automatically generate recommendations based on product relevance, or merchants can
manually select and customize the products shown for each product page.
Available Settings
-
Color Scheme:
Select the color scheme applied to the Related Products section.
-
Section Border Radius:
Adjust the corner radius of the Related Products section.
-
Heading:
Customize the title displayed above the related products.
-
Font Style:
Choose the font style for the section heading.
-
Font Size:
Adjust the heading size displayed in the section.
-
Heading Alignment:
Set the heading alignment to left, center, or right.
-
Number of Products to Load:
Define the number of related products displayed in the section.
-
Number of Products Per Column:
Control the number of product cards displayed in each row on desktop devices.
-
Mobile Layout:
Configure the number of product columns displayed on mobile devices.
-
Image Aspect Ratio:
Select the aspect ratio for product images displayed in product cards.
-
Image Size:
Choose between Contain and Cover image display modes.
-
Card Background:
Enable or disable the background styling for product cards.
-
Show Vendor:
Display or hide the product vendor name on product cards.
-
Product Content Alignment:
Align product information such as title and price to the left, center, or right.
-
Product Title Text Transform:
Change the product title text appearance, such as displaying titles in uppercase.
-
Desktop Spacing:
Configure the top and bottom spacing for desktop devices.
-
Mobile Spacing:
Configure the top and bottom spacing for mobile devices.
How It Works
-
Related products are automatically generated by Shopify based on product data.
-
Merchants can override automatic recommendations using the Shopify Search & Discovery app.
-
Each product can have its own unique set of related products.
-
Any updates made in the Search & Discovery app are reflected automatically on the storefront.
Product Siblings Feature
The Product Siblings feature allows you to link related
products (such as different color variants) on the product
page. These linked products are displayed as swatches,
making it easy for customers to switch between sibling
products. Swatches can be shown as colors or product images,
and their shape can be customized globally.
Steps to Enable Product Siblings
Go to Admin Panel >> Content >> Metaobjects
Customization Options:
Featured Collection Section
The Featured Collection section displays products from a selected collection
in an attractive product grid or slider layout. It helps highlight specific
collections, promote featured products, and improve product discovery by allowing
customers to browse items directly from the homepage.
Available Settings:
-
Color Scheme:
Select the color scheme applied to the Featured Collection section.
-
Section Border Radius:
Adjust the corner radius of the section container.
-
Heading:
Customize the title displayed above the featured products.
-
Font Style:
Choose the font style for the section heading.
-
Font Size:
Adjust the heading size.
-
Description:
Add supporting text below the heading.
-
Max Width:
Set the maximum width of the heading and description content.
-
Heading Alignment:
Align the heading and description to the left, center, or right.
-
Select Collection:
Choose the collection from which products will be displayed.
-
Products to Show:
Set the number of products displayed in the section.
-
Columns Per Row:
Define the number of product cards displayed in each row on desktop.
-
Enable Slider:
Display products in a slider layout instead of a standard grid.
Product Card Settings:
-
Image Aspect Ratio:
Select the aspect ratio for product images.
-
Image Size:
Choose between Contain and Cover image display modes.
-
Show Secondary Image on Hover:
Display an alternate product image when hovering over a product card.
-
Card Background:
Enable background styling for product cards.
-
Show Vendor:
Display the product vendor name on product cards.
-
Enable Quick View:
Allow customers to preview product details quickly.
-
Product Content Alignment:
Align product information to the left, center, or right.
-
Product Title Text Transform:
Change the product title appearance, such as displaying titles in uppercase.
Button Settings:
-
Enable View All Button:
Display a button linking customers to the complete collection.
-
Button Style:
Select the appearance style of the view all button.
-
Enable Wide Button:
Expand the button width to fit the available content area.
Mobile Layout Settings:
-
Number of Columns:
Choose the number of product columns displayed on mobile devices.
Spacing Settings:
-
Desktop Spacing:
Configure the top and bottom padding for desktop devices.
-
Mobile Spacing:
Configure the top and bottom padding for mobile devices.
Social Media
Breeze’s Social Media feature allows you to connect your store with popular social platforms to increase engagement and brand visibility.