Tutorial

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

Published August 29, 2026

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

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

Published on SiteLocaleAI Blog

International shoppers expect a seamless experience in their native language and currency. With SiteLocaleAI, you can turn any Shopify store into a multilingual, SEO‑optimized site without rewriting your theme or relying on third‑party SaaS. This tutorial shows how to add German, French, and Dutch translations, inject proper hreflang tags, and pre‑render pages for search engines.

1. Prerequisites

  • A Shopify store (any plan) with admin access.
  • API keys for the LLM you want to use (e.g., Claude, GPT‑4o‑mini). SiteLocaleAI never stores your keys.
  • Node ≥ 14 for the optional CLI (the library itself runs in the browser, no Node required for the store).
  • Basic familiarity with editing Shopify theme files (Liquid) or using the Online Store > Themes > Edit code editor.

2. Install the SiteLocaleAI JavaScript library

SiteLocaleAI is a drop‑in, framework‑agnostic script. Add it to your theme’s theme.liquid right before the closing </head> tag:

<!-- SiteLocaleAI – multilingual translation -->
<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
<script>
  // Initialize with your LLM API key and target languages
  SiteLocaleAI.init({
    apiKey: "YOUR_LLM_API_KEY",
    languages: ["de", "fr", "nl"], // German, French, Dutch
    defaultLanguage: "en",
    // Enable price localization with psychological rounding
    priceLocalization: {
      enabled: true,
      rounding: "psychological" // e.g., €9.99 instead of €10.00
    }
  });
</script>

The library automatically scans the DOM, translates visible text, and rewrites price elements that have the class price. No theme rebuild is required.

3. Markup for price localization

Wrap any price you want localized in a <span> with the price class and a data-currency attribute:

<span class="price" data-currency="USD">$49.99</span>

When a German visitor lands on the page, SiteLocaleAI will replace the text with something like „€44,99“ (rounded psychologically). The same logic applies for French (€) and Dutch (Euro) currencies.

4. Adding hreflang tags for SEO

Search engines need to know which language version of a page to serve. SiteLocaleAI provides a helper function that returns the correct URL for each language. Insert the following snippet in theme.liquid after the <head> tag:

{% comment %} Generate hreflang tags for each language {% endcomment %}
{% assign base_url = shop.url %}
{% assign path = request.path %}
{% for lang in "en,de,fr,nl" | split: "," %}
  {% if lang == "en" %}
    <link rel="alternate" hreflang="x-default" href="{{ base_url }}{{ path }}" />
    <link rel="alternate" hreflang="en" href="{{ base_url }}{{ path }}" />
  {% else %}
    <link rel="alternate" hreflang="{{ lang }}" href="{{ base_url }}/{{ lang }}{{ path }}" />
  {% endif %}
{% endfor %}

This Liquid loop creates a set of <link rel="alternate"> tags for English (default), German, French, and Dutch. When a visitor accesses /de/products/awesome‑shirt, the hreflang="de" tag points to that URL, and the LLM will render the page in German.

5. Pre‑rendering translated pages for crawlers (SEO CLI)

While the JavaScript approach works for browsers, search bots may not execute the script. SiteLocaleAI ships a CLI that pre‑renders static HTML for each language, ensuring full indexing.

5.1 Install the CLI globally

npm install -g sitelocaleai-cli

5.2 Generate static snapshots

Run the CLI from your theme directory. It will fetch each product page, translate it, and write the output to dist/<lang>/.

sitelocaleai render \
  --api-key YOUR_LLM_API_KEY \
  --languages de,fr,nl \
  --output ./dist \
  --url https://yourstore.myshopify.com

The CLI respects the same priceLocalization settings defined in the JS init. After rendering, upload the dist folder to a CDN or host it on a sub‑directory of your Shopify store (e.g., using the Shopify Files feature).

5.3 Tell Google about the pre‑rendered URLs

Add a sitemap.xml entry for each language version. The CLI can generate a sitemap automatically:

sitelocaleai sitemap --output ./dist/sitemap.xml

Upload the sitemap via Google Search Console → Sitemaps.

6. Optional: WordPress‑style plugin for Shopify

If you prefer a no‑code approach, SiteLocaleAI offers a Shopify app that injects the script and configures hreflang tags without touching Liquid. The app is essentially a wrapper around the same library, but the manual method above gives you full control and works on any custom theme.

7. Test your implementation

  1. Language switcher – Add a simple dropdown that calls SiteLocaleAI.switchLanguage('de') (or fr, nl).
  2. Inspect the source – Use Chrome DevTools → View source on a translated URL; you should see the translated HTML, not just the original English.
  3. Check hreflang – Run https://search.google.com/structured-data/testing-tool and verify that each language version has the correct hreflang tags.
  4. Price rounding – Confirm that prices appear as €44,99 (German) or €44,99 (French/Dutch) rather than a flat €45.

8. Next steps & resources

9. Conclusion

By following these steps you’ve turned a single‑language Shopify store into a multilingual, SEO‑ready shop that speaks German, French, and Dutch, shows locally‑rounded prices, and serves fully pre‑rendered pages to search engines. The combination of a lightweight JS library, a powerful CLI, and automatic hreflang handling means you spend less time on engineering and more time on growth.

Ready to go global? Try SiteLocaleAI today and watch your international sales soar! 🚀

Back to blog