How to translate Infinite Options Bundles in Shopify using Translate & Adapt App

When it comes to managing Infinite Option Bundles in your Shopify store, ensuring they are accurately translated can be crucial for a seamless customer experience. However, native support for translating these bundles directly within Shopify is limited. This guide will walk you through the process of manually setting up translations for Infinite Option Bundles using the Translate & Adapt app.

Prerequisites

Before proceeding, ensure that you have the following prerequisites in place:

• Online Store 2.0
• Simple Bundles 2.0
• Translate & Adapt installed

Manual Setup for Infinite Options (Online Store 2.0)

If you haven't already set up Infinite Options manually, you can refer to this guide for detailed instructions.

Please note that while the steps provided in the guide will translate the options on your storefront, the translated content will not reflect in the cart details or during checkout, remaining in its default language.

Translating Infinite Option Bundles

When using the Translate & Adapt app, you'll notice that Infinite Options bundle types are located in the metafields section.

Other bundle types:

Infinite Options Bundle Type:

Follow these steps to ensure accurate translations:

Step 1: Add Translated Texts to Metafield Content

1. Access the metafield content for Infinite Options bundle types.
2. Add translated texts inside the metafield content, ensuring they are enclosed within double quotes and maintain the original format.

Step 2: Modify Theme Files

1. Navigate to your theme files by going to Online Store > Select your theme > Edit code.
2. Locate the simple-bundles-options.liquid file.

Step 3: Add Script with Translation Mappings

Add the following script to the simple-bundles-options.liquid file:

javascript
<script>
  (function() {
    // Function to map translated values back to default language
    function getOriginalValue(translatedValue) {
      // ============================================
      // ADD YOUR TRANSLATION MAPPINGS HERE
      // ============================================
      if (translatedValue == "Pequeña") {
        return "Small";
      } else if (translatedValue == "Grande") {
        return "Large";
      }
      // Add more mappings as needed...
      return translatedValue;
    }

    function updateHiddenInputValue() {
      var selects = document.querySelectorAll('#{{ div_id }} select');
      var values = [];
      
      selects.forEach(function(select) {
        var selectedOption = select.options[select.selectedIndex];
        if (selectedOption) {
          values.push(getOriginalValue(selectedOption.value));
        }
      });
      
      if (values.length === 0) return;
      
      var hiddenInputValue = values.join(' <> ');
      var hiddenInput = document.querySelector('#{{ div_id }} input[name="properties[_bundle_selection]"]');
      if (!hiddenInput) {
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'properties[_bundle_selection]';
        document.getElementById('{{ div_id }}').appendChild(hiddenInput);
      }
      hiddenInput.value = hiddenInputValue;
    }

    window.addEventListener('pageshow', updateHiddenInputValue);
    document.querySelectorAll('#{{ div_id }} select').forEach(function(select) {
      select.addEventListener('change', updateHiddenInputValue);
    });
  })();
</script>

Sample Code [this will vary depending on your store]:

if(selectedOption.value == "Pequeña"){
  selectedOption.value = "Small"
} else if(selectedOption.value == "Grande"){
  selectedOption.value = "Large"
} else if(selectedOption.value == "Vendaje con muñequera atada - Pequeño"){
  selectedOption.value = "Wrist Band Bandage Strapped - Small"
} else if(selectedOption.value == "Vendaje con muñequera atada - Grande"){
  selectedOption.value = "Wrist Band Bandage Strapped - Large"
}

Once these steps are completed, your Infinite Option Bundles should display the translated content accurately on the storefront, enhancing the user experience for multilingual customers. As mentioned previously, the translations will only take effect on the Product page, and the default language will remain on the cart and checkout page.

Product Page:

Cart: 

Checkout:

If you have any questions, please feel free to contact our team. We would be happy to help you get set up.