How to Translate Product Samples App Text for Multi-Language Shopify Stores

The Product Samples App is built with global shoppers in mind!
If your Shopify store serves customers in more than one language, it’s essential that every message, button, and notification in your app appears in the customer’s preferred language. This ensures a seamless shopping experience and builds trust across markets.

Below is a step-by-step guide to customizing and expanding the app’s language support.

How the App Handles Translations

The Product Samples App uses a simple, flexible JavaScript object called ProductSample.translation to store all the frontend text in different languages. The code automatically detects the store’s current language and loads the appropriate translations.

Example:

{% if localization.language.iso_code == 'en' %}
  ProductSample.translation = { ...English strings... }
{% elsif localization.language.iso_code == 'fr' %}
  ProductSample.translation = { ...French strings... }
{% elsif localization.language.iso_code == 'de' %}
  ProductSample.translation = { ...German strings... }
{% endif %}

How to Add or Update Translations

To add another language (for example, Spanish):

1. Duplicate an existing block
   Copy one of the if/elsif blocks.

2. Change the language code
   For Spanish, use:
   {% elsif localization.language.iso_code == 'es' %}

3. Provide your translations
   Replace the text values inside the object with the Spanish equivalents.

   Example:

   {% elsif localization.language.iso_code == 'es' %}
     ProductSample.translation = {
       "minimum_sample": "La cantidad mínima de muestras es {{ count }}. ¡Agrega más muestras para finalizar la compra!",
       "maximum_sample": "¡Cantidad máxima de muestras alcanzada!",
       "existing_sample": "¡Las muestras ya se han añadido!",
       "button": "Obtener una muestra", ... 
   }

4. Save and deploy
   After adding your translations, save the file and deploy to your store theme.

How to Use Dynamic Variables in Translations

Some strings include variables, such as {{ count }}.
This allows the app to insert dynamic values, so your translations stay accurate and context-aware.
Example:

• "Minimum samples is {{ count }}"
  will show as “Minimum samples is 3” if count is 3.

Tips for Store Owners and Developers

• Test in every language:
  Switch your store language (using Shopify’s built-in selector) and verify all texts update correctly.

• Keep all languages up to date:
  When adding new features/messages to the app, update all language blocks to ensure consistency.

• Fallback:
  If a language is not provided, the app will default to English or the first block. Always provide at least the main language for your audience.

Example: Complete Multi-language Translation Block

Here’s a ready-to-copy pattern supporting English, French and German:

<script type="text/javascript">
  window.ProductSample = window.ProductSample || {};
  if(typeof ProductSample === 'undefined') {
    var ProductSample = {};
  };
  {% if localization.language.iso_code == 'en' %}
    ProductSample.translation = {
      "minimum_sample": "Minimum samples is {{ count }}. Please add more samples to checkout!",
      "maximum_sample": "Maximum samples reached!",
      "existing_sample": "Samples is already added!",
      "button": "Get a Sample",
      "button_adding": "Adding Sample",
      "box_title": "SAMPLE PRODUCTS",
      "box_description": "A <strong>risk-free way to try a new product</strong> without wasting too much money on it.",
      "box_item_placeholder": "Samples",
      "box_button": "Checkout",
      "box_processing_button": "Processing",
      "box_redirecting_button": "Redirecting",
      "box_trigger": "My Sample",
      "modal_text": "Please <a href=\"/account/login?sources=product-samples-app\">login</a> or <a href=\"/account/register?sources=product-samples-app\">register</a> to continue!",
      "properties_key": "Sample of"
    }
  {% elsif localization.language.iso_code == 'fr' %}
    ProductSample.translation = {
      "minimum_sample": "Le nombre minimum d'échantillons est de {{ count }}. Veuillez ajouter plus d'échantillons pour passer à la caisse !",
      "maximum_sample": "Nombre maximum d'échantillons atteint !",
      "existing_sample": "Les échantillons sont déjà ajoutés !",
      "button": "Obtenez un échantillon",
      "button_adding": "Ajout de l'échantillon",
      "box_title": "PRODUITS D'ÉCHANTILLON",
      "box_description": "Un <strong>moyen sans risque d'essayer un nouveau produit</strong> sans dépenser trop d'argent.",
      "box_item_placeholder": "Échantillons",
      "box_button": "Passer à la caisse",
      "box_processing_button": "Traitement en cours",
      "box_redirecting_button": "Redirection en cours",
      "box_trigger": "Mon Échantillon",
      "modal_text": "Veuillez <a href=\"/account/login?sources=product-samples-app\">vous connecter</a> ou <a href=\"/account/register?sources=product-samples-app\">vous inscrire</a> pour continuer !",
      "properties_key": "Échantillon de"
    }
  {% elsif localization.language.iso_code == 'de' %}
    ProductSample.translation = {
      "minimum_sample": "Die Mindestanzahl an Proben beträgt {{ count }}. Bitte fügen Sie mehr Proben hinzu, um zur Kasse zu gehen!",
      "maximum_sample": "Maximale Anzahl an Proben erreicht!",
      "existing_sample": "Proben sind bereits hinzugefügt!",
      "button": "Ein Muster erhalten",
      "button_adding": "Muster wird hinzugefügt",
      "box_title": "PRODUKTMUSTER",
      "box_description": "Eine <strong>risikofreie Möglichkeit, ein neues Produkt auszuprobieren</strong>, ohne zu viel Geld dafür auszugeben.",
      "box_item_placeholder": "Proben",
      "box_button": "Zur Kasse",
      "box_processing_button": "Verarbeitung",
      "box_redirecting_button": "Weiterleitung",
      "box_trigger": "Mein Muster",
      "modal_text": "Bitte <a href=\"/account/login?sources=product-samples-app\">einloggen</a> oder <a href=\"/account/register?sources=product-samples-app\">registrieren</a>, um fortzufahren!",
      "properties_key": "Muster von"
    }
  {% endif %}
</script>

Need More Languages?

Just add another {% elsif localization.language.iso_code == 'xx' %} block for each language you want to support.

By following this pattern, you can make your Product Samples App accessible and friendly for all your customers, anywhere in the world!

Tip:
If you need help with high-quality translations, consider using professional translation services or Shopify’s native language apps to ensure accuracy and tone.