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" block, you will be able to choose up to 3 products for the block 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 block can be found in the "Buy Boxes" section of the page block library:
⚠ In order to use this new block, you need to update the Shopify Access Scopes by clicking the here link in the in-app notification banner:
This block 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 Block 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 block to your page, you will be prompted to add products that you want included in your new bundle. Click the "Add Product" button to get started:
Next, 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, clicking save, then clicking the "Add Product" button again 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 "Products" tab
Back on the "Products" tab of the block settings, your selected products will show. You can perform the following:
Use "Bulk Edit" mode to set the Discount or Delete products from the block (1)
Set the Discount for a particular product (2)
📝Only the "None" and "Compare at price" discount options can be set for the products featured in the block. Tier-based discounting can be applied using the "Discounts" section below.Choose which Product Variant(s) to use for a specific product (3)
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.
Click on the "More actions" button for each product to:
Set Discount & Quantity
Choose Variants
Change Product
Remove
Drag and drop the products into different positions if needed:
The "Product View" tab
In the "Product View" tab, you can choose which elements to include in all product card columns featured in the bundle. An interactive preview (1) is provided that updates dynamically based on the element options (2) you select/unselect. You can also set the "Add To Bundle" checkbox color (3):
The "Layout" tab
In the "Layout" tab, you can choose which elements to include for the entire Buy Box area of the Mix-and-Match Bundle block. An interactive preview for both Desktop and Mobile views is provided that updates dynamically based on the element options you select/unselect.
Once you're done configuring the Layout settings to your liking, click the "Save" button to save your settings and exit to the Builder to make additional edits if needed.
Working with Mix-and-Match Bundle block Elements in the Builder
All elements that you've included for the Mix-and-Match Bundle block from the "Layout" tab and for the product cards in the block from the "Product View" tab 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 left 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)
