Tutorial

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

Published March 15, 2026

Translating a Shopify Store to German, French & Dutch with SiteLocaleAI

Published on SiteLocaleAI.com

Why go multilingual?

International shoppers expect a seamless experience in their native language and currency. By offering German, French, and Dutch versions of your product pages you:

Increase conversion rates with psychological price rounding per currency.
Boost organic traffic through hreflang‑aware SEO.
Keep full control of your LLM API keys – no third‑party data leakage.

SiteLocaleAI makes this possible with a drop‑in, framework‑agnostic JavaScript library that works on any Shopify theme.

1️⃣ Install the SiteLocaleAI script

Add the following snippet to the <head> of your theme.liquid (or any layout file that loads on every page):

<script src="https://cdn.sitelocaleai.com/v1/siteLocaleAI.min.js"></script>
<script>
  // Initialise SiteLocaleAI – replace with your own LLM API key
  const localeAI = new SiteLocaleAI({
    apiKey: 'YOUR_LLM_API_KEY',
    // Languages you want to support (ISO 639‑1 codes)
    languages: ['de', 'fr', 'nl'],
    // Optional: custom rounding rules per currency
    priceRounding: {
      EUR: 0.99, // €9.99, €19.99 …
      USD: 0.95, // $9.95, $19.95 …
    },
  });
</script>

No Node.js or build step is required – the script works on any Shopify theme, whether it’s built with Liquid, React, or Vue.

2️⃣ Markup your product content for translation

SiteLocaleAI looks for HTML elements with a data-locale attribute. Wrap the parts you want translated:

<h1 data-locale="product-title">{{ product.title }}</h1>
<p data-locale="product-description">{{ product.description }}</p>
<span data-locale="product-price" data-currency="{{ product.price | money_without_currency }}">
  {{ product.price | money }}
</span>

When a visitor selects a language, SiteLocaleAI swaps the inner text with the LLM‑generated translation and applies the rounding rules you defined.

3️⃣ Add hreflang tags automatically

Search engines need explicit language signals. Insert the following helper in the <head> of theme.liquid. It reads the current URL and injects the correct <link rel="alternate" hreflang="…"> tags for each supported language.

{% assign base_url = shop.url | append: request.path %}
{% for lang in "de,fr,nl" | split: "," %}
  <link rel="alternate" hreflang="{{ lang }}" href="{{ base_url }}?lang={{ lang }}" />
{% endfor %}
<link rel="alternate" hreflang="x-default" href="{{ base_url }}" />

Now Google and Bing will index each language version separately, improving international SEO.

4️⃣ Pre‑render translated pages for crawlers (CLI)

While the JS library works for browsers, search bots often ignore client‑side rendering. SiteLocaleAI ships a CLI tool that pre‑renders static HTML for every language, which you can serve via Shopify’s static folder or a CDN.

# Install the CLI globally (requires Node >=18)
npm i -g siteLocaleAI-cli

# Run pre‑rendering for the three languages
npx siteLocaleAI pre-render \
  --output ./pre-rendered \
  --langs de,fr,nl \
  --apiKey YOUR_LLM_API_KEY

The command fetches each product page, runs the LLM translation, applies price rounding, and writes the resulting HTML to ./pre-rendered. Upload these files to a static bucket and point your Shopify theme’s {{ 'pre-rendered' | asset_url }} to them for bots.

Tip: Add a robots.txt rule that serves the pre‑rendered files to User‑Agent: * and the dynamic JS version to regular browsers.

5️⃣ Test the implementation

Switch language – Append ?lang=de, ?lang=fr, or ?lang=nl to any product URL. Verify that titles, descriptions, and prices appear correctly.
Check hreflang – Use Chrome DevTools > Elements to confirm the <link rel="alternate"> tags.
Validate SEO – Run the page through Google’s Rich Results Test or URL Inspection to ensure the pre‑rendered HTML is being indexed.

6️⃣ Going further

Dynamic language selector – Add a simple dropdown that updates window.location.search with ?lang=.
Cache translations – SiteLocaleAI caches LLM responses for 24 h by default; you can tune this in the init options.
Analytics – Track language switches with your existing analytics provider to see conversion lift.

For a deeper dive, see the full documentation:
- [SiteLocaleAI Docs – Getting Started]https://sitelocaleai.com/docs)
- [CLI Reference]https://sitelocaleai.com/docs/cli)

🎉 Ready to launch?

With just a few lines of code you’ve turned a single‑language Shopify store into a fully localized, SEO‑friendly e‑commerce powerhouse. Try SiteLocaleAI today – spin up a free Indie plan, plug in your LLM key, and watch your international traffic grow.

Happy selling!

Back to blog