Translate BYOB bundle builder elements

Some text displayed in the Build Your Own Bundle interface is not currently translated by Shopify’s native translation tools or apps such as Translate & Adapt. This customization translates those labels according to the active storefront language.

The provided snippet already includes the BYOB interface labels covered by this customization. You only need to update the language code and translated text values.

Before you start

Create a duplicate of your live theme before making any code changes:

1. In Shopify admin, go to Online Store > Themes.
2. Find your live theme.
3. Click the three-dot menu.
4. Select Duplicate.
5. Complete the installation on the duplicated theme.
6. Preview and test the duplicated theme before publishing it.

The BYOB app embed must also be enabled in the theme for the Build Your Own Bundle interface to appear.

Step 1: Add the translation snippet

1. In Shopify admin, go to Online Store > Themes.
2. Find the duplicated theme.
3. Click the three-dot menu and select Edit code.
4. Open the Snippets folder.
5. Click Add a new snippet.
6. Name the snippet:

sb-byob-translations.liquid

7. Paste the complete translation snippet here.
8. Click Save.

Step 2: Load the snippet on product pages

1. In the theme code editor, open the Layout folder.
2. Open theme.liquid      .
3. Scroll to the bottom of the file.
4. Find the closing </body>       tag.
5. Add the following code immediately above it:

{% if template.name == 'product' %}  
  {% render 'sb-byob-translations' %} 
{% endif %}

6. Click Save.

The snippet will now be loaded on product pages. It will only apply translations when the active storefront language has a matching configuration and the BYOB interface is present.

Step 3: Configure your translations

The translationConfigs       section at the top of the snippet controls the storefront translations.

The following German configuration can be used as your example. It already contains the translation for all labels and buttons:

const translationConfigs = {   
        de: [
            // Product/component action buttons.
            // Includes Select, Added, Add, Out of stock,
            // and the maximum quantity message.
            {
                selector: '.byob-cta',
                replacements: [
                    {
                        originalText: 'Select',
                        translatedText: 'Auswählen'
                    },
                    {
                        originalText: 'Added',
                        translatedText: 'Hinzugefügt'
                    },
                    {
                        originalText: 'Add',
                        translatedText: 'Hinzufügen'
                    },
                    {
                        originalText: 'Out of stock',
                        translatedText: 'Nicht auf Lager'
                    },
                    {
                        originalText: 'Max quantity added',
                        translatedText: 'Max hinzugefügte Menge'
                    }
                ]
            },

            // Remove button shown for a product already added to the bundle.
            {
                selector: '.byob-resource__remove-text',
                replacements: [
                    {
                        originalText: 'Remove',
                        translatedText: 'Entfernen'
                    }
                ]
            },

            // "Add a product" title shown in the bundle builder.
            {
                selector: '.byob-resource__title',
                replacements: [
                    {
                        originalText: 'Add a product',
                        translatedText: 'Produkt hinzufügen'
                    }
                ]
            },

            // Bundle mini-cart and Add to Cart area.
            // Includes the remaining product count, Add bundle to cart,
            // and Added to cart confirmation.
            {
                selector: '.byob-mini-cart__checkout',
                replacements: [
                    {
                        textPattern: /Add (\d+) more/g,
                        translatedText: 'Noch $1 hinzufügen'
                    },
                    {
                        originalText: 'Added to cart',
                        translatedText: 'Zum Warenkorb hinzugefügt'
                    },
                    {
                        originalText: 'Add bundle to cart',
                        translatedText: 'Bundle zum Warenkorb hinzufügen'
                    }
                ]
            },

            // Product details link shown inside the BYOB product options modal.
            {
                selector: '.byob-options-modal__details-link',
                replacements: [
                    {
                        originalText: 'See full details',
                        translatedText: 'Alle Details anzeigen'
                    }
                ]
            }
        ]
};

Quick option: Generate translations with an AI assistant

You can use an AI assistant to add one or more languages to your existing translationConfigs     object.

Replace [LANGUAGES]     in the prompt below with the languages you want to add, for example French, Spanish, and Italian    , then paste your current configuration or the German language configuration object above.

Add the following languages to my Simple Bundles BYOB `translationConfigs` object:

[LANGUAGES]

Please follow these instructions carefully:

