Skip to main content
  1. Recharge
  2. Products & subscriptions
  3. Bundles
  4. Using Bundles

Customizing the Bundles Widget 2.0

Bundles 2.0 includes a built-in no-code customization interface that lets you configure your bundle widget's layout, content, styles, and copy directly from the Merchant Portal. This guide explains how to customize your Bundles Widget 2.0 for fixed-price and dynamically priced bundles.

 

Platform:

  • Shopify Checkout Integration
  • Migrated Shopify Checkout Integration

Before you start

Customize the widget layout

Use the Content tab to add sections to the core bundle widget, reorder them, or remove any you don't need. You can configure the Main page, and the Cross-sells page if cross-sells are configured on the bundle product. To access the customizing bundle widget page:

  1. In the merchant portal, select Products and click Bundles.
  2. Select your bundle, then under the Widget section click Customize. 
  3. Under the Content tab, click Add a section in the left sidebar and select a selection type. The following section types are available:
    • Custom HTML
    • Video
    • Callout
    • Columns
    • Text with image
  4. Drag sections in the sidebar list to reorder them on the page.
  5. To remove a section, click the trash can icon next to it.
  6. Click Done to save your changes

Please note, the first bundle variant always displays in the preview and can't be changed.

Tip: Use the toolbar at the top to toggle between desktop and mobile preview as you make changes.

Configure bundle behavior

Within the core Bundles widget section on the Content tab, you can control how the bundle displays for customers. 

  1. In the merchant portal, select Products and click Bundles.
  2. Select your bundle, then under the Widget section click Customize. 
  3. Click the Bundles widget section.
  4. Configure each setting as desired and then click Done to save your changes.

From here you can edit variant behavior, add-to-cart destination, collection behavior, product details modal, default selections, collection tabs, plan name display, and subscription benefits. 

Setting

Behavior
Product introduction Set the Page title and introduction. Choose whether to show a colored or transparent background behind the bundle options.
Fallback contents fill

Let customers one-click fill their bundle with the configured default selection products.

Note: Fallback contents fill only appears if default selections are set up.
Products with variants

Choose what happens when a product has multiple variants.

  • Automatically add the first variant to the bundle
  • Let the customer select a variant
  • Show variants a separate products
Product details modal Show full product information pulled from Shopify when a customer taps a product image.
Collection tabs

Show collection tabs to help customers navigate between collections.

Note: Collection settings only appear if your bundle has more than one collection.
Collection behavior

Control how collections load.

  • First collection only
  • All collections expanded
  • All collections collapsed

Set whether customers can manually collapse collections and whether a collection auto-collapses once the required number of products has been selected.

Note: Collection settings only appear if your bundle has more than one collection
Subscription benefits  Add a list of perks, like "Cancel any time", that appear in the selection summary

Manage styles

Note: If you already have styles configured in other Recharge storefront experiences (such as Affinity, win-backs, or cancellation prevention), only the brand color will be inherited. Other style settings won't carry over and will need to be configured here separately. 

  1. In the merchant portal, select Products and click Bundles.
  2. Select your bundle, then under the Widget section click Customize. 
  3. Click the Styles tab. 
  4. Make the desired changes. You can configure Fonts, colors, corner roundness, images aspect ration, width and height, # of products per row both for desktop and mobile.
  5. Optional - Add custom CSS or precise control over fonts, colors, and sizes.
  6. Click Done to save and apply your changes.

 

Edit copy and translations

Copy and translations are managed directly within the customization page. You can edit titles, intro text, labels, and other content inline as you configure each block or manage a copy for a different language using the locale switcher at the top right.

  1. In the merchant portal, select Products and click Bundles.
  2. Select your bundle, then under the Widget section click Customize. 
  3. Use the locale switcher in the top-right corner to select the language you are editing, or add another language.
  4. Select a section and edit its text inline using the fields in the sidebar.
  5. Repeat for each section and, if applicable, each page (Main and Cross-sells).
  6. To update shared labels, click Customize standard text at the bottom of the sidebar.
  7. Click Save changes to save.

 

Was this article helpful?
0 out of 0 found this helpful

Related articles

Didn’t find what you’re looking for?

Contact us