Using custom CSS and JavaScript for the Bundles 2.0 Widget

When the built-in settings for Bundles Widget 2.0 are not sufficient, you can add custom CSS and JavaScript using a Custom liquid section in the theme.

This approach:

• Keeps customizations isolated from theme core files
• Avoids modifying app embed code
• Gives merchants and developers a safe extension point
• Preserves upgrade compatibility

This guide explains how to use custom CSS and JavaScript for the Bundles 2.0 Widget.

Before you start

• This article applies to the Bundles Widget 2.0. See Customizing legacy Bundles widget layouts if you use the one-page and multi-step bundle layouts.

Recommended approach

Add a Custom liquid section in the same template that renders the Bundles Widget 2.0 app block.

Use this section exclusively for:

• <style> (CSS)
• <script> (JavaScript)

Do not add any visible HTML content in this section. Use it only for <style> and <script> tags.

Add a Custom liquid section (Horizon)

1. In the Shopify admin, go to Online Store, select Themes, then Edit code.
2. Open the recharge-bundle template where the Bundles Widget app block is used.
3. Add a Custom liquid section to the same template.
4. Place the section below the Bundles Widget app block. This ensures your CSS overrides the widget styles and your JavaScript runs after the widget markup is rendered.
5. Select the Custom liquid section and open the code editor in the sidebar.
6. Add your custom CSS and/or JS.
7. Save the theme.

Add CSS and JavaScript

Paste your CSS and JS directly inside the Custom liquid section using <style> and <script> tags.

You can use any selectors or logic required for your customization.

Example snippet

<style>
  {% comment %} Hide bundle product title {% endcomment %}
  .recharge-bundle-title .recharge-heading  {
    display: none;
  }
  {% comment %} Add a divider to collection title {% endcomment %}
  .recharge-bundle-collection-collapsible .recharge-collapsible summary {
    padding-top: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--recharge-color-neutral-20);
  }
</style>
<script>
  (function() { console.log("Hello world!") })();
</script>

Load order considerations

• Place the Custom liquid section below the widget block in the template to ensure proper load order.
• If your JavaScript depends on elements rendered by the widget, execute it after the DOM has loaded:
  • JavaScript

    document.addEventListener("DOMContentLoaded", function () {
      // Your custom logic here
    });

Targeting widget elements for custom CSS

Always use the stable container and class hooks provided by the widget.

🚧

Note

Do not rely on auto-generated class names from the embedded CSS bundle. These may change between builds.

Recommended scoping

Default widget container ID value

recharge-storefront-bundling-widget

Theme root class

.recharge-storefront-theme

Example scope

#recharge-storefront-bundling-widget .recharge-storefront-theme {
  /* your styles */
}

Stable class hooks

Use the following supported class hooks for styling:

Attribute and ID hooks

You can also target specific elements using data attributes.

Supported attributes

• data-recharge-product-id="...": Target a specific product card
• data-recharge-variant-id="...": Target a specific variant

Example selectors

Product cards

#recharge-storefront-bundling-widget .recharge-bundle-product-item {
  border-radius: 12px;
}

Specific product

#recharge-storefront-bundling-widget
  .recharge-bundle-product-item[data-recharge-product-id="123456"] {
  border: 2px solid #000;
}

Mobile summary bar

#recharge-storefront-bundling-widget #bundle-summary-mobile {
  z-index: 50;
}

Best practices

• Scope all styles under the widget container ID.
• Avoid global selectors that may impact other theme elements.
• Avoid modifying Shopify theme core files.
• Test on both desktop and mobile breakpoints.
• Validate custom JS does not conflict with the theme or other apps.