How to Create a Product Bundle with Multiple Product Dropdowns

With uShopAid Product Bundle, you can create a standalone Shopify bundle product and allow customers to choose their preferred products from multiple dropdown menus.
In this tutorial, we will create a “Choose Any 3 Coffees” bundle:

• Three product dropdowns will appear on the storefront.
• Customers select one coffee from each dropdown.
• Each bundle contains three coffees in total.
• You can configure fixed pricing, dynamic discounts, Gift Message, Free Gift, product media, and storefront styles.

This tutorial uses three coffee dropdowns as an example. Each dropdown can also have its own selection of eligible products.

Try the Live Demo
See how customers can choose three coffees from separate product dropdowns before adding the completed bundle to the cart. View the Live Demo →

Step 1: Create a Product Bundle

Open uShopAid and go to the Product Bundle page. Click the button to create a new bundle.
Choose the template that supports multiple product dropdowns, and then enter the bundle settings page.
This template is suitable for creating:

• Choose-any-X product bundles;
• Bundles where customers select from different product categories;
• Fixed-quantity product sets;
• Customizable bundles with fixed or dynamic pricing;
• Gift bundles with a Gift Message or Free Gift.

[Insert screenshot: Select the Product Bundle template]

Step 2: Enter the Basic Bundle Information

Enter the basic information for the new bundle product, including:

• Title: The title of the bundle product;
• Status: The current bundle status;
• Any other available product settings.

For this tutorial, enter:
Coffee Bundle
After you save the bundle, uShopAid will create a corresponding bundle product in Shopify.

Set the Bundle Status

Set the status to Active if the bundle is ready and you want customers to see it in your store.
If you still need to test the bundle, keep it inactive and activate it after checking the storefront result.
[Insert screenshot: Bundle title and status settings]

Step 3: Add the First Product Dropdown

Find Bundled Products and click + Add Product.
The Select Products window will open. From here, you can:

• Search for products;
• Filter products by Vendor, Status, Collection, or other available conditions;
• Select multiple products at once;
• Review your selections under Selected products;
• Click Confirm to add the products.

For this tutorial, select all the coffee products that customers should be able to choose from.
[Insert screenshot: Select coffee products]

Step 4: Choose How the Products Are Organized

After confirming the products, you will see the following question:
How would you like to display the selected products?
Two display options are available.

Grouped

Combine all products in one dropdown.
This option combines all selected products into one dropdown.
For example, if you select 10 coffee products, all 10 coffees will appear as options in one storefront dropdown. The customer can choose one of them.
For the “Choose Any 3 Coffees” bundle, select Grouped.

Individual

Use a separate dropdown for each product.
This option creates a separate dropdown for every selected product.
It is more suitable when the products in the bundle are fixed, but customers still need to select a variant for each product. 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: Grouped and Individual display options]

Step 5: Configure the First Product Block

After you select Grouped, the system creates a Product 1 block. This block generates one product dropdown on the storefront.

Unit Quantity

Unit quantity determines how many units of the selected product will be added to one bundle.
For example:

• Set it to 1: One unit of the selected coffee is added.
• Set it to 2: Two units of the selected coffee are added.

In this tutorial, customers should select one coffee from each dropdown, so set Unit quantity to 1.

Dropdown Title

This is the title displayed above the dropdown.
For example:

• Product 1
• Choose your first coffee
• Select coffee 1

For a more customer-friendly storefront experience, we recommend:
Choose your first coffee

Set the Default Product

A star icon appears next to each product. A solid blue star indicates that the product is the default selection for that dropdown.
When customers open the product page, the default coffee will already be selected. They can still open the dropdown and choose another product.

Manage the Available Products

Inside each Product block, you can also:

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

[Insert screenshot: Product block, unit quantity, dropdown title, and default product]

Step 6: Create Three Coffee Selection Dropdowns

After configuring the first Product block, click Duplicate twice to create two additional blocks with the same settings.
The final structure should be:

• Choose your first coffee
• Choose your second coffee
• Choose your third coffee

You can also select a different default coffee for each dropdown to present a recommended combination when the page first loads.

The number of Product blocks determines the number of dropdowns displayed on the storefront. The total of all Unit quantity values determines how many items are included in one complete bundle.

Use Different Products in Each Dropdown

Although all three dropdowns in this tutorial contain coffee products, they are still three independent Product blocks.
You can configure the following settings separately for each block:

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

When you duplicate a Product block, the new block initially uses the same products as the original. Click Edit Product if you want to change the eligible products for a specific dropdown.
[Insert screenshot: Three completed Product blocks]

Step 7: Configure the Dropdown Options

Use Dropdown Options Settings to control the information and product order inside the dropdowns.

Show in Dropdown

Choose which product information should appear in each dropdown, such as:

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

Sort By

Choose how the products should be sorted inside the dropdowns.
If you select Manual sorting, drag the sorting icon next to each product to change its position.
For example, you can rearrange the products from:
#1, #10, #11, #12, #2...
to:
#1, #2, #3, #4...
A clear product order helps customers find their preferred coffee more easily.

Hide Dropdown If Only One Option Is Available

