How to Create a Classic Bundle with uShopAid

Classic Bundle is designed for selling several predefined products together. You can select the products included in the bundle and configure the quantity of each product, available variants, discounts, subscription purchase options, and storefront placement.
For example, you can use a Classic Bundle to create:

• An outfit bundle containing one shirt and one pair of pants
• A workout bundle containing an ab roller and a yoga stretching strap
• A main product sold together with a discounted accessory
• A fixed bundle containing predefined products and quantities
• A bundle that allows customers to adjust the quantity of selected products

Customers can select available variants on the product page, adjust product quantities when allowed, and add the entire bundle to the cart at once.

Step 1: Create a Classic Bundle

Open uShopAid and select Classic Bundle on the bundle creation page.
【Insert image: Select the Classic Bundle template】

After opening the setup page, click the name at the top of the page to rename the bundle.
Use a name that makes the bundle easy to identify and manage in the uShopAid admin, such as:

• Yoga Equipment Bundle
• Summer Outfit Bundle
• Buy Together and Save

This name is mainly used to identify the promotion inside uShopAid. You can configure the storefront title separately under Appearance → Text.

Step 2: Select the Products to Include

In the Products section, click Select products.
【Insert image: Product selection window】

In the product selection window, you can:

• Search by product title
• Filter products by Vendor, Status, or Tag
• Expand products that have multiple variants
• Select an entire product
• Select only specific product variants
• Review selected products under Selected products

After selecting the products, click Confirm.
Choose products that have a clear relationship with one another. The more relevant the products are, the easier it will be for customers to understand the value of buying them together.

Step 3: Review Products and Available Variants

After adding products, they will appear in the Products list.
【Insert image: Products added to the Products section】

Below each product name, you will see the number of currently selected variants, for example:

4 of 4 variants selected

or:

9 of 9 variants selected

Click the variant count to change which variants customers can purchase through the bundle.
For example, when a product has multiple colors or sizes, you can:

• Allow customers to choose from all variants
• Include only the variants suitable for this bundle
• Exclude variants that you do not currently want to offer

Customers can only choose from the variants selected for the current Classic Bundle.
You can also drag the sorting icon on the left side of a product to change its display order in the bundle.

Step 4: Configure the Quantity of Each Product

Under Quantity limit, you can choose between two quantity configuration methods.

Option 1: Set a Fixed Quantity for Each Product

Select:
For each product in the bundle, the customer must purchase a specified quantity.
【Insert image: Fixed quantity settings】

In this mode, you can enter a fixed Quantity for each product.
For example:

• Fixed product sets
• Bundles with predefined product ratios
• Two units of Product A plus one unit of Product B
• Promotions where customers should not change the bundle structure

Option 2: Display a Quantity Selector for Each Product

Select:
Show quantity selector for each product
【Insert image: Quantity selector settings and Preview】

After enabling this option, you can configure the following values for each product:

• Min: The minimum quantity customers can select
• Incr: The quantity added or removed with each click
• Max: The maximum quantity customers can select

For example:

Make a Product Required or Optional

When adjustable quantities are enabled, use Required to control whether a product must be included in the Classic Bundle.

• Required enabled: Customers must include the product.
• Required disabled: The product is optional.

This allows you to create a bundle containing core products and optional add-ons.

Step 5: Choose Where the Classic Bundle Appears

The Widget option beside each product controls whether the current Classic Bundle appears on that product’s details page.
【Insert image: Widget settings in the Products list】

• Enabled: The Classic Bundle appears when customers visit that product’s page.
• Disabled: The Classic Bundle does not appear on that product’s page.

For example, suppose a Classic Bundle contains:

• An ab roller
• A yoga stretching strap

If Widget is enabled only for the ab roller, the bundle will appear on the ab roller product page but will not automatically appear on the yoga stretching strap product page.
You can also enable Widget for multiple products so that the same Classic Bundle appears on several related product pages.

Widget only controls which product pages display the entire Classic Bundle. It does not remove a product from the bundle or hide an individual product inside the bundle.

Step 6: Configure Products in Bulk

If the Classic Bundle contains many products, use the following options to configure them more efficiently:

• Bulk setting: Update product settings in bulk
• Import: Import product configurations

Before using bulk settings, confirm whether the products should share the same quantity, required status, and Widget placement rules. Bulk changes may overwrite settings that were previously configured for individual products.

Step 7: Configure the Bundle Discount

In the Discounts section, you can choose from three discount options:

