How to Create a Product Bundle That Changes Based on the Selected Variant

Learn how to configure an existing Shopify product so that each variant displays its own bundled products, selection dropdowns, pricing, and gift settings.
For example, one Shopify product may offer several bundle sizes through its variants:

• 1 Jar – 250g
• 2 Jars – 500g
• 4 Jars – 1000g

When shoppers switch between variants, the number of products they need to select—and the corresponding Bundle settings—change automatically.

Try the Live Demo
Open the demo product to see how the bundled product selections change when you switch between 1 Jar, 2 Jars, and 4 Jars.
View the Live Demo →

With uShopAid, you can apply a Product Bundle to an existing Shopify product and configure each product variant separately.
This allows shoppers to:

1. Select a bundle size;
2. See the corresponding variant image;
3. Choose the products included in that bundle;
4. Add the completed bundle to the cart.

This tutorial explains how to create this setup using an existing Shopify product and multiple product-selection dropdowns.

Before You Begin

Create the Shopify product that will be used to display the Bundle.
For this example, the product is:
Build Your Own Nuts Box
Create the following variants:

• 1 Jar – 250g
• 2 Jars – 500g
• 4 Jars – 1000g

We recommend assigning a matching image to each variant:

• 1 Jar – 250g: an image showing one jar;
• 2 Jars – 500g: an image showing two jars;
• 4 Jars – 1000g: an image showing four jars or a gift box containing four jars.

This helps ensure that the variant name, image, and required number of product selections remain consistent when shoppers switch between variants.

The price and inventory of the carrier variant do not control the Bundle. The actual Bundle price is configured in uShopAid, while availability is determined by the products and variants included in the Bundle.

Step 1: Create a Product Bundle

Open uShopAid and go to the Product Bundle page.
Create a new Bundle and select a Product Bundle template that supports multiple product dropdowns.
This template allows shoppers to select the products included in the Bundle through one or more dropdown menus.
[Insert screenshot: Selecting the Product Bundle template]

Step 2: Select an Existing Bundle Product

In the Select bundle type window, select:
Select existing bundle product
This option applies the Bundle to an existing Shopify product and its variants without creating another Shopify product.
The other available option is:
Create new bundle product
The difference between the two options is:

Step 3: Select the Existing Product and Its Variants

In the Select an existing bundle product window, search for the Shopify product that will display the Bundle.
Find:
Build Your Own Nuts Box
Expand the product and select the variants you want to configure:

• 1 Jar – 250g
• 2 Jars – 500g
• 4 Jars – 1000g

After selecting the variants, click Confirm.
[Insert screenshot: Selecting Build Your Own Nuts Box and its three variants]

These are the existing product and variants used to display and switch between Bundle configurations. They are not the nut products shoppers will ultimately select. The actual products included in the Bundle are added later under Bundled Products.

Step 4: Understand How Each Variant Is Configured Separately

After entering the Bundle setup page, the selected existing product appears in the Bundle applied to an existing product section on the right.
Use the variant dropdown to switch between:

• 1 Jar – 250g
• 2 Jars – 500g
• 4 Jars – 1000g

The settings shown under Products & Rules on the left correspond to the variant currently selected on the right.
For example:

• When 1 Jar – 250g is selected, you are configuring the one-jar Bundle;
• When 2 Jars – 500g is selected, you are configuring the two-jar Bundle;
• When 4 Jars – 1000g is selected, you are configuring the four-jar Bundle.

Each variant can have its own:

• Bundle pricing;
• Compare-at price;
• Free Gift;
• Bundle Assembly;
• Bundled Products;
• Dropdown Options Settings;
• Gift Message.

[Insert screenshot: Switching the active variant using the dropdown on the right]

Before changing any settings, confirm which variant is currently selected on the right. Otherwise, products, prices, or gift rules may be added to the wrong variant.

Step 5: Add Selectable Products for 1 Jar – 250g

First, select the following variant on the right:
1 Jar – 250g
Find Bundled Products and click:
+ Add Product
In the Select Products window, add the 250g nut products shoppers can choose from, such as:

• Roasted Cashews – 250g;
• Salted Almonds – 250g;
• Honey Peanuts – 250g;
• Pistachios – 250g.