When this setting is enabled, a dropdown is automatically hidden if it contains only one available option.
This prevents the storefront from displaying a selection menu when the customer does not have an actual choice.
[Insert screenshot: Dropdown Options Settings]

Step 8: Configure Gift Message (Optional)

Expand Gift Message, and then enable Enable gift message.
Once enabled, customers can add gift information when purchasing the Coffee Bundle.

Title

Enable Show title to display a title above the Gift Message fields.
For example:
Leave a short message to be sent with your bundle
If this option is disabled, the title will not appear, but the input fields can remain available.

From

Enable Allow input of the sender's name to let customers enter the sender’s name.
You can configure:

• Placeholder text: For example, Your name;
• This field is required: Choose whether the field must be completed.

To

Enable Allow input of the recipient's name to let customers enter the recipient’s name.
You can configure:

• Placeholder text: For example, Recipient's name;
• This field is required: Choose whether the field must be completed.

Message

Set the placeholder text for the message field. For example:
Write a personal note (max 100 characters)
You can also:

• Enable a character limit;
• Set the maximum number of characters;
• Make the message field 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.
Customers must use the Add to cart button so that the sender’s name, recipient’s name, and personal message can be submitted together with the bundle.

Gift Message collects gift information from the customer. It does not add a free product to the bundle. To provide an actual gift product, configure it under Rules → Free Gift.

[Insert screenshot: Gift Message settings]

Step 9: Configure the Bundle Price

Open Rules, and then choose a pricing method under Bundle pricing.

Method 1: Calculate the Price Automatically

Select:
Sync automatically based on the prices of the bundled products.
The bundle price will be calculated using the prices of the coffees that the customer actually selects in the three dropdowns.

Percentage Off

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

• The three selected coffees have a combined price of $60.
• The discount is set to 10% off.
• The final bundle price is $54.

This method is suitable for an offer such as:

Choose any three coffees and receive 10% off.

Amount Off

Subtract a fixed amount from the total price of the complete bundle.
For example:

• The three selected coffees have a combined price of $60.
• The discount is set to $5 off in total.
• The final bundle price is $55.

The $5 discount is applied once to the complete bundle. It is not deducted separately from each coffee.

Cheapest Item Discount

Apply a percentage discount to the least expensive product in the bundle.
For example, the three selected coffees cost:

• $18
• $20
• $25

If you configure a 50% discount for the cheapest item, the discount will be applied to the $18 coffee.
This method is suitable for an offer such as:

Choose any three items and receive 50% off the cheapest item.

Most Expensive Item Discount

Apply a percentage discount to the most expensive product in the bundle.
Using the same example, the discount would be applied to the $25 coffee.
This method is suitable for promotions that provide a special discount on the highest-priced product in the bundle.

No Discount

No additional discount is applied. The bundle price is equal to the combined selling price of the three coffees selected by the customer.
This option is suitable when you want to provide a convenient bundle-building experience without offering an additional price discount.

When automatic price synchronization is enabled, the bundle price may change when the customer selects coffees with different prices.

How automatic price synchronization works

When Sync automatically based on the prices of the bundled products is selected, the Bundle price is calculated using the products currently selected in the dropdowns.

For example, if the currently selected products are priced at:

• Product 1: $50
• Product 2: $40
• Product 3: $65

The displayed Bundle price will be $155.

If the customer changes Product 2 to a product priced at $65, the Bundle price will automatically update to $180:

$50 + $65 + $65 = $180

Only the product currently selected from each dropdown is included in the calculation. Products that are available in a dropdown but are not selected are not included.

[Insert screenshot: Bundle price displayed as $155]

[Insert screenshot: Bundle price updates to $180 after changing a dropdown selection]

Method 2: Set a Fixed Price Manually

Select:
Manually set, do not sync automatically.
Enter the fixed selling price in Bundle price.
For example, set the Bundle price to $49. Regardless of the original prices of the three coffees selected by the customer, the complete bundle will be sold for $49.
This method is suitable for an offer such as:

Choose any three coffees for a fixed price of $49.

Invoice Price Override (Optional)

Use Invoice price override to select bundle products whose invoice price should be set to $0.
This option is commonly used when a bundle includes a free gift, packaging, a gift box, or another item that should not be assigned a price.
For a standard “Choose Any 3 Coffees” bundle, you can leave this setting unchanged unless a particular product needs to have a zero invoice price.
[Insert screenshot: Bundle pricing and Invoice price override settings]

Step 10: Configure the Compare-at Price

The Compare-at price is used to display the bundle’s original crossed-out price.
Three calculation methods are available.

Sync Based on the Product Prices

Sync based on the prices of the bundled products.
The combined selling price of the products selected by the customer will be used as the bundle’s Compare-at price.

Sync Based on Product Compare-at Prices

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

Set the Compare-at Price Manually

Manually set, do not sync automatically.
Enter the bundle’s Compare-at price manually. It will not change when customers select different products.
By configuring the Bundle price and Compare-at price appropriately, you can display a crossed-out original price and make the bundle savings easier to understand.
[Insert screenshot: Compare-at price options]

Step 11: Add a Free Gift (Optional)

Go to Rules → Free Gift, and then click Add free gift to add an actual gift product to the bundle.
Gift Message and Free Gift serve different purposes:

• Gift Message: Allows customers to enter the sender’s name, recipient’s name, and a personal message.
• Free Gift: Adds an actual product that the customer receives when the applicable conditions are met.

You can decide whether to add a Free Gift based on the promotion you are creating. If you only want customers to leave a gift message, you do not need to configure a Free Gift.
[Insert screenshot: Free Gift settings]

Step 12: Add Bundle Media and a Description

Expand Media & Description to add images and a description to the new bundle product.
These settings apply to the new bundle product itself. They do not change the original images or descriptions of the individual coffee products.

Bundle Media

You can add bundle media in two ways:

• Click Add files to upload a dedicated bundle image from your device.
• Click Add media from bundled products to use media from the coffee products included in the bundle.

For a “Choose Any 3 Coffees” bundle, we recommend using a main image that clearly presents multiple coffee products together. This helps customers immediately understand that the product is a coffee bundle rather than one individual bag of coffee.

Bundle Description

You can:

• Write the bundle description manually in the rich-text editor;
• Click Add description from bundled products to import content from the included products, and then edit it to match the bundle offer.

Consider explaining:

• That the customer must select three coffees;
• That one coffee is selected from each dropdown;
• Whether the bundle uses fixed or dynamic pricing;
• Whether a discount or Free Gift is included;
• Whether customers can enter a Gift Message;
• Any relevant purchasing or delivery information.

For example:

Build your own coffee bundle by selecting one coffee from each of the three dropdown menus. Choose your favorite combination and enjoy all three coffees in one bundle.
After importing media or descriptions from the bundled products, review and edit the final content. A description written for an individual coffee may not be suitable for the complete bundle product.

[Insert screenshot: Media & Description settings]

Step 13: Customize the Bundle Style

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

Style settings apply to every bundle that uses the same template, not only the bundle currently being edited. Before making changes, check whether other bundles in your store use this template.

Dropdown Title

Configure the appearance of the title above each dropdown:

• Font Color: Title color;
• Font Size: Title font size;
• Font Style: Title font style.

This controls titles such as Product 1. It does not control the name of the selected coffee inside the dropdown.

Dropdown

Name

Configure the product name displayed inside the dropdown:

• Color;
• Size;
• Style.

Image

Configure the product image displayed inside the dropdown:

• Size;
• Shape, such as Rounded.

Border

Configure the dropdown border:

• Color;
• Radius.

Name of Sold Out Products

Configure how the names of sold-out products are displayed:

• Color;
• Size;
• Style.

Consider using a lighter gray color to help customers distinguish products that are currently unavailable.

Gift Message

If Gift Message is enabled, you can configure:

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

Spacing for Dropdown Title and Dropdown

Adjust the top and bottom spacing between the dropdown title and the dropdown itself.

Spacing for Dropdown and Product Info

Adjust the top and bottom spacing between the dropdown and the product information area.

Check the Preview

The Preview panel on the right shows an approximate storefront result, including:

• The three coffee dropdowns;
• Product images and names;
• Gift Message fields;
• The Add to Cart button.

The Preview is provided as a visual reference. The final storefront appearance may also be affected by your Shopify theme’s fonts, page width, and other theme styles.

[Insert screenshot: Complete Style settings and Preview panel]

Step 14: Save and Complete the Bundle

After completing all the settings, click Save in the upper-right corner of the page.
Once saved, your “Choose Any 3 Coffees” Product Bundle is ready.
Customers can:

1. Select one coffee from the first dropdown;
2. Select one coffee from the second dropdown;
3. Select one coffee from the third dropdown;
4. Enter a Gift Message, if enabled;
5. Click Add to cart to add the complete Coffee Bundle to their cart.

If the Bundle status is set to Active, open the corresponding Shopify product page to check the storefront result.
[Insert screenshot: Completed Coffee Bundle on the storefront]

The completed Coffee Bundle displayed on the Shopify product page.
We recommend checking:

• The bundle image and product description;
• All three coffee selection dropdowns;
• The default product in each dropdown;
• The price, Compare-at price, and sale badge;
• The Gift Message fields;
• The quantity selector;
• The Add to cart button;
• The selected products and prices after adding the bundle to the cart.

Your Coffee Product Bundle with three product dropdowns is now complete. You can reopen the bundle at any time to update its available products, default selections, pricing rules, Gift Message, Free Gift, media, description, or styles.

What if the price does not update after changing a dropdown selection?

When automatic price synchronization is enabled, changing a selected product should also update the price displayed on the Shopify product page.

If the dropdown selection changes normally but the displayed product price remains unchanged, shows an incorrect amount, or does not match the currently selected products, the Bundle configuration may already be correct.

Some Shopify themes use a custom price component that does not automatically display the Bundle’s dynamic price updates. In this situation, the theme may require a compatibility adjustment.

Please contact the uShopAid support team and provide the Bundle product URL, Our team can check whether the theme’s price component requires compatibility support.

Updated on: 05/08/2026