Breeze Theme Documentation

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 allows you to customize the appearance and functionality of the search results page. You can control the number of products displayed, filters and sorting options, product card appearance, pagination, and section spacing.

Search Page Settings
The Search page can be customized directly from the Theme Editor. To access these settings:

• From your Shopify admin, go to Online Store → Themes.
• Click Customize on the Breeze theme.
• Open the Search template and select the Main search section.
• Configure the available settings according to your requirements.
• Click Save to apply the changes.

General Settings
The General Settings section includes options to control the search results display.

• Color Scheme — Select a predefined color scheme for the Search page.
• Show Title — Show or hide the title displayed at the top of the Search page.
• Number of Items per Page — Set the number of products displayed on each page of search results.

Filters & Sorting
Use these settings to control the filtering and sorting options available to customers.

• Show Filters — Show or hide product filters on the Search page.
• Enable Sorting — Allow customers to sort the search results.
• Show Items Count — Display the total number of search results.
• Enable Sticky Filters — Keep the filter controls visible while customers scroll through the search results.
• Keep Filters Open by Default — Keep the available filter options expanded by default.

Product Cards
Customize the appearance and behavior of product cards displayed in the search results.

• Image Aspect Ratio — Select the aspect ratio for product images.
• Apply Background Color to Cards — Enable a background color for the product cards.
• Card Background Color — Select the background color used for product cards.
• Apply Background Color to Product Info — Enable a separate background color for the product information area.
• Product Info Background Color — Select the background color for the product information area.
• Product Info Text Color — Set the color of the product information text.
• Card Border Radius — Adjust the corner radius of product cards.
• Show Secondary Image on Hover — Display the product's secondary image when hovering over a product card.
• Show Quick View Button — Show or hide the Quick View button on product cards.

Pagination
Customize the appearance and alignment of the pagination controls used for search results.

• Color Scheme — Select a predefined color scheme for the pagination controls.
• Pagination Alignment — Set the pagination alignment to Left, Center, or Right.

Section Spacing
Adjust the spacing around the Search page section independently for desktop and mobile devices.

• Desktop Top Spacing — Set the top spacing for desktop screens.
• Desktop Bottom Spacing — Set the bottom spacing for desktop screens.
• Mobile Top Spacing — Set the top spacing for mobile screens.
• Mobile Bottom Spacing — Set the bottom spacing for mobile screens.

Breeze's Collection Page consists of two major sections: Page Header and Collection. These sections work together to present collection information and provide customers with an organized product browsing experience.

Page Header

The Page Header section displays the collection or page heading at the top of the page. It provides customization options for the section appearance, heading content, width, border radius, and responsive spacing.

Available settings include:

• Color Scheme – Select the color palette for the page header.
• Section Width – Choose the width of the page header section.
• Add Side Spacing – Add spacing to the sides of the section.
• Apply Top Border Radius – Apply a border radius to the top corners of the section.
• Apply Bottom Border Radius – Apply a border radius to the bottom corners of the section.
• Heading – Enter a custom heading. Leave blank to display the template name.
• Heading Tag – Select the heading HTML tag, either H1 or H2.
• Desktop Section Spacing – Set the top and bottom spacing for desktop devices.
• Mobile Section Spacing – Set the top and bottom spacing for mobile devices.

Collection

The Collection section displays products from the current collection and provides customers with options to view collection information, filter and sort products, and navigate through the available products. It also includes customization options for product cards, Quick View, pagination, and responsive spacing.

Collection Title Settings include:

• Color Scheme – Select the color palette for the collection title area.
• Show Collection Title – Display or hide the collection title.
• Title / Collection Image Width – Set the width of the collection title and image area.
• Show Collection Image – Display or hide the collection image.

General Settings include:

• Color Scheme – Select the color palette for the main collection content.
• Number of Products Per Page – Set the number of products displayed on each page.

Filters & Sorting Settings include:

• Show Filters – Display or hide the product filtering options.
• Enable Sorting – Allow customers to sort products using the available sorting options.
• Show Products Count – Display the total number of products available in the collection.
• Enable Sticky Filters – Keep the filter controls visible while browsing the collection.
• Keep Filters Open by Default – Keep the filter options expanded when the collection page loads.

Product Card Settings include:

• Image Aspect Ratio – Select the aspect ratio for product images.
• Apply Background Color to Cards – Enable or disable the background color applied to product cards.
• Card Background Color – Select the background color for product cards.
• Apply Background Color to Product Info – Enable or disable a separate background color for the product information area.
• Product Info Background Color – Select the background color for the product information area.
• Product Info Text Color – Set the color of the product information text.
• Card Border Radius – Adjust the corner radius of product cards.
• Show Secondary Image on Hover – Display the secondary product image when hovering over a product card.
• Show Quick View Button – Enable or disable the Quick View button on product cards.
• Quick View Button Background – Select the background color of the Quick View button.
• Quick View Button Icon Color – Set the icon color of the Quick View button.