You can use search or filters to find the required products. After making your selection, click Confirm.
These products and their variants are the actual items sold, recorded in the order, and deducted from inventory.
[Insert screenshot: Selecting the 250g nut products available in the Nuts Box]

Step 6: Select the Grouped Display Method

After confirming the selected products, the following question appears:
How would you like to display the selected products?
There are two options.

Grouped

Combine all products in one dropdown.
All selected products are combined into one dropdown, allowing shoppers to choose one item from the available options.
In this tutorial, shoppers need to choose one jar from several types of nuts, so select:
Grouped

Individual

Use a separate dropdown for each product.
Each selected product creates a separate dropdown.
This option is more suitable when the Bundle contains fixed products, but shoppers need to choose a variant for each one. For example:

• T-shirt: choose a size;
• Pants: choose a size;
• Hat: choose a color.

For this tutorial, select Grouped, and then click Confirm.
[Insert screenshot: Selecting the Grouped display method]

Step 7: Configure the Product Block for 1 Jar

After selecting Grouped, the system creates a Product 1 block.
This block generates one product-selection dropdown on the storefront.

Unit Quantity

Unit quantity determines how many units of the selected product are included in the Bundle.
In this example, each dropdown represents one 250g jar, so set it to:
1
If you set the Unit quantity to 2, the shopper still makes only one selection, but two units of the selected nut product are added to the Bundle.

Dropdown Title

Enter the title displayed above the dropdown.
For 1 Jar – 250g, you can use:
Choose your 250g jar
Or a shorter title:
Choose your nut jar

Set the Default Product

A star icon appears next to each product. A solid blue star indicates the default product for that dropdown.
The default product is displayed automatically when the shopper opens the product page. The shopper can still open the dropdown and select another product.

Manage the Available Products

Inside the Product block, you can also:

• Click a product title to open the corresponding Shopify product;
• Click the delete icon to remove an available product;
• Click Edit Product to change the products available in that dropdown;
• Click Remove to delete the entire Product block;
• Click Duplicate to copy the Product block and its settings.

[Insert screenshot: Configuring the Product block for 1 Jar]

After this step, the 1 Jar – 250g variant will display one nut-selection dropdown on the storefront.

Step 8: Configure Two Product Dropdowns for 2 Jars – 500g

Use the variant selector on the right to switch to:
2 Jars – 500g
Under Bundled Products, add the available 250g nut products and select Grouped, following the same process described above.
The system initially creates one Product block.
Configure the first block as follows:

• Unit quantity: 1
• Dropdown Title: Choose your first 250g jar

Next, click Duplicate to create a copy of the Product block.
Change the title of the second block to:
Choose your second 250g jar
The completed structure should be:

Step 9: Configure Four Product Dropdowns for 4 Jars – 1000g

Use the variant selector on the right to switch to:
4 Jars – 1000g
Add the available 250g nut products and select Grouped.
After configuring the first Product block, use Duplicate three times to create a total of four product-selection dropdowns.
We recommend using the following titles:

• Choose your first 250g jar
• Choose your second 250g jar
• Choose your third 250g jar
• Choose your fourth 250g jar

Set the Unit quantity of every Product block to 1.
The completed structure should be:

The number of Product blocks determines how many product dropdowns appear on the storefront. The total of all Unit quantity values determines how many actual items are included in one Bundle.

Step 10: Configure Different Products for Different Dropdowns

Multiple Product blocks within the same variant are independent.
Even when the blocks were created using Duplicate, you can edit each block separately, including its:

• Available products;
• Default product;
• Dropdown Title;
• Unit quantity.

For example, in the four-jar Bundle, you could configure:

• First dropdown: all nuts;
• Second dropdown: all nuts;
• Third dropdown: unsalted nuts only;
• Fourth dropdown: sweet-flavored nuts only.

Click Edit Product inside the relevant Product block to change the products available in that dropdown.
If shoppers should be able to choose any nut for every position, configure all Product blocks with the same range of available products.

Step 11: Configure the Bundle Price for Each Variant

Each existing product variant can have its own Bundle price.
First, select the variant you want to configure on the right, and then open:
Rules → Bundle pricing

The actual selling price is determined by Bundle pricing, not by the original Shopify price of the product variant used to display the Bundle.

Method 1: Calculate the Price from the Selected Products

