Breeze Theme Documentation

The Collection Filter helps customers quickly narrow down products within a collection by using available filter options. It provides a more convenient shopping experience by allowing customers to refine products based on attributes such as vendor, product type, availability, price, and other supported filters.

The Product Swatches feature in the Breeze theme transforms product options like colors into interactive visual swatches. Instead of relying on text-based selections, customers can easily view and choose options through intuitive, clickable samples.

Breeze’s Search page lets you control the number of products per page and the number of products per column.
You can also configure filters, filter layout, product card settings, quick view, and quick view position.

The Filter Layout setting on the search page allows you to adjust the product filter layout. You can set it to vertical or drawer.
Click on the Filter button to open filter drawer

Vertical filter layout

Breeze's Collection Page consists of three major sections: Banner With Breadcrumb, Collection Hub, and Collection. These sections work together to provide a complete shopping experience by helping customers navigate collections, browse categories, and discover products efficiently.

Banner With Breadcrumb

Banner With Breadcrumb section displays the collection title, breadcrumb navigation, and collection banner image. It helps visitors identify their current location within the store and creates an attractive introduction for the collection page.

Available settings include:

• Color Scheme Select the section color palette.
• Border Radius – Control the corner radius of the banner.
• Section Width – Choose between wide and container layouts.
• Image Position – Display the banner image on the left or right side.
• Heading – Customize the collection heading content.
• Current Breadcrumb Label – Define a custom breadcrumb title.
• Image – Upload a custom banner image.
• Content Background – Set the content area background color.
• Image Height – Adjust the banner image height.
• Desktop & Mobile Spacing – Configure top and bottom spacing.

Collection Hub

Collection Hub section allows merchants to showcase featured collections using custom collection cards. Customers can quickly navigate between popular product categories directly from the collection page.

Section settings include:

• Color Scheme – Choose the section color style.
• Section Border Radius Customize corner rounding.
• Heading – Add and style the section heading.
• Font Style – Select heading or body typography.
• Font Size – Control heading size.
• Heading Alignment – Align heading left, center, or right.
• Column Limit – Set the maximum number of collection items.
• Enable Slider – Display collection cards in a slider layout.
• Columns Per Row – Configure the number of items displayed per row.
• Desktop & Mobile Padding – Adjust spacing for all devices.

Collection Hub Block Settings include:

• Select Collection – Choose the collection to display.
• Custom Collection Image – Upload a custom image instead of the collection image.
• Custom Collection Title – Override the collection title with custom text.

Collection

Collection section displays products from the current collection and provides powerful filtering, sorting, and product card customization options to improve the shopping experience.

• Color Scheme – Select the collection section style.
• Section Border Radius – Configure section corner rounding.
• Show Heading – Enable or disable the collection heading.
• Show Collection Image – Display the collection banner image.
• Image Height – Set the collection image height.
• Image Opacity – Adjust collection image transparency.
• Number of Products Per Page – Control products shown per page.
• Number of Products Per Column – Define products displayed in each row.
• Pagination Type – Choose between default pagination and infinite scroll.

Filter & Sorting Settings include:

• Enable Sorting – Allow customers to sort products.
• Filter Layout – Choose between vertical sidebar and drawer layout.
• Keep Filter Tabs Open by Default – Expand filter groups automatically.
• Filter Block Border Radius – Customize filter panel appearance.

Product Card Settings include:

• Image Aspect Ratio – Configure product image proportions.
• Image Size – Choose contain or cover image display mode.
• Show Secondary Image on Hover – Display alternate product image on hover.
• Card Background – Enable product card background styling.
• Title Uppercase – Display product titles in uppercase.
• Show Vendor – Display vendor information.
• Show Quick View – Enable quick product preview.
• Product Content Alignment – Align product details left, center, or right.
• Mobile Columns – Control the number of products displayed on mobile devices.

Setting Up Product Filters

Product filtering is powered by Shopify's Search & Discovery app. Before filters appear on the collection page, they must be configured within Shopify.

1. From your Shopify Admin, go to Apps → Search & Discovery.
2. Open Filters and click Add Filters.
3. Select the filters you want to display, such as Availability, Price, Product Type, Vendor, Variant Options, or Metafields.
4. Save your changes.
5. Return to the theme editor and enable filtering in the Collection section settings.

Once configured, customers can use these filters on collection pages to quickly narrow down products and find relevant items.

Customers can browse products using advanced filtering and sorting options such as availability, price, size, color, category, and other Shopify-supported filters. Combined with sorting options like Best Selling, Featured, Price, and Newest, the Collection page helps shoppers quickly find the products they need.