Pagination Settings include:

• Color Scheme – Select the color palette for the pagination.
• Pagination Alignment – Align the pagination to the left, center, or right.

Spacing Settings include:

• Desktop Section Spacing – Configure the top and bottom spacing for desktop devices.
• Mobile Section Spacing – Configure the top and bottom spacing for 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.

1. Badge : Displays product badges that highlight important product information such as sale offers, discounts, or other promotional labels. Badges help customers quickly identify key product statuses.

2. Title : Displays the product title on the product page, allowing customers to quickly identify the product they are viewing.

3. Price : Displays the product price along with compare-at pricing and sale pricing when applicable. This provides customers with clear pricing information before purchasing.

4. Vendor : Displays the vendor or brand name associated with the product. This can help customers identify the product manufacturer or brand.

5. SKU : Displays the product's Stock Keeping Unit (SKU), allowing customers to view the product's unique inventory reference when available.

6. Separator : Adds a horizontal separator between product content blocks to create visual separation and improve the overall organization of the product information.

7. Inventory : Displays the current inventory status of the product and can communicate stock availability or low-stock information to customers.

8. Short Description : Displays a brief product description that provides customers with key information about the product without requiring them to read the full product description.

9. Variant Picker : Allows customers to select available product variants such as size, color, material, or style before adding the product to the cart.

• Picker Type – Controls how product variants are displayed. Available options include:
  • Button – Displays variant options as selectable buttons.
  • Dropdown – Displays variant options inside dropdown selectors.
  • Mixed – Uses a combination of variant selection styles based on the product options.
• Show Selected Value – Displays the currently selected variant value alongside the corresponding product option.

10. Buy Buttons : Displays the quantity selector and Add to Cart button, allowing customers to select the desired quantity and add the product to their cart.

• Layout Style – Controls how the quantity selector and Add to Cart button are arranged.
  • Inline – Displays the quantity selector and Add to Cart button on the same line.
  • Stack – Displays the quantity selector and Add to Cart button in a stacked layout.
• Show Dynamic Checkout Button – Displays a dynamic checkout button that allows customers to proceed directly to checkout using an available accelerated payment method.
• Enable Gift Recipient Form – Displays a form that allows customers to enter recipient information when purchasing a gift.

11. Payment Icons : Displays available payment method icons on the product page, helping customers understand which payment methods are supported by the store.

12. Pickup Availability : Displays local pickup availability for the selected product and provides customers with information about available pickup locations.

13. Icon with Text : Displays an icon alongside custom text to highlight additional product information, services, or useful messages.

• Select Icon – Select an icon to display alongside the text.
• Text – Add the content that should be displayed with the selected icon. The text editor supports formatting and links.
• Text Alignment – Controls the alignment of the icon and text. Available options include Left, Center, and Right.

14. Collapsible Tab : Displays additional product information inside an expandable and collapsible content area. This is useful for organizing information such as descriptions, size and fit details, care instructions, shipping information, or other product-specific content.

• Tab Title – Defines the heading displayed for the collapsible tab.
• Tab Content – Add the information displayed when the tab is expanded. The rich text editor supports formatting and links.
• Show Product Description – Displays the product description within the collapsible tab.
• Keep Open by Default – Keeps the collapsible tab expanded when the product page initially loads.

15. Complementary Products : Displays recommended products alongside the current product, helping customers discover additional items that pair well with their selected product.

• Heading : Defines the heading displayed above the complementary products. This can be used to describe the relationship between the current product and the recommended products.
• Number of Products to Load : Controls the number of complementary products loaded and displayed in the product recommendation slider.
• Image Aspect Ratio : Controls the aspect ratio of product images displayed within the product cards. The available option shown is Square.
• Apply Background Color to Cards : Enables a background color for the complementary product cards.
• Card Background Color : Sets the background color applied to the product cards when the background color option is enabled.
• Apply Background Color to Product Info : Enables a separate background color for the product information area within each card.
• Card Border Radius : Adjusts the roundness of the corners of the complementary product cards.
• Show Secondary Image on Hover : Displays the product's secondary image when the customer hovers over a product card.
• Show Quick View Button : Displays a quick view button on the product card, allowing customers to view product details without leaving the current product page.
• Quick View Button Background Color : Sets the background color of the quick view button.
• Quick View Button Icon Color : Sets the color of the icon displayed inside the quick view button.

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.

Product Recommendations Section

The Product Recommendations section displays recommended products on the product page to help customers discover additional items based on the product they are viewing. This section helps improve product discovery and provides customers with more shopping options.