Select:
Sync automatically based on the prices of the bundled products.
The Bundle price will be calculated from the products the shopper selects in the dropdowns.
For example, a shopper selects the following products in the two-jar Bundle:

• Roasted Cashews: $30;
• Pistachios: $36.

Without an additional discount, the Bundle price is:
$30 + $36 = $66
If the shopper selects nuts with different prices, the Bundle price changes accordingly.
When prices are synchronized automatically, you can also choose from several discount methods.

Percentage Off

Apply a percentage discount to the total price of the selected products.
For example:

• Product total: $60;
• Discount: 10% off;
• Bundle price: $54.

Amount Off

Subtract a fixed amount from the total Bundle price.
For example:

• Product total: $60;
• Discount: $5 off in total;
• Bundle price: $55.

The $5 is deducted once from the entire Bundle. It is not deducted separately from every jar.

Cheapest Item Discount

Apply a percentage discount to the lowest-priced item in the Bundle.
For example, the four selected jars cost:

• $25
• $28
• $30
• $35

If the cheapest item receives a 50% discount, the discount is applied to the $25 item.

Most Expensive Item Discount

Apply a percentage discount to the highest-priced item in the Bundle.
Using the example above, the discount would be applied to the $35 item.

No Discount

Do not apply an additional discount.
The Bundle price equals the total selling price of the products selected by the shopper.

Method 2: Set a Fixed Price Manually

Select:
Manually set, do not sync automatically.
Then enter the fixed Bundle price for the currently selected variant.
For example:

If the original prices of the available products vary significantly, confirm that the fixed price is appropriate for every possible combination.

Invoice Price Override—Optional

Invoice price override allows you to set the order price of selected Bundle child products to $0.
This setting is commonly used for:

• Free gifts;
• Gift box packaging;
• Additional accessories;
• Items that do not need to receive a separate price allocation.

For a standard nut combination, you can keep the default setting.
[Insert screenshot: Configuring Bundle pricing separately for each variant]

Step 12: Understand the Bundle Inventory Logic

Bundle availability and the actual quantity that can be sold are determined by the inventory of the products and variants included in the Bundle.
The inventory of the Shopify product variant used to display the Bundle does not determine the Bundle’s actual availability.
For example, 4 Jars – 1000g contains four product-selection positions. After the shopper selects the nuts for all four dropdowns, the system checks the inventory of those selected nut-product variants.
If the shopper selects the same product more than once, the system must confirm that the product has enough inventory to fulfill the total required quantity.
For example:

• A nut product has an inventory quantity of 2;
• The shopper selects that product in three dropdowns;
• The Bundle requires three units of that product.

Because only two units are available, the shopper cannot purchase the current combination normally.
If an available product variant is sold out, it will be displayed as sold out or unavailable according to the related Bundle settings.
When managing Bundle inventory, check:

• Whether inventory tracking is enabled for the bundled products;
• Whether the selected product variants have sufficient inventory;
• Whether selecting the same product multiple times exceeds its inventory;
• Whether sold-out products are displayed correctly in the dropdowns;
• Whether Free Gift products have sufficient inventory.

The carrier variant is used to display and switch between Bundle configurations. The products and variants included in the Bundle are the actual inventory units.

Step 13: Configure the Compare-at Price

Compare-at price displays the original crossed-out price for the Bundle.
Each product variant can have its own Compare-at price configuration.

Sync from the Selected Product Prices

Select:
Sync based on the prices of the bundled products.
The system uses the total selling price of the shopper’s selected products as the Bundle’s Compare-at price.

Sync from the Products’ Compare-at Prices

Select:
Sync based on the compare-at prices (if 0, use the price instead) of the bundled products.
The system prioritizes the Compare-at price of each bundled product. If a product does not have a Compare-at price, its current selling price is used instead.

Set the Compare-at Price Manually

Select:
Manually set, do not sync automatically.
Then enter the crossed-out price for the currently selected Bundle variant.
When the Compare-at price is set manually, it does not change when the shopper selects different nut products.
After the Bundle price and Compare-at price are configured correctly, the storefront can display:

• The current Bundle price;
• The crossed-out original price;
• A Sale badge;
• The Bundle’s savings.

[Insert screenshot: Configuring the Compare-at price]

Step 14: Configure Dropdown Options Settings

Expand Dropdown Options Settings to control the product information displayed in the dropdowns and the order of the available products.

