A Mix & Match bundle can be created, allowing customers to purchase a selection of different products together at the total price of all products or at a discounted price applied to the total price of all products. When you set up a Mix & Match bundle, our app will automatically create a new product in your Shopify store. As a result, the process of creating this bundle is similar to creating a regular product in Shopify.
You can also add steps and groups to the bundle based on your requirements. So that you can group your products based on it type while showcasing them as a bundle, and the step layout will give it a feel of going through a process. Example: refer to the image below.
Once the parent product setup and size setup have been completed, you can follow the guidelines below to set up a bundle with multiple steps and groups.
Step 1: Setting Up Your First Step
When you select Multi-step / collection (”Marked: 1”), Step 1 is created for you automatically with one product list inside it.
- Enter the Step title (”Marked: 1”) - Give the step a name that tells customers what to choose, for example Essentials. This title is displayed on the storefront.
- Enter the Product list title (”Marked: 2”) - Inside Product list 1, add a title for this group of products, for example Best sellers.
- Add products or collections - Click + Products (”Marked: 1”) to pick individual products, or + Collections (”Marked: 2”) to add all products from one or more collections to this product list.
- Add more product lists (optional) - Click + Add Product list to create another group within the same step, for example New arrivals. Repeat steps 2 and 3 for each new product list.
Step 2: Adding More Steps
Click + Add Step (”Marked: 1”) at the bottom of the section to add the next step. Each new step works the same way: give it a title, then add one or more product lists with products or collections.
You can manage steps and product lists using the controls on the right side of each header:
- Drag handle (”Marked: 1”) - Drag a step or a product list to change its order. Customers will see steps in the order shown here.
- Settings (”Marked: 2”) - Opens the condition settings for that step or product list.
- Translate (”Marked: 3”) - Add translations for the step or product list title in the other languages available in your store.
- Collapse (”Marked: 4”) - Collapse or expand the step or product list to keep the editor tidy while you work.
- Delete(“Marked: 5”) - It allows us to delete the step or product list if not needed.
Step 3: Adding Conditions to a Step or a List
Conditions control how many items customers can choose from a particular step or list.
- To add a condition to a step (”Marked: 1”), click the ⚙️ Settings icon on that step.
- To add a condition to a product list (”Marked: 2”), click the ⚙️ Settings icon on that list.
Condition Popup
- You will see a separate section for each bundle size you created (for example, For a bundle of 3, For a bundle of 5, For a bundle of 7). This lets you set different rules for different pack sizes.
- In Customers choose, select the condition type from the dropdown.
- Enter the quantity in the number field next to it.
- Click Save.
To remove all conditions and start over, click Clear condition.
Understanding the condition types
Condition | What it means | Example |
Any number | No restriction. Customers can add any number of items from this step or list. | Customers can pick 0, 1, 2 or more items. |
Exactly | Customers must add only the specified quantity, no more and no less. | Exactly 2 → customers must pick 2 items. |
Between | Customers can add any quantity within a range. Enter the minimum and maximum values. | Between 1 and 3 → customers can pick 1, 2 or 3 items. |
Up to | Sets the maximum quantity. Customers can add this many items or fewer. | Up to 2 → customers can pick 0, 1 or 2 items. |
At least | Sets the minimum quantity. Customers must add at least this many items. | At least 1 → customers must pick 1 or more items. |
If you don't add a condition, the step or list uses Any number by default.
Step 4: Configuring Additional Settings (Optional)
- Track child product inventory (Marked “1” in the above image)
- When this option is enabled, the app will display only the child products and variants that are in stock in Shopify. Any out-of-stock items will appear as “Sold out” in the bundle, preventing customers from selecting them.
- When this option is disabled, the app will ignore the inventory status of child products. However, if a customer tries to add an out-of-stock product to the bundle, Shopify will show an inventory error message.
This option should not be used if any of the child products have inventory tracking disabled in Shopify or if the “Continue selling when out of stock” setting is enabled.
- Display this bundle on child product pages (Marked “2” in the above image)
- This option is used to display a Related Bundle section on each child product’s page. This allows customers who visit a child product page to discover and purchase the entire bundle.
- After enabling this, you can manually position the Related Bundle block on the product page template in Shopify or you can also use a CSS selector to position it for you can contact our customer support.
Step 5: Configuring a Customized Heading for the Bundle (Optional)
In the Override Default Text section, you can provide a custom Heading specific to this bundle. If this is left blank, the default text will be displayed instead.
You can also add translations for these texts in the other languages available in your store.
Step 6: Adding the app block to the theme
After saving the offer by clicking the “Save” button, you’ll be prompted to position it within your store’s theme using the Theme Editor via the Test in store pop-up.
- In the pop-up, click Add app block.
- You’ll be redirected in a new tab to the default product page template in the Theme Editor.
- The app will add the “Bundle builder widget” block automatically. You can drag and position the block to the desired position.
If you have enabled the “Display this bundle on child product pages” option, make sure to also add the “Related bundles widget” block to your product page template. To do this, click “Add block” in the theme editor, go to “Apps”, and select the block.
- Return to the previous tab and click Refresh in the pop-up.
- Finally, click “View in store” to see how the Mix & Match Bundle (Dynamic price) appears in your store’s respective product page.
- You can also choose the child products and add the bundle to cart to verify it’s functionality.
- If you would like to add the widget to your store’s Home page as well, please refer to this guide.
If your theme is not a Shopify 2.0 theme, you won’t be able to position the widget through the app block. In that case, you’ll need to position it manually using a CSS selector. Please contact our customer support for free setup assistance.