Product recommendations are powered by Shopify's product recommendation system and can display products that are relevant to the current product.

Available Settings

• Color Scheme: Select the color scheme applied to the Product Recommendations section.
• Heading: Customize the heading displayed above the recommended products.
• Number of Products to Load: Define the total number of recommended products loaded in the section.
• Number of Products Per Row: Control how many product cards are displayed in each row on desktop devices.
• Image Aspect Ratio: Select the aspect ratio used for product images displayed within the product cards.
• Apply Background Color to Cards: Enable or disable a background color for the product cards.
• Card Background Color: Select the background color applied to the product cards when the card background option is enabled.
• Apply Background Color to Product Info: Enable or disable a separate background color for the product information area within each card.
• Product Info Background Color: Select the background color applied to the product information area when the option is enabled.
• Product Info Text Color: Set the text color used for product information such as the product title and price.
• Card Border Radius: Adjust the roundness of the product card corners.
• Show Secondary Image on Hover: Display the product's secondary image when customers hover over a product card.
• Show Quick View Button: Display a quick view button on product cards, allowing customers to preview product information without leaving the current page.
• Quick View Button Background Color: Set the background color of the quick view button.
• Quick View Button Icon Color: Set the color of the icon displayed inside the quick view button.
• Mobile Layout: Choose the number of product columns displayed on mobile devices. The available options are One and Two.
• Desktop Section Spacing: Configure the top and bottom spacing of the Product Recommendations section on desktop devices.
• Mobile Section Spacing: Configure the top and bottom spacing of the Product Recommendations section on 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, contact details, localization options, and payment methods. It includes customizable section settings and content blocks, allowing you to create a structured footer that matches your store's branding and supports easy navigation.

1. Customize the footer appearance using settings such as color scheme, border radius, logo, social media icons, policy links, payment icons, localization options, and spacing.
2. Configure the newsletter area with a logo, heading, newsletter form, additional text, and Follow on Shop option.
3. Add and manage Menu and Text blocks to organize navigation links, contact information, descriptions, or other custom footer content.

The Blog section displays your blog articles in a structured layout, allowing customers to browse your latest posts, updates, stories, and other published content.

The section provides settings to control the blog appearance and article information, including the color scheme, title visibility, article image border radius, number of articles displayed per page, and the number of content lines shown for each article.

You can also choose whether to display article tags, dates, and author information. Pagination has separate color scheme and alignment settings, while desktop and mobile section spacing can be adjusted independently using the top and bottom spacing controls.

The Blog Post template displays individual blog articles in a structured layout, allowing customers to read your published content and explore article details.

The template provides settings to control the article appearance, including the color scheme, title visibility, featured image border radius, and the number of content lines displayed for article listings.

You can also choose whether to display article tags, publication date, and author information. Pagination includes separate color scheme and alignment controls, while desktop and mobile section spacing can be adjusted independently using the top and bottom spacing settings.

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:

Announcement bar, Header & Slideshow section

Collection tabs section

Video collections

Text with floating images

Shop the look

Collection list

Featured product

Offer section

Countdown timer

Image with text

Image hotspot

Build a bundle

Testimonials

Featured blog

Image gallery

The Slideshow section allows you to showcase multiple promotional banners with images, videos, and customizable content. It includes various customization options such as color scheme, section width, side spacing, number of visible slides, image height, border radius, and desktop and mobile section spacing. You can display one or two slides simultaneously and adjust the layout to create an engaging visual experience for your store.

Slide (Block)

The Slide block contains the individual content displayed within the Slideshow section. You can upload an image or video, adjust the image overlay, and add a subheading, heading, and description text. It also allows you to configure a button with a custom label and link, enable or disable the content container, and customize its background color and content position to match your store's design.

The Video Collections section allows you to showcase multiple collections using background videos, creating an engaging and visually appealing shopping experience. It includes customization options such as color scheme, section width, side spacing, slide duration for slides without videos, and product card settings. You can show or hide products, control product visibility on mobile, adjust card width and image aspect ratio, and customize card border radius, background color, and text color to match your store's design.

Collection (Block)

The Collection block allows you to add individual collections to the Video Collections section. You can select a collection, customize its displayed title, and upload a video to represent the collection. Each collection block provides its own video content, allowing you to create a dynamic collection showcase where customers can explore different categories through video backgrounds and featured products.

The Collection Tabs section allows you to display products from multiple collections in separate tabs, making it easier for customers to explore different product categories within a single section. It includes customization options such as color scheme, View All button visibility and style, product image aspect ratio, card background color, product information background and text colors, card border radius, secondary image on hover, and quick view button settings. These options help you customize the appearance and functionality of product cards according to your store's design.

Collection (Block)

