Overview
Product Bundling is an excellent merchandising strategy that helps merchants to increase average order value, decrease marketing and distribution costs, and reduce inventory waste.
With the new "Mix-and-Match Bundle" section, you will be able to choose up to 3 products for the section as well as set tiered discounts depending on how many products the customer adds from the bundle.
The buyer composes the bundle, by choosing a mix-and-match from the available products and associated variants!
The Mix-and-Match Bundle section can be found in the "Products" section of the page section library:
This section can also be added to via the Elements popup when adding a new element to a Column or Row:
⚠ In order to use this section, you need to update the Shopify Access Scopes by clicking the here link in the in-app notification banner:
This section uses the Shopify Bundles APIs. To use the Bundles APIs, a store must meet specific criteria. You can find the list of these requirements in the official Shopify documentation here.
The Mix-and-Match Bundle section is accessible to all stores, including those that cannot utilize the Bundle APIs. These stores have the option to use it on their pages, but please note that in such cases, items will not be bundled, and the associated discount will not be applied.
Adding a Mix-and-Match Bundle
After you add the Mix-and-Match Bundle section to your page, you will be prompted to add products that you want included in your new bundle.
Choose up to 3 products from the Select Product popup by clicking the radio switch next to each product you want included. Click the "Save" button:
📝 The same product can be selected more than once if desired, by selecting the product and clicking save. Then click on the settings button for the "Bundle Box" element (1) and select "+ Add New Item" button (2) to select the same product once again.
This is helpful for creating a bundle offer of the same product, but allowing the customer to mix-and-match the variants they want!
The "Bundle Box" settings
To access the "Bundle Box" settings, first click on element and then on the ✏️ button (1). The settings can also be accessed by clicking the "Bundle" breadcrumb link (2):
The settings will appear in the sidebar. The main 3 settings tabs for the Bundle Box element are:
Products
Bundle Discount options
Layout
In the Products tab you can:
Move product via drag n drop
Collapse/Expand product to access additional settings
Delete product
Change Product to a different one
Choose Variants
Add New Product (up to 3)
In the Bundle Discount options tab you set tier-based Discounts for the bundle, depending on how many products the customer adds. The discount amount you set will be applied to all products in the bundle dynamically based on how many product(s) from the bundle the buyer adds I.e. 0% if 1 product is added, 10% if 2 products are added and 20% if 3 products are added.
In the Layout tab you can choose the Vertical Alignment setting (Top / Middle / Bottom). You can also choose between two different Layout options for the Bundle Box:
Image carousel on the left of the products
Image carousel above the products
Working with Mix-and-Match Bundle section Elements in the Builder
All elements included for the Mix-and-Match Bundle section are editable within the builder. Element examples include: Text fields, images, buttons, variants, pricing, etc.
To edit any element, simply hover over it and click on it to open the editing options:
Element settings can be adjusted in the sidebar of the builder:
Live Example
In the live example below, the buyer is able to:
Pick and choose a specific variant from each product included in the bundle
Check/uncheck the "Add To Bundle" checkbox for each product
See how their selections influence the bundle price based on the tiered discounts configured for the bundle
Click the "Add To Cart" button once they've made their selection(s)