* Preserve all existing language configurations exactly as they are.
* Do not remove, replace, or modify any languages already included in the object.
* Add a new configuration only for each requested language that is not already present.
* Use the correct two-letter ISO language code as the property name for each new language, for example `fr` for French or `es` for Spanish.
* Duplicate the complete translation structure from an existing language configuration for each new language.
* Translate only the `translatedText` values.
* Keep every `selector` unchanged.
* Keep every `originalText` unchanged.
* Keep every `textPattern` unchanged.
* Preserve `$1` exactly wherever it appears, placing it appropriately in the translated sentence.
* Preserve the JavaScript structure, comments, brackets, commas, and formatting.
* Do not add or remove translation entries.
* Use natural storefront wording appropriate for ecommerce rather than overly literal translations.
* Return the complete updated `translationConfigs` object, including both the existing languages and the newly added languages.
* Return only the JavaScript configuration, without explanations before or after it.

Here is my current configuration:

[PASTE YOUR translationConfigs OBJECT HERE]

After the AI assistant generates the additional language configurations, you can review and fine-tune any translation by updating its translatedText     value.

For example:

{
  originalText: 'Select',
  translatedText: 'Sélectionner'
}

You can change only:

translatedText: 'Your preferred translation'

Leave originalText    , selector    , textPattern    , and any $1     placeholders unchanged..

Manual option: How to build the configuration object with translations

Each translation configuration begins with a two-letter language code:

de: [

In this example, de       is the language code for German.

The script checks the active storefront language and uses the configuration with the matching language code.

Some common examples are:

de = German
fr = French
es = Spanish
it = Italian
nl = Dutch

If you want to translate the BYOB interface into French, for example, you would change:

de: [

to:

fr: [

and then replace the German translatedText       values with your French translations.

Update the translated text

For most entries, you only need to change translatedText      .

For example:

{
  originalText: 'Select',
  translatedText: 'Auswählen'
}

originalText       is the text generated by the BYOB interface.

translatedText       is the text your customers will see.

If you are creating a French translation, you could change it to:

{
  originalText: 'Select',
  translatedText: 'Sélectionner'
}

Leave originalText       unchanged so the script can identify the original BYOB text.

You should also leave the selector       values unchanged. These tell the script which part of the BYOB interface each group of translations belongs to.

Dynamic quantity message

One translation is slightly different:

{
  textPattern: /Add (\d+) more/g,
  translatedText: 'Noch $1 hinzufügen'
}

This handles messages where the number changes, such as:

Add 1 more
Add 2 more
Add 3 more

The $1       in the translation represents that number.

For example:

Add 3 more

becomes:

Noch 3 hinzufügen

When translating this message into another language, keep $1       where you want the number to appear.

For example:

translatedText: 'Ajoutez encore $1'

Leave the textPattern       unchanged.

Add another language

If your store uses more than one language, you can keep the German configuration and add another one.

The easiest way is to duplicate the complete de       configuration, including everything inside its [       and ]      .

For example, you can start with:

const translationConfigs = {
  de: [
    // German configuration
  ]
};

Then duplicate the complete language block and add a comma between the two configurations:

const translationConfigs = {
  de: [
    // German configuration
  ],

  fr: [
    // French configuration
  ]
};

The important parts are:

1. Keep the complete set of selectors and replacement entries for each language.
2. Change the language code, such as de       to fr      .
3. Change only the translatedText       values for the new language.
4. Keep the originalText      , textPattern      , and selector       values unchanged.
5. Add a comma between each language configuration.

For example:

const translationConfigs = {
  de: [
    {
      selector: '.byob-cta',
      replacements: [
        {
          originalText: 'Select',
          translatedText: 'Auswählen'
        }
      ]
    }
  ],

  fr: [
    {
      selector: '.byob-cta',
      replacements: [
        {
          originalText: 'Select',
          translatedText: 'Sélectionner'
        }
      ]
    }
  ]
};

In the actual snippet, duplicate the entire configuration, not just the .byob-cta       example above.

You can add additional languages in the same way:

const translationConfigs = {
  de: [
    // Complete German configuration
  ],

  fr: [
    // Complete French configuration
  ],

  es: [
    // Complete Spanish configuration
  ]
};

When a customer changes the storefront language, the script detects the active language and uses the corresponding configuration.

If there is no configuration for the active storefront language, the script does not apply any translations and the original BYOB text remains unchanged.