The Breeze product page offers flexible settings for media, spacing, and color schemes, and provides a variety of blocks within section. These blocks include the variant picker, title, price, inventory status, quantity selector, add-to-cart buttons, collapsible content, and more. The product page also includes a Recently viewed section and Related products section.

• Color Scheme: Select the color scheme applied to the product section to match your store's branding and design.
• Section Border Radius: Adjust the corner roundness of the product section container for a softer or more modern appearance.
• Enable Sticky Add to Cart: Display a sticky add-to-cart bar while customers scroll through the product page, making it easier to purchase products at any time.
• Media Width: Choose the width of the product media area relative to the product information area.
• Media Columns: Configure whether product media is displayed in one or two columns for the desktop layout.
• Add Thumbnail: Enable thumbnail navigation below or beside the main product image, allowing customers to quickly browse product media.
• Media Border Radius: Customize the corner radius applied to product images and media items.
• Media Size: Select how product images are displayed within their containers: Contain keeps the entire image visible, while Cover fills the container area.
• Constrain Media: Restrict media dimensions to maintain a consistent image presentation across products.
• Enable Image Background: Add a background behind product images to improve visibility and presentation.
• Image Background Color: Choose the background color displayed behind product images when the image background option is enabled.
• Show Arrows (Mobile): Display navigation arrows on mobile devices for easier image browsing.
• Show Thumbnails (Mobile): Display product image thumbnails on mobile devices to help customers navigate product media.
• Desktop Spacing: Adjust the top and bottom spacing of the product section on desktop devices to create a balanced layout.

Product Page Blocks

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. 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:

1. Open Shopify Admin.
2. Go to Apps → Search & Discovery.
3. Select the product for which you want to add recommendations.
4. Locate the Complementary Products section.
5. Add the products you want to recommend together.
6. Save your changes.
7. 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.

19. Gift Wrap : Provides customers with an option to add gift wrapping to their order directly from the product page. This feature enhances the shopping experience by allowing products to be prepared for gifting before checkout.

Follow the link to to know more about the Gift Wrap setup

20. Share Buttons : Displays social sharing options that allow customers to share the product page through social media platforms or by copying the product link. This can help increase product visibility and customer engagement.

Gift Wrapping

The Gift Wrapping feature allows customers to add a special wrapping option directly from the product page. This enhances the shopping experience by offering a personalized touch for occasions.

Steps to Enable Gift Wrapping

Follow the steps below to enable the Gift Wrap option on the product page:

• Create Gift Wrap Product: Go to Shopify Admin >> Products >> Add Product.
• Add Product Details: Create a product named Gift Wrapping (URL handle: gift-wrapping) and set the price you want to charge for this service.
• Set Visibility: Make sure the product is not available in online store collections so it does not appear as a regular product.
• Save Product: Click Save to create the gift wrap product.
• Add Gift Wrap Block: Go to Online Store >> Themes >> Customize and open the Product Page.
• Insert Block: Add the block named Gift wrap in the product template as shown in the image below.
• Select Gift Wrap Product: Inside the Gift Wrap block settings, select the previously created Gift Wrapping product.
• Enable Feature: Once selected, the Gift Wrap checkbox will appear on the product page, allowing customers to add gift wrapping before adding the product to cart.

Recently Viewed Section

The Recently Viewed section automatically displays products that a customer has previously viewed while browsing your store. This feature requires no manual product selection, as the section dynamically updates based on each customer's browsing activity. By showcasing recently visited products, it helps customers quickly return to items they have shown interest in, improves product discovery, and creates a more personalized shopping experience.

Available Settings:

• Color Scheme: Select the color scheme used for the section to match your store's overall design.
• Heading: Customize the title displayed for the Recently Viewed section.
• Font Style: Choose the font style for the section heading.
• Font Size: Adjust the heading size to control its appearance and visibility.
• Heading Alignment: Set the heading alignment to left, center, or right.
• Number of Columns per Row: Control how many recently viewed products are displayed in each row on desktop devices.
• Image Aspect Ratio: Choose the aspect ratio for product images to maintain a consistent layout.
• Product Content Alignment: Adjust the alignment of product information such as titles, prices, and action buttons.
• Mobile Layout: Configure whether one or two product columns are displayed on mobile devices.
• Section Spacing: Customize the top and bottom padding to control the spacing around the section.

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: Choose the color style for the Related Products section.
• Heading: Set the title displayed above the related products.
• Number of Products to Load: Define how many recommended products will be displayed.
• Products Per Row: Control how many product cards appear in each row on desktop.
• Mobile Layout: Choose between one or two product columns on mobile devices.
• Show Vendor: Enable or disable the product vendor name on product cards.
• Image Aspect Ratio: Set how product images are displayed inside cards.
• Image Size: Choose between Contain or Cover image display mode.
• Product Content Alignment: Align product title, price, and content inside the card.
• Section Spacing: Adjust top and bottom spacing for desktop and 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.

