Mix-and-Match Bundle [Zipify Pages]

Use the Mix-and-Match Bundle section to group products together and sell them as a bundle at a discount!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

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 "Buy Boxes" section of the page section library:

โš  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:

  1. Move product via drag n drop

  2. Collapse/Expand product to access additional settings

  3. Delete product

  4. Change Product to a different one

  5. Choose Variants

  6. 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)

Did this answer your question?