Configuring customizable bundles layouts

Customizable bundles let customers build a subscription by selecting products that fit their needs. 

This guide walks through the available bundle layouts and widget settings, and explains how to configure the bundle-building experience for fixed-price and dynamically priced bundles.

Before you start

• This guide applies to fixed and dynamically priced customizable bundles. 
• Preset bundles use the standard Shopify product template, which you can customize using the Shopify theme editor.  See How to create a preset bundle for more details.  

Bundles layout options

Fixed-price and dynamically priced bundles use layout options to let customers pick and choose which products to add to their bundles. 

Bundles Widget 2.0

Bundles Widget 2.0 is a modern, mobile-optimized layout that helps customers easily compare options, navigate collections, and build their bundle with confidence. It offers a clean, brand-ready UI out of the box with a clearer product and variant selection flow, reducing the need for custom development. Real-time summaries and guided interactions create a smoother, more intuitive bundle-building experience across devices.

As of February 12, 2026, all new fixed or dynamically priced bundles default to the Bundles 2.0 widget. You can switch to a legacy layout at any time.

Fill with best sellers

The Bundles 2.0 widget includes a Fill with best sellers option that automatically populates a customer's bundle with predefined fallback products.

How it works

• The Fill with best sellers link appears only when all fallback products are available in the bundle’s assigned collections.

• When a customer clicks the link, the widget populates the bundle with the fallback products configured for that variant.

• Customers can remove or replace individual items after the widget fills the bundle.

Availability

• You can control whether the Fill with best sellers option appears to customers using the Fallback contents fill setting in the bundle widget customizations page. See Customizing the Bundles Widget 2.0 for more information.

Legacy options

There are two legacy options available for customizable bundles: the one-page layout or the multi-step layout.

One-page layout

Customers create their bundles on a single page. This option is ideal for simple bundles.

Multi-step layout

Customers go through a series of quick steps to build their bundles. This option is best for larger or more complex bundles. 

Confirming the layout used per bundle

View the bundle in the Recharge merchant portal to confirm which layout it uses:

1. In the merchant portal, select Products and click Bundles.

2. Click on your bundle.

3. Review Layout under Advanced settings to confirm which layout is in use:

   • new-storefront-widget: Bundles 2.0 Widget

   • one-page: One-page widget

   • multi-step: Multi-step

Changing the widget type per bundle

You can update the layout type for any fixed or dynamically priced bundle:

1. In the merchant portal, select Products and click Bundles.

2. Click on your bundle.

3. Select Edit in the Advanced settings section.

4. Choose one of the three options under Which layout should your bundle use? 

5. Press Save. 

Customizing the layout appearance

The available customization options depend on whether you use Bundles Widget 2.0 or a legacy layout.

Bundles Widget 2.0

If you're using Bundles Widget 2.0, customize your widget's appearance directly in the Merchant Portal using the built-in customization interface, no theme editor required. You can configure fonts, colors, corner roundness, image aspect ration, page width, and products per row. See Customizing the Bundles Widget 2.0 for instructions. 

One-page or multi-step layout

You can customize the appearance of legacy bundle widgets using the Shopify theme editor. To customize your bundle product page: 

1. In the merchant portal, select Products and click Bundles.

2. Select Storefront settings.

3. Click Customize your bundles product page.

4. In the theme editor, select the product page preview.

5. Click the Bundles widget app block to view its settings.

Edits impact all bundles using the default recharge-bundle Shopify product template.

All Shopify app block settings apply to these widgets, including:

• Text size

• Margins

• Button size

• Products per row

Legacy layouts rely more heavily on theme-level styling and may require custom CSS for advanced design changes. See Customizing the Bundles Widget for more information.

Configure bundle behavior

If you're using Bundles Widget 2.0, some bundle behavior settings are now configured in the built-in customization interface. See Customizing the Bundles Widget 2.0 for instructions.

For legacy layouts, configure how your bundle behaves by default, including the subscription frequency customers see first and the page they’re directed to after adding a bundle to their cart.

1. In the merchant portal, select Products and click Bundles.

2. Click on your bundle.

3. Select Edit in the Advanced settings section.

   1. Under Default bundles settings, you can: 

      • Choose the default frequency option that customers see when they build a bundle, if you offer multiple frequency options (i.e., you offer both 30 and 60-day subscriptions)

      • Select the default option if you offer multiple bundle options (i.e., you offer a 3-day and 6-day meal plan)

   2. Under Layout settings you can determine what happens to customers after they finish creating their bundle:

      • Send them to the cart page: Redirect the customer to the cart page which aligns with the standard add to cart functionality.

      • Send them straight to checkout: Bypass the cart page and redirect them directly to checkout.

   3. Toggle on Show selection status bar to display a sticky selection summary at the bottom of the bundle builder.

   4. Click Save and continue to save your preferences. 

Configure product display options

If you're using Bundles 2.0, product display options including variant behavior, collection behavior, and the product details modal are now configured in the built-in customization interface. See Customizing the Bundles Widget 2.0 for instructions.

For legacy layouts, control how customers interact with your bundle. To access product layout options: 

1. In the merchant portal, select Products and click Bundles.

2. Click on your bundle.

3. Select Edit in the Advanced settings section.

4. Expand the Products in your bundle section. 

5. Update the following:

   • Product details pop-up

   • Products with multiple variants

   • Displaying collections in your bundle

   • Set up filters

Product details pop-up

The product details pop-up controls whether customers see additional product information when they select a product in the bundle menu. When enabled, clicking a product opens a modal that displays the product description. You can manage this content in Shopify by editing the product description in the product editor.

Products with multiple variants

The Bundles widget includes flexible settings for handling products with multiple variants. You can choose how variants are added and displayed in the bundle builder by configuring the following options:

• Always add the first variant to the bundle without prompting the customer to choose
• Allow customers to select a variant when adding a product to their bundle
• Display variants as separate products in the product list, allowing customers to select multiple variants of the same product

You can also customize how variants appear by choosing whether to display both the product and variant name, or only the variant name.

Displaying collections in your bundle

If your bundle uses multiple collections, you can control whether collections expand or collapse for customers.

• Collapse collections: Collections are not automatically fully expanded, and customers must open each collection to view the products the collection contains
• Don't collapse collections: Collections start fully expanded, and customers automatically see the products each collection contains

Editing legacy Bundles layouts

You can make additional changes to the legacy layouts by clicking Edit layout under the applicable widget option.

One-page layout

Select Edit one-step layout to update the name and description of the customizable bundle.

Multi-step layout

Select Edit multi-step layout to configure additional options for the multi-step layout. You can configure the step title and main title, and add descriptions for each step of the flow (box type, choose products, extra subscriptions, and review). 

Bundles translations

Use translations to update the bundles widget. Translations apply only to one-step or multi-step widgets. To translate the Bundles Widget 2.0 see Customizing the Bundles Widget 2.0. 

Considerations