Translate Your Shopify Store to German, French & Dutch with SiteLocaleAI

Published on 2026‑10‑28 ---

International shoppers expect a seamless experience in their native language, and Google gives a ranking boost when you serve fully translated pages with correct hreflang tags. In this tutorial we’ll walk through adding German, French, and Dutch translations to a Shopify store using SiteLocaleAI, a self‑hosted JavaScript library that works with any LLM API (Claude, GPT‑4o‑mini, etc.).

1. Prerequisites

• A Shopify store (any plan).
• API keys for your favourite LLM (e.g., OPENAI_API_KEY).
• Access to the store’s theme files (Online Store → Themes → Edit code).
• Optional: the SiteLocaleAI CLI installed locally for SEO pre‑rendering.

2. Install the SiteLocaleAI JavaScript Library

SiteLocaleAI is framework‑agnostic, so you can drop it into any Shopify theme.

<!-- In theme.liquid, just before </head> -->
<script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>
<script>
  // Initialise with your LLM endpoint and target languages
  SiteLocaleAI.init({
    apiKey: "{{ shop.metafields.custom.openai_api_key }}",
    languages: ["de", "fr", "nl"], // German, French, Dutch
    defaultLanguage: "en",
    // Enable price rounding per currency
    priceRounding: true,
    // Optional: custom translation prompts
    promptTemplate: "Translate the following text to {lang} while preserving HTML tags."
  });
</script>

Tip: Store the API key in a Shopify metafield (or secret) so it never appears in the source code.

3. Translate Product Data on the Fly

Shopify exposes product data via the {{ product }} Liquid object. Wrap any text you want translated with the {{ 'text' | locale }} filter provided by SiteLocaleAI.

<h1>{{ product.title | locale }}</h1>
<p>{{ product.description | locale }}</p>

<!-- Price conversion & rounding -->
<p class="price">
  {{ product.price | money_without_currency | locale_price: product.currency }}
</p>

The locale_price filter automatically converts the price to the visitor’s currency and applies psychological rounding (e.g., €9.99 → €10.00).

4. Generate Static Translated Pages for SEO

Search engines can’t execute JavaScript during indexing, so we’ll pre‑render the translated pages using the SiteLocaleAI CLI.

# Install the CLI globally (Node.js is only needed for the build step)
npm i -g site-locale-cli

# Run the pre‑render for the three languages
site-locale-cli render \
  --url https://yourstore.myshopify.com \
  --languages de,fr,nl \
  --output ./pre_rendered

The CLI crawls the store, fetches product JSON, translates it with your LLM, and writes static HTML files to ./pre_rendered. Upload these files to a CDN or serve them via a simple Express server. Google will now index the fully translated pages.

5. Add hreflang Tags

Place the following snippet in the <head> of theme.liquid. It reads the current language from the URL (e.g., /de/, /fr/, /nl/) and outputs the correct hreflang links.

{% assign languages = "en,de,fr,nl" | split: "," %}
{% for lang in languages %}
  <link rel="alternate" hreflang="{{ lang }}" href="{{ shop.url }}{% if lang != 'en' %}/{{ lang }}{% endif %}{{ request.path }}" />
{% endfor %}

Google will now understand which URL serves which language, preventing duplicate‑content penalties.

6. WordPress‑Style Plugin Alternative (No Node.js)

If you prefer a zero‑code approach, SiteLocaleAI also offers a Shopify‑compatible app that injects the same library and handles hreflang automatically. Install it from the Shopify App Store, paste your LLM API key, and enable the three languages. The app creates a hidden locale field on every product, so the same Liquid filters work out‑of‑the‑box.

7. Test Your Implementation

1. Manual test – Append /de/, /fr/, /nl/ to any product URL and verify the text and prices change.
2. Google Search Console – Submit the new language URLs under International Targeting → Hreflang.
3. Lighthouse – Run an audit to ensure the pages are fully rendered (no “#text” placeholders).

8. Performance & Cost Considerations

• Self‑hosted: You pay only for LLM usage (per‑token). No hidden SaaS fees.
• Parallel translation: SiteLocaleAI’s diffusion‑based approach can translate multiple product fields in a single request, reducing latency.
• Caching: The library caches translations in localStorage for repeat visitors, cutting API calls by ~80%.

9. Next Steps

• Add a language selector to the theme header using the SiteLocaleAI.switchLanguage('fr') method.
• Use the price localization feature to display region‑specific tax and shipping estimates.
• Explore the SEO pre‑rendering CLI for blog posts and collection pages.

---

Ready to make your Shopify store truly global? Try SiteLocaleAI today and watch your international traffic and sales soar. Visit the documentation for deeper integration tips, or start a free trial on the pricing page.