The Footer is displayed across all pages of your Shopify store and provides customers with quick access to important information, navigation links, newsletter subscription, localization options, and payment methods. It includes customizable section settings as well as content blocks, allowing you to create a footer that matches your store's branding and enhances the shopping experience.

1. Customize the footer appearance using settings such as color scheme, border radius, newsletter, localization, payment icons, and spacing.
2. Configure the newsletter section with your logo, heading, subheading, and the Follow on Shop option.
3. Add and manage footer content using the available Brand Information and Menu blocks to create a well-organized footer layout.

A Blog is your brand’s storytelling powerhouse. a dynamic space on your website where you share exciting articles, helpful tips, behind-the-scenes stories, and the latest updates.

The blog article card includes a content position setting, allowing you to place the content either to the right or at the bottom of the image.

The blog page includes a Banner with Breadcrumb section at the top, followed by the Blog content section.

Blog post is a unique story you share with your audience, brought to life through an article template that shapes how your content appears on your site. This article template beautifully organizes every blog post page by showcasing:

1. The eye-catching title and publication date
2. A striking featured image or other media to draw readers in
3. An optional comments section for engaging with your readers

A powerful homepage grabs attention, builds trust, and guides shoppers effortlessly to what they’re looking for. It sets the tone, showcases your brand, and drives conversions. The homepage typically consists of the following sections:

Header & Banner with hotspot

Countdown section

Collection list

Featured collection

Video highlight marquee

Product showcase

Collection tabs

Marquee strip

Collection Showcase

Marquee strip

Media Showcase

FAQ Showcase

Featured blog

Image Gallery Collage

The Banner with Hotspot section allows you to display interactive banners with clickable hotspots to highlight featured products. The section includes various customization options such as color scheme, section border radius, section width, layout type, shadow effect, overlay color, banner height, and spacing controls. You can choose between grid or slider layouts, enable the first banner as active, and adjust desktop and mobile spacing to create a flexible banner experience.

Banner(Block)

The Banner block contains the individual banner content displayed within the Banner with Hotspot section. You can upload a banner image, add heading and subheading text, customize font style and size, and configure a button with a selected link. The block also provides content position and styling options to control the banner appearance according to your design requirements.

The Banner block also supports interactive hotspot settings, allowing you to highlight specific products on the banner image. You can enable the hotspot, select a product to display, customize the hotspot card background, product background color, and adjust the hotspot position using X and Y position controls.

The Countdown section is designed to showcase promotional offers with an attractive countdown timer. It includes customization options such as color scheme, section border radius, heading and subheading text with font style and size controls, end date configuration, countdown separator, and countdown stroke visibility. You can also add left and right images, customize the button text, link, and style, along with desktop and mobile spacing settings to create an engaging promotional section.

The Countdown section helps create urgency for special offers by displaying a timer along with promotional content, images, and a call-to-action button.

The Collection List section displays multiple collections in a structured layout, allowing users to browse different product groups easily. It includes customization options such as color scheme, section border radius, count stroke visibility, and desktop and mobile spacing controls. You can also add and manage collection content using blocks.

The Collection Item block is used to display individual collection content within the Collection List section. It includes settings to customize block color, add a left-side image, configure a button with link and style options, select collections for the right column, adjust collection font size and font style, and set hover color for collection items.

The Featured Collection section is designed to showcase selected products from a specific collection in an attractive layout. It includes customization options such as color scheme, section border radius, heading and description styling, collection selection, product display settings, product card appearance, button options, and desktop and mobile spacing controls.

The Featured Collection section allows you to highlight products from a selected collection with customizable content and layout settings. You can configure the heading, description, text alignment, number of products to display, columns per row, slider option, product image settings, card background, vendor visibility, quick view, product content alignment, product title style, and view all button options.

The Video Highlight Marquee section is designed to display scrolling highlighted content with video highlights. It includes customization options such as color scheme, section width, section border radius, title font size, title font style, icon display, and desktop and mobile spacing controls. You can also add and manage video content using blocks.