Show in Dropdown

Choose which product information appears in the dropdown, such as:

• Product name;
• Product image;
• Other available product information.

We recommend displaying both the product image and name so shoppers can distinguish between different types of nuts more easily.

Sort By

Choose how products are sorted within the dropdown.
If you select Manual sorting, drag the sorting handle next to each product to arrange the products manually.
Consider placing your most popular or recommended nuts near the beginning of the list.

Hide Dropdown If Only One Option Is Available

When this setting is enabled, a dropdown is automatically hidden if only one product is available.
Because the shopper has no alternative selection, displaying the selection menu is unnecessary.
[Insert screenshot: Dropdown Options Settings]

Step 15: Configure a Gift Message—Optional

If the Nuts Box can be purchased as a gift, expand Gift Message and enable:
Enable gift message
This allows shoppers to enter information for the recipient.

Title

Enable Show title to display a title above the Gift Message fields.
For example:
Leave a short message to be sent with your nuts box

From

Enable:
Allow input of the sender's name
This allows shoppers to enter the sender’s name.
You can configure:

• Placeholder text;
• Whether the field is required.

To

Enable:
Allow input of the recipient's name
This allows shoppers to enter the recipient’s name.
You can also configure:

• Placeholder text;
• Whether the field is required.

Message

Enter placeholder text for the message field, such as:
Write a personal note (max 100 characters)
You can also:

• Enable a character limit;
• Set the maximum number of characters;
• Make the message required.

Dynamic Checkout Buttons Are Hidden When Gift Message Is Enabled

When Gift Message is enabled, dynamic checkout buttons such as Buy it now are automatically hidden.
Shoppers must use Add to cart so the sender’s name, recipient’s name, and message can be submitted with the Bundle.

Gift Message only collects information entered by the shopper. It does not add a physical gift product. To add an actual gift, configure it under Rules → Free Gift.

[Insert screenshot: Configuring Gift Message]

Step 16: Add a Free Gift—Optional

Go to:
Rules → Free Gift
Click Add free gift to add a physical gift product to the currently selected variant.
For example:

• Buy two jars and receive a free sample pack;
• Buy four jars and receive a free gift bag;
• Buy the largest Nuts Box and receive a selected product.

Different product variants can have different Free Gift settings.
For example:

• Gift Message: allows the shopper to enter gift information;
• Free Gift: adds an actual product to the Bundle.

Because a Free Gift is a real product included in the Bundle, its availability is also affected by the inventory of its product variant.
[Insert screenshot: Configuring a Free Gift]

Step 17: Adjust the Bundle Style

Expand Style to customize the appearance of the dropdowns, product images, Gift Message fields, and spacing within the Bundle Widget.

Settings under Style apply to every Bundle using the same template, not only the Bundle currently being edited. Before making changes, confirm whether other Bundles in your store use the same template.

Dropdown Title

Configure the title displayed above each dropdown:

• Font Color;
• Font Size;
• Font Style.

This controls titles such as Choose your first 250g jar. It does not control the name of the selected product inside the dropdown.

Dropdown

Name

Configure the product name shown inside the dropdown:

• Text color;
• Font size;
• Font style.

Image

Configure the product images displayed inside the dropdown:

• Image size;
• Image shape, such as Rounded.

Border

Configure the dropdown border:

• Border color;
• Border radius.

Name of Sold out Products

Configure the appearance of sold-out product names:

• Text color;
• Font size;
• Font style.

You can use a lighter gray color to help shoppers recognize products that are currently unavailable.

Gift Message

If Gift Message is enabled, you can configure:

• Text color;
• Font size;
• Font style;
• Input border color.

Spacing for Dropdown Title and Dropdown

Adjust the vertical spacing between the dropdown title and the dropdown itself.

Spacing for Dropdown and Product Info

Adjust the vertical spacing between the dropdown and the product information section.

Review the Preview

The Preview panel on the right shows an approximate preview of the Bundle.

Preview is intended as a setup reference. The actual storefront appearance may also be affected by your Shopify theme’s fonts, product-page width, and other theme styles.

[Insert screenshot: Complete Style settings and Preview]

Step 18: Save the Bundle

After configuring every variant, click Save in the upper-right corner.
Before saving, use the variant selector on the right to check each variant individually:

• 1 Jar – 250g contains one Product block;
• 2 Jars – 500g contains two Product blocks;
• 4 Jars – 1000g contains four Product blocks;
• Every Product block has a Unit quantity of 1;
• Every dropdown has the correct title;
• Every dropdown contains the correct available products;
• The correct default products are selected;
• Bundle pricing is configured for the correct variant;
• The Compare-at price is correct;
• Free Gift and Gift Message are configured for the intended variants.

Step 19: Check the Storefront Result

After saving, open the Shopify product page for:
Build Your Own Nuts Box

Select 1 Jar – 250g

The shopper should see:

• The variant name and image for 1 Jar – 250g;
• One nut-selection dropdown;
• The title Choose your 250g jar;
• The actual price configured for this Bundle variant.

After selecting a nut product, the shopper can add one 250g jar to the cart.
[Insert screenshot: Storefront result for 1 Jar – 250g]

Select 2 Jars – 500g

The shopper should see:

• The variant name and image for 2 Jars – 500g;
• Two nut-selection dropdowns;
• Choose your first 250g jar;
• Choose your second 250g jar;
• The actual price configured for this Bundle variant.

The shopper can select one nut product from each dropdown.
[Insert screenshot: Storefront result for 2 Jars – 500g]

Select 4 Jars – 1000g

The shopper should see:

• The variant name and image for 4 Jars – 1000g;
• Four nut-selection dropdowns;
• Selection titles for the first, second, third, and fourth jars;
• The actual price configured for this Bundle variant.

The shopper can select one nut product from each of the four dropdowns.
[Insert screenshot: Storefront result for 4 Jars – 1000g]

When shoppers switch between product variants, the product page displays the corresponding variant name and image. It also loads that variant’s:

• Number of Product blocks;
• Dropdown titles;
• Available products;
• Default products;
• Bundle pricing;
• Compare-at price;
• Free Gift;
• Gift Message.

Remember:

• The storefront price is determined by the selected variant’s Bundle pricing;
• Availability and inventory are determined by the products and variants included in the Bundle;
• The existing Shopify product variants are primarily used to display and switch between Bundle configurations.

Step 20: Check the Cart and Shopify Checkout

After completing the Bundle setup, test the full purchase flow to confirm that the selected products, Bundle price, and checkout details are correct.
In this example, the selected product variant is:
4 Jars – 1000g
The shopper selects four 250g jars:

• First jar: Sample Nuts #1 – 250g
• Second jar: Sample Nuts #7 – 250g
• Third jar: Sample Nuts #9 – 250g
• Fourth jar: Sample Nuts #3 – 250g

The product page displays four independent product dropdowns, allowing the shopper to choose each jar separately.
[Insert screenshot: Product-page result for 4 Jars – 1000g]

After selecting 4 Jars – 1000g, the shopper can choose four nut products through four separate dropdowns.

Check the Cart Result

After making all selections, click Add to cart.
In this example, the cart drawer displays the complete Bundle under the main product, Build Your Own Nuts Box, together with:

• Bundle variant: 4 Jars – 1000g;
• The selected product for the first jar;
• The selected product for the second jar;
• The selected product for the third jar;
• The selected product for the fourth jar;
• Bundle quantity;
• Bundle total price.

The Bundle total in this example is:
$142.00
[Insert screenshot: Bundle displayed in the cart drawer]

The cart displays the main Bundle product, selected variant, and the nut product chosen for each dropdown.
After adding the Bundle to the cart, check:

• Whether the main product name is correct;
• Whether the selected variant is 4 Jars – 1000g;
• Whether all four dropdown selections are displayed;
• Whether each selected product appears in the correct position;
• Whether the Bundle quantity is correct;
• Whether the total price matches the Bundle pricing configuration;
• Whether changing the Bundle quantity updates the price correctly;
• Whether deleting the Bundle removes all associated products together.

The exact cart layout is controlled by the current Shopify theme. Different themes may use a cart drawer, cart page, or another layout, but the selected Bundle products and price should remain correct.

Check the Shopify Checkout Result

From the cart, click Check out to enter Shopify Checkout.
The checkout page displays the main Bundle product. After expanding the item details, you can see the four actual products included in the Bundle:

• 1 × Sample Nuts #1 – 250g
• 1 × Sample Nuts #7 – 250g
• 1 × Sample Nuts #9 – 250g
• 1 × Sample Nuts #3 – 250g

