Customize bundle widget text using translation overrides

Customize the text displayed in the Bundles Widget 2.0 by adding translation overrides in your storefront theme. This allows you to modify shopper-facing content, such as add-to-cart buttons, section titles, helper messages, validation text, and other interface labels, without editing the widget code.

This guide explains how to customize shopper-facing text in the Bundles Widget 2.0 using translation overrides in your storefront theme.

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.

Requirements

Before proceeding, make sure you have:

• Access to your Shopify storefront theme
• The ability to add JavaScript using a Custom Liquid section

If you haven’t set this up yet, follow:Custom CSS + JS via Custom Liquid section.

How it works

When the widget loads, it uses default translation values.

If you provide your own values using customTranslations, your values replace the defaults for matching keys.

• If you override a key → your text is shown
• If you do not override a key → the default text is shown

You only need to override the keys you want to change.

What you can customize

You can override most shopper-facing text, including:

• Button labels
• Bundle summary labels
• Cross-sell headings
• Validation and helper messages
• Filter labels
• Frequency and delivery messaging
• Accessibility labels (ARIA text)

Required format

Your custom translations must use this structure:

{
  [locale]: {
    [translation_key]: "custom value"
  }
}

Example locale codes

• en — English
• es — Spanish
• fr — French

Update Custom Liquid section in your theme files

Add the following code inside your Custom Liquid section, before the widget script initializes:

<script>
  window.StorefrontBundlingWidget = window.StorefrontBundlingWidget || {};
  window.StorefrontBundlingWidget.customTranslations = {
    en: {
      general_add_to_cart: 'Add now',
      cross_sells_title: 'Treat yourself: add extras',
      bundle_summary_label: 'Your bundle summary',
    },
    es: {
      general_add_to_cart: 'Agregar',
    },
  };
</script>

Available translation keys

Below is the full list of supported translation keys and their default values.

General & frequency

Selection status

Product & collection selection

Bundle summary

Pricing

Learn more modal (accessibility)

Availability & ARIA labels

Units & delivery frequency

Panel titles & errors

Tiered discounts

Cross-sells

Selection validation errors

Filters

Important tips

• Add customTranslations before the widget loads.
• Keep placeholders exactly as written (examples: {count}, {price}, {title}, <price/>).
• Use string values only.
• Start small: override 1–3 keys, test, then add more.

Checklist for rolling out bundle widget text changes

Use this checklist to safely roll out text updates to your storefront:

1. Identify the exact text you want to update.
2. Document the corresponding translation keys and your new values.
3. Share the finalized key/value changes with your developer or agency.
4. Implement the updates in a staging or unpublished theme first.
5. Review the widget in your storefront and confirm all text appears as expected.
6. Publish the updated theme to production once verified.

Troubleshooting

I changed the text, but nothing updated

• Make sure your translation script loads before the widget script.
• Double-check that the key names match exactly (including underscores).
• Confirm you are editing the correct locale (en, es, etc.).

Some text updated, but some did not

• Check for typos in the translation keys.
• Make sure the keys you’re trying to override are included in your script.
• Confirm all values are wrapped in quotation marks (strings).

The text looks broken or formatted incorrectly

• Make sure placeholders were not changed (for example: {count}, {price}, {title}, <price/>).
• Check for missing quotation marks or extra commas.
• Validate that your script syntax is correct.