The Video Highlight Marquee block is used to add individual video highlights within the section. It includes settings to add a heading and upload a video to display in the marquee.

The Product Showcase section is designed to highlight featured products using an interactive showcase layout. It includes customization options such as color scheme, section border radius, border settings, thumbnail visibility, image border radius, and desktop and mobile spacing controls. You can also add and manage showcase content using blocks.

The Showcase Tab block allows you to create individual product showcase tabs with a tab heading and main image. It includes settings to customize product media background and add multiple product hotspots. Each hotspot can be linked with a product and positioned using horizontal and vertical position controls.

The Collection Tabs section displays products from multiple collections using clickable tabs, allowing customers to browse different product groups easily. It includes customization options such as color scheme, section border radius, section width, heading settings, typography controls, tab position, product display settings, product card styling, and desktop and mobile spacing options. You can also add and manage collection content using blocks.

The Collection block is used to add individual collections within the Collection Tabs section. It includes settings to display a tab heading, select collections, upload primary and secondary images, add image text, customize text colors, set image positions, and control the display of side images for creating a visually engaging collection layout.

The Marquee Strip section displays a continuously scrolling strip of images or icons, making it ideal for showcasing brand logos, featured icons, partners, or promotional content. It includes settings such as color scheme, section width, scroll speed, scroll direction, pause on hover, tilt effect, inner padding, text color, and desktop/mobile spacing, allowing you to customize the appearance and scrolling behavior to match your store's design.

The Marquee Strip section includes an Image block, where you can upload an image, optionally display it with accompanying text, enable or disable the icon display, and assign an optional link to make the image clickable.

The Collection Showcase section highlights multiple product collections in an engaging and visually appealing layout. It helps customers quickly browse featured collections and improves store navigation. The section includes settings such as color scheme, section border radius, content maximum width, heading, font style, font size, heading alignment, left and right decorative images, and desktop/mobile spacing, allowing you to customize the section to match your store's design.

The Collection Showcase section includes Collection Item blocks. Each block allows you to select a collection, customize the collection title font size and font style, upload a collection icon, choose the icon position, and upload a featured image for the collection. These options make it easy to create visually appealing collection cards that encourage customers to explore your products.

The Media Showcase section is designed to display engaging images and videos alongside featured products, creating an interactive shopping experience. It includes settings such as color scheme, section border radius, content maximum width, decorative images, heading, font style, font size, heading alignment, sub heading, social icon, social background color, social icon color, button text, button link, button style, media size, product card visibility, card image background color, and desktop/mobile spacing, allowing you to customize the section to match your store's branding.

The Media Showcase section includes Media blocks. Each block allows you to upload an image, add a video, and select a product to display alongside the media. These blocks work together to create an engaging visual gallery that helps customers discover and explore featured products.

The FAQ Showcase section helps you organize and display frequently asked questions in an attractive accordion layout, making it easy for customers to find answers. It includes settings such as color scheme, section border radius, heading, font style, font size, heading alignment, block color, first FAQ active state, star display, star image, count stroke, active color, and desktop/mobile spacing, allowing you to customize the appearance to match your store's branding.

The FAQ Showcase section includes FAQ Item blocks. Each block allows you to add a question and answer, customize the title font size and font style, upload a left image, select a featured product, and choose a card image background color. These blocks work together to provide helpful information while promoting related products.

The Featured Blog section showcases your latest or featured blog posts in a visually engaging layout, helping customers discover news, stories, and helpful articles. It includes settings such as color scheme, section border radius, heading, font style, font size, heading alignment, blog selection, number of posts, blogs per row, overlay opacity, overlay color, article display settings, image aspect ratio, and desktop/mobile spacing, allowing you to customize the section to suit your store's design.

You can further customize the article cards by enabling the first active card, choosing whether to display the excerpt, author, publication date, read more button, and view all button. You can also customize the button label, choose whether links open in a new tab, and select a button style to create an engaging and user-friendly blog browsing experience.

The Image Gallery Collage section displays a collection of images in a visually appealing collage layout, making it ideal for showcasing your brand, products, or lifestyle photography. It includes settings such as color scheme, section border radius, section width, heading, font style, font size, heading alignment, sub heading, content maximum width, button label, button link, button style, and desktop/mobile spacing, allowing you to create a unique and engaging gallery that complements your store's design.

The Image Gallery Collage section includes Image blocks. Each block allows you to upload an image that is displayed as part of the collage, helping you build an attractive gallery to showcase your products, collections, or brand imagery.