The Collection block allows you to add individual collections as tabs within the Collection Tabs section. You can select a collection from your store and optionally customize its title to control the label displayed for that tab. Multiple collection blocks can be added to showcase different product categories and allow customers to switch between them easily.

The Text with Floating Images section allows you to create an engaging content layout by combining central text and call-to-action content with multiple floating images arranged around it. It includes customization options such as color scheme, image border radius, subheading, heading, heading font style, description text, and button label and link. This section is ideal for showcasing your brand story, introducing your store, or highlighting important messages through a visually appealing combination of text and imagery.

Floating Image (Block)

The Floating Image block allows you to add individual images around the central content of the section. You can select an image for each block and add multiple floating images to create a layered visual arrangement. These images help enhance the overall presentation and bring more visual interest to your brand story or promotional content.

The Shop the Look section allows you to showcase coordinated product collections and help customers explore complete outfits or styled combinations. It includes customization options such as color scheme, subheading, heading, heading alignment, and separate heading and collection selection for top and bottom categories. You can also customize product card appearance, including image aspect ratio, card background color, product information background, card border radius, secondary image on hover, and select button colors. Additionally, desktop and mobile spacing controls allow you to adjust the section layout according to your store's design.

The Shop the Look section displays products from the selected top and bottom collections in separate categories. Customers can select individual products to build their look, view selected items with their details, and add the complete combination to the cart using the provided call-to-action button. This creates an interactive shopping experience that makes discovering and purchasing coordinated products easier.

The Sticky Image with Text section creates an engaging scroll-driven storytelling experience by keeping the main heading pinned in the centre of the screen while images and their accompanying content slide into view. It includes customizable color schemes, scroll speed, image overlays, text positioning, heading and content settings, and button options to create a visually appealing and interactive storefront experience.

Block Slide (Block)

The Block Slide allows you to create individual slides within the Sticky Image with Text section. Each block includes customizable images, overlay settings, text positioning, headings, descriptive content, and buttons. You can add multiple blocks to create an engaging scroll-driven storytelling experience that showcases products, collections, or seasonal campaigns.

The Countdown Timer section creates an engaging promotional experience by displaying a countdown that shrinks and expands as customers scroll through the page. It supports video or image backgrounds, customizable overlays, scroll animation settings, and countdown configurations, including the end date, end time, visibility options, and an expired message. This section is ideal for highlighting flash sales, limited-time offers, product launches, and upcoming promotions.

Countdown Content (Block)

The Countdown Content block allows you to add supporting content to the countdown section, including a heading, subheading, image, descriptive text, and a call-to-action button. Use these settings to highlight a promotion, communicate an offer, and direct customers to a relevant product or collection.

The Testimonials section showcases customer feedback and product experiences in an engaging, visually appealing layout. It includes customizable headings, highlighted text, scrolling testimonial cards, card styling, and a drawer that displays additional testimonial details and associated products. This section helps build customer trust by highlighting authentic experiences and showcasing products loved by your customers.

Testimonial (Block)

Each Testimonial block allows you to add an individual customer review with an image or video, a written quote, the customer's name, associated products, and a star rating. Multiple blocks can be added to showcase different customer experiences and provide shoppers with helpful product insights.

The Image Hotspot section creates an interactive shopping experience by displaying product hotspots over featured images. Customers can explore highlighted products and open them in the quick add drawer. The section includes customizable headings, text, image styling, overlays, hotspot colors, and image positioning to create an engaging and visually appealing storefront.

The Image Hotspot section provides two types of image blocks: Left Image and Right Image. Both blocks allow you to upload images, position interactive product hotspots, and assign products that customers can explore through the quick add drawer. Choose the appropriate block to display the image on the desired side of the section.

The Featured Blog section showcases selected blog articles in a visually engaging layout, helping customers discover news, stories, styling tips, and helpful content. It includes customizable headings, highlighted text, descriptions, blog selection, article image styling, and display options for tags, publication dates, and authors. You can also add a call-to-action button to encourage visitors to explore your blog.

You can further customize the article cards by choosing whether to display tags, publication dates, and authors. You can also adjust the article image border radius, control the number of content lines displayed, and enable a Read Our Journal button with a customizable label and button style. These options help create an engaging and user-friendly blog browsing experience that matches your store's design.

The Image Gallery section showcases a collection of images in a visually engaging layout, making it ideal for displaying lifestyle photography, product images, and brand-related content. It includes customizable color schemes, headings, highlighted text, descriptions, a main image, and a call-to-action button to create an attractive gallery that complements your store's design.

Image (Block)

The Image block allows you to add individual images to the gallery. You can select an image, assign an optional link, and choose whether the link opens in a new tab. Multiple image blocks can be added to create a visually engaging gallery showcasing your products, collections, or brand imagery.