The checkout total remains:
$142.00
[Insert screenshot: Bundle item details in Shopify Checkout]

Expand the Bundle details in Shopify Checkout to review the four included nut products and their quantities.
On the checkout page, check:

• Whether the main Bundle product is correct;
• Whether the selected main-product variant is correct;
• Whether all four Bundle child products are displayed;
• Whether each child-product variant is correct;
• Whether the quantity of each child product is 1;
• Whether the subtotal and total are correct;
• Whether the discount is applied correctly;
• Whether the Free Gift is displayed correctly;
• Whether product inventory is validated correctly.

What Happens If Only Some Variants Have a Bundle?

You do not need to configure a Bundle for every variant of an existing product.
For example, a product may contain these variants:

• Standard;
• Custom;
• Premium.

If you configure a Bundle only for Custom:

• Selecting Custom displays its Bundle product-selection area;
• Selecting Standard or Premium does not load the Bundle selection area;
• Variants without a Bundle can continue to be sold as regular Shopify product variants.

For regular variants without a Bundle:

• The selling price is determined by the variant price in Shopify;
• Inventory is determined by that Shopify variant’s own inventory.

For variants with a Bundle:

• The actual selling price is determined by uShopAid’s Bundle pricing;
• Inventory is determined by the products and variants included in the Bundle;
• The carrier variant is primarily used to display the corresponding name, image, and Bundle configuration.

This means one Shopify product can offer several purchasing methods:

• Some variants can be purchased as fixed products;
• Some variants can require shoppers to select the Bundle contents;
• Different Bundle variants can require shoppers to select different numbers of products.

Frequently Asked Questions

Why didn’t the storefront Bundle price change after I edited the carrier variant’s Shopify price?

After a Bundle is applied to the variant, its actual selling price is determined by the corresponding Bundle pricing configuration in uShopAid.
Switch to the relevant variant and check:
Rules → Bundle pricing

Why is the Bundle unavailable when the carrier variant has inventory?

Bundle availability is determined by the inventory of the actual products and variants included in the Bundle.
Check:

• Whether the bundled products have inventory;
• Whether any selected product variant is sold out;
• Whether the inventory is sufficient when the same product is selected multiple times;
• Whether the Free Gift has sufficient inventory.

Why doesn’t the number of dropdowns change when I switch variants?

Check whether:

• Each variant was configured separately using the variant selector on the right;
• The Bundle was saved after configuration;
• The current product variant is connected to the correct Bundle;
• Each variant contains the expected number of Product blocks.

What is the difference between the number of Product blocks and Unit Quantity?

• The number of Product blocks determines how many product dropdowns appear on the storefront;
• Unit quantity determines how many units of the selected product are added through that dropdown.

For example:

• Two Product blocks;
• Each Product block has a Unit quantity of 1.

The completed Bundle contains two items.
If there is only one Product block with a Unit quantity of 2, the shopper sees only one dropdown, but two units of the selected product are added.

Can I configure a Bundle for only one product variant?

Yes.
A variant with a Bundle displays the Bundle product-selection area. Variants without a Bundle can continue to be sold as regular Shopify products.

Final Checklist

Before publishing the Bundle, check:

• The correct existing Shopify product and variants were selected;
• Variant names clearly communicate the number of items included;
• Variant images correctly represent one, two, or four jars;
• Each variant is connected to the correct Bundle configuration;
• Each variant contains the correct number of Product blocks;
• Every Product block has the correct Unit quantity;
• Dropdown titles are clear and easy to understand;
• Each dropdown contains the correct available products;
• The correct default products are selected;
• Each variant has the correct Bundle pricing;
• The Compare-at price and Sale badge are displayed correctly;
• The bundled products and variants have sufficient inventory;
• Sold-out products are displayed correctly;
• Gift Message and Free Gift appear only for the intended variants;
• Switching variants loads the correct Bundle contents;
• The main product, Bundle child products, variants, quantities, and prices are correct on the product page, in the cart, and in Shopify Checkout.

You have now created a Product Bundle based on an existing Shopify product, with a different Bundle configuration for each product variant.
Shoppers can first choose whether they want one, two, or four jars and then select the nut product included in each position to create their own Build Your Own Nuts Box.

Updated on: 04/08/2026