• Entire bundle
• Specific products only
• No discount

Apply a Discount to the Entire Bundle

Select Entire bundle to apply the discount to all products in the bundle.
【Insert image: Entire bundle discount settings】

Then select a discount method and enter the discount value.
For example:

• Discount method: Percentage off
• Discount value: 10%

When customers purchase the bundle, all eligible products in the bundle will receive a 10% discount.
This option is suitable for simple bundle offers such as:

• Buy together and save 10%
• Complete the set and save 15%
• Buy the bundle and save $20

Apply a Discount Only to Specific Products

Select Specific products only, and then choose the products that should receive the discount.
【Insert image: Specific products only discount settings】

Click View selected to review or change the products included in the discount.
For example, a Classic Bundle contains:

• Ab roller: Regular price
• Yoga stretching strap: 10% discount

Only the yoga stretching strap will receive the discount. The ab roller will remain at its regular price. The bundle total is calculated from the current prices of all included products.
This option is suitable for:

• Buying a main product and receiving a discount on an accessory
• Offering discounts only on selected products
• Keeping the main product at its regular price while discounting an add-on product

Offer No Discount

Select No discount if you do not want the Classic Bundle to apply an additional discount.
Even without a discount, you can use a Classic Bundle to present related products together, allowing customers to select variants and add all products to the cart at once.

Step 8: Configure the Bundle Label

Under Bundle Label, enter a label that identifies the current bundle.
Use a short and recognizable name, such as:

• Yoga Equipment Bundle
• Summer Set
• Buy Together Deal

Avoid using long promotional text, as it may be difficult to read in cart or order-related information.

Step 9: Decide What Happens When Some Products Are Unavailable

Under Allow bundle purchase when some products are unavailable, you can control whether customers can continue purchasing the remaining products when part of the bundle is sold out, deleted, or archived.
【Insert image: Allow bundle purchase when some products are unavailable settings】

When Some Products Are Sold Out

Setting:
Part of the items are sold out.

When Disabled

If any product in the bundle is sold out, customers cannot purchase the entire bundle. The message configured under Appearance → Text → Sold out will be displayed.

When Enabled

The sold-out product cannot be purchased, but customers can still purchase the other in-stock products in the bundle.
For example, suppose a bundle contains Products A, B, and C. If Product B becomes sold out:

• When disabled: The entire bundle cannot be purchased.
• When enabled: Customers can still purchase Products A and C.

After enabling this setting, customers may purchase fewer products than the bundle originally contained. Confirm that the remaining products still form a suitable bundle and that the discount remains appropriate.

When Some Products Are Deleted

Setting:
Part of the items are deleted. Automatically remove them from the bundle.

When Disabled

Deleted products are not automatically removed from the bundle configuration. Because the bundle contains a product that no longer exists, customers cannot continue purchasing it normally. You will need to edit the bundle manually.

When Enabled

When a product is deleted from Shopify, uShopAid automatically removes it from the bundle. Customers can continue purchasing the remaining products.
For example, suppose a bundle contains Products A, B, and C. If Product B is deleted:

• When disabled: Product B is not automatically removed, and the merchant must edit the bundle manually.
• When enabled: Product B is automatically removed, leaving only Products A and C in the bundle.

When Some Products Are Archived

Setting:
Part of the items are archived. Automatically remove them from the bundle.

When Disabled

Archived products are not automatically removed from the bundle. Because an archived product is no longer available for normal sale, customers cannot continue purchasing the bundle normally. You will need to edit the bundle manually.

When Enabled

When a product is archived in Shopify, uShopAid automatically removes it from the bundle. Customers can continue purchasing the remaining products.
For example, suppose a bundle contains Products A, B, and C. If Product B is archived:

• When disabled: Product B is not automatically removed, and the merchant must edit the bundle manually.
• When enabled: Product B is automatically removed, leaving only Products A and C in the bundle.

Should You Enable or Disable These Settings?

Enabling these settings helps keep the remaining products available for purchase, but it may change the bundle’s original quantity, contents, and discount structure. Review published bundles after products are sold out, deleted, or archived to confirm that the remaining products are still suitable for sale together.

Step 10: Configure Subscription Purchases

If the products in the bundle support subscription purchases, enable Subscription.
【Insert image: Subscription settings】

Enable:
Allow the customers to choose the subscription plan for the bundle.
Customers can then select an available subscription plan for the entire Classic Bundle.
If you also enable:
Enable one time purchase
Customers can choose between:

• One-Time Purchase
• Subscribe and Save

If one-time purchases are disabled, customers can only purchase the bundle through an available subscription plan.

Why Does “No Subscription Plans Were Found” Appear?

If the Preview or storefront displays:

Oops! No subscription plans were found.

【Insert image: No subscription plans were found message】

This means that no available subscription plan could be found for the current Classic Bundle.
Before publishing, check whether:

• A subscription app has created subscription plans for the relevant products
• All required products and their selected variants support subscriptions
• The products in the bundle have a subscription option that can be used together
• A subscription frequency can be selected in the Preview or on the product page

If some required products do not have subscription plans, or the products do not share a compatible subscription option, the bundle may not be able to display an available subscription plan.

Step 11: Review the Preview

While configuring the bundle, use the Preview on the right to check its approximate storefront appearance.
You can review:

• Bundle title
• Product images
• Product names
• Original and discounted prices
• Variant selectors
• Product quantity selectors
• One-time purchase options
• Subscription purchase options
• Purchase button
• Current bundle total

When customers change a variant or product quantity, the product prices, discount, and bundle total may update based on the current selection.

The Preview helps you review the configuration and approximate layout. The final storefront appearance may also be affected by the theme style, available page width, and the bundle’s placement on the page.

Step 12: Customize the Appearance

Expand Appearance to configure the Classic Bundle’s layout, price display, product links, button behavior, storefront text, and overall style.

Configure the Product Layout

Under Layout, you can choose between two product layouts:

• Vertical list layout: Each product occupies a separate row
• Horizontal card layout: Multiple products appear side by side

【Insert image: Layout settings】

When using the horizontal layout, use Items per row (Desktop) to set the number of products displayed in each row on desktop.
For example, when set to 2, two products will appear side by side in each row on desktop.
The final layout may also be affected by the available width, number of products, and store theme.

Use the Compare-at Price as the Old Price

Enable:
Use compare-at price as old price in bundle widget
If a product has a Compare-at price configured in Shopify, the Classic Bundle will display it as the crossed-out old price.
For example:

• Compare-at price: $100
• Current price: $90

The storefront will display $100 as the crossed-out old price and $90 as the current price.

This option only controls how the old price is displayed. It does not create an additional discount. The actual Classic Bundle discount still depends on the discount settings configured earlier.

Configure Product Link Behavior

Under Product Link Behavior, choose how a product page opens when customers click a product title inside the bundle:

• Current tab: Open the product page in the current browser tab
• New tab: Open the product page in a new browser tab

Choose New tab if you want customers to view product details while keeping the current bundle page open.

Configure the Purchase Button Action

Under Button Action, choose where customers go after successfully adding the bundle:

• Go to cart page: Open the cart page
• Go to checkout page: Proceed directly to checkout

Choose Go to cart page if customers may want to review their products, edit their cart, or continue shopping.
Choose Go to checkout page if you want to shorten the purchase process.

Step 13: Customize Storefront Text

Under Appearance → Text, you can customize the Classic Bundle title, purchase button, sold-out message, and other storefront text.
【Insert image: Text settings and Preview】

Configure the Product Title Format for Multiple Units

Product Title Format controls how a product title is displayed when its quantity is greater than one.
The default format is:

[[quantity]]x [[product_title]]

Where:

• [[quantity]]: The current product quantity
• [[product_title]]: The product title

For example, if the product title is Abdominal fitness equipment and the quantity is two, the storefront will display:

2x Abdominal fitness equipment

This format only applies when the product quantity is greater than one.
Click Examples beside the field to view other formatting examples.

Customize the Bundle Title

Under Title, enter the heading displayed above the Classic Bundle, for example:

Buy these products together and save!

You can also use text that better matches the product combination, such as:

• Complete the set and save
• Frequently bought together
• Build your complete routine
• Buy these products together and save

Keep the title short and clear so that customers can quickly understand that the products are available to purchase together.

Display the Bundle Total in the Button

Enable:
Display Total Price in Button
The purchase button will display the current Classic Bundle total, for example:

Add bundle to cart · $1290

When customers switch variants or adjust product quantities, the total displayed in the button will update automatically.
When this option is disabled, the button can display only the action text without the bundle total.

Customize the Purchase Button Text

Under Button, customize the purchase button text.
The default format may look like:

Add bundle to cart · [[total_price]]

The following variable:

[[total_price]]

represents the current Classic Bundle total.
Click Variables beside the field to see which variables are supported.

Customize the Sold-Out Message

Under Sold out, customize the message displayed when products in the bundle are sold out, for example:

Part of the items are sold out.

Use a message that clearly explains why the bundle is unavailable, such as:

• Some items in this bundle are sold out.
• This bundle is currently unavailable.
• One or more items in this bundle are out of stock.

Other general text can be customized under General Settings at the bottom of the section.

Add Translations

Click Add Translation at the top of Appearance to add text in other languages.
If your store serves customers in multiple countries or regions, consider translating:

• Bundle title
• Purchase button
• Sold-out message
• Quantity messages
• Other customer-facing text

The corresponding text will be displayed according to the store’s current language.

Step 14: Customize the Style

Expand Appearance → Style to configure the title, product cards, purchase button, and spacing around the bundle.

Configure the Title Style

Under Title, you can adjust:

• Font Color: Title text color
• Font Size: Title font size in px
• Font Style: Title font style, such as Bold
• Alignment: Title alignment

The available alignment options are:

• Left
• Center
• Right

These settings apply to the bundle title entered under Text → Title.

Configure the Product Card Style

Under Product Card, you can adjust:

• Title Color: Product title color
• Price Color: Current or discounted product price color
• Old-Price Color: Crossed-out old price color
• Radius: Product card corner radius
• Swatch: Variant swatch shape
• Title Underline: Whether to underline product titles

【Insert image: Product Card style settings】

For example, when Swatch is set to Circle, applicable variant options will appear as circular swatches.
When Title Underline is enabled, an underline appears below each product title, making clickable product titles easier to recognize.

Old-Price Color only controls the color of the crossed-out old price. Whether an old price appears also depends on the product price and the price display settings configured earlier.

Configure the Purchase Button Style

Under Button, you can adjust:

• Button Color: Button background color
• Button Font Color: Button text color
• Button Animation: Button animation
• Font Size: Button text size
• Font Style: Button text style
• Radius: Button corner radius

Make sure there is sufficient contrast between the button text and background so customers can clearly identify the primary purchase button.

Configure the Button Animation

Under Button Animation, you can add an animation to the Classic Bundle purchase button.
【Insert image: Button Animation menu】

The following animations are currently available:

Configure Mobile and Desktop Spacing

Under Margin, you can configure the top and bottom margins of the Classic Bundle separately for mobile and desktop.
【Insert image: Mobile and Desktop Margin settings】

Mobile

• Top: Distance between the bundle and the content above it
• Bottom: Distance between the bundle and the content below it

Desktop

• Top: Distance between the bundle and the content above it
• Bottom: Distance between the bundle and the content below it

All spacing values use px.
For example:

Step 15: Publish the Classic Bundle

After completing the setup, review the Preview and click Publish in the upper-right corner.
Before publishing, confirm that:

• The correct products and variants have been selected
• The quantity rules for each product are correct
• Widget is enabled for every product page where the bundle should appear
• The discount and total price are calculated correctly
• The unavailable-product settings produce the expected behavior
• Subscription plans appear correctly
• The title, button, and customer-facing messages are correct
• The desktop and mobile styles match your store design

After publishing, the Classic Bundle will appear on the product pages where Widget is enabled.

Step 16: Add the Classic Bundle to Other Locations with Code

In addition to displaying the Classic Bundle on related product pages through Widget, you can copy its dedicated code and add it to other Liquid-supported theme locations using a Shopify Custom Liquid block.
【Insert image: Code and Copy code】

Click Copy code to copy the code for the current Classic Bundle.
Then follow these steps:

1. In Shopify admin, go to Online Store.
2. Find the theme currently marked as Active.
3. Click Edit theme.
4. Open the page or template where you want to display the Classic Bundle.
5. Add a Custom Liquid block in the desired location.
6. Paste the code copied from uShopAid into the Custom Liquid block.
7. Click Save to save the theme settings.

【Insert image: Edit theme button in Shopify Online Store】

You can use this method to add a Classic Bundle to Liquid-supported locations such as:

• Product pages
• Homepage
• Collection pages
• Landing pages
• Custom pages
• Other custom areas in the theme

This code is associated with the current Classic Bundle. Copy and paste the complete code without changing its Class name or Bundle identifier. Changing these values may prevent the bundle from loading correctly.

If the target location does not support a Custom Liquid block, you may need to add the code directly to the theme code or ask your theme developer for assistance.

What Is the Difference Between Widget and Custom Liquid?

Updated on: 03/08/2026