Tutorial

Translate Shopify Store to German, French & Dutch

Published March 11, 2026

Translate Shopify Store to German, French & Dutch

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

International shoppers are a huge growth opportunity for Shopify merchants. In this step‑by‑step tutorial we’ll add hreflang tags, translate product pages, and localize prices for German (de), French (fr) and Dutch (nl) using the SiteLocaleAI self‑hosted JavaScript library.

1️⃣ Prerequisites

  • A Shopify store (any plan) with at least one product.
  • Access to an LLM API key (Claude, GPT‑4o‑mini, etc.).
  • A small Node.js environment for the CLI (optional, for SEO pre‑rendering).
  • The SiteLocaleAI npm package (or the CDN bundle) – see the official docs.

2️⃣ Install the SiteLocaleAI library

SiteLocaleAI works everywhere because it’s just a plain JS file. You can either:

a) Use the CDN (quick start)
html
<script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>

b) Install via npm for a build pipeline
bash
npm i site-locale

Then import it in your theme’s theme.liquid (or a custom snippet):
js
import SiteLocaleAI from 'site-locale';

3️⃣ Configure the library

Create a tiny configuration object that tells SiteLocaleAI which languages to support, which LLM to call, and how to round prices.

const localeConfig = {
  // Languages you want to serve
  languages: ['de', 'fr', 'nl'],

  // Your LLM API key – keep it secret on the server side
  apiKey: '{{ shop.metafields.site_localeai.lm_key }}',

  // Psychological rounding per currency (e.g., €9.99 → €9.95)
  priceRounding: {
    EUR: (price) => Math.round(price * 20) / 20, // nearest 0.05€
    USD: (price) => Math.round(price * 10) / 10, // nearest 0.10$
  },

  // Optional: custom prompt to improve translation quality
  prompt: (text, lang) => `Translate the following Shopify product description to ${lang} while keeping HTML tags intact:\n\n${text}`
};

// Initialise the library
SiteLocaleAI.init(localeConfig);

Tip: Store the API key in a Shopify metafield or a server‑side environment variable; never expose it in client‑side code.

4️⃣ Add hreflang tags automatically

Search engines need <link rel="alternate" hreflang="…"> tags for each language version. SiteLocaleAI can inject them for you.

SiteLocaleAI.on('pageReady', () => {
  const url = new URL(window.location.href);
  const basePath = url.pathname.replace(/\/de$/, '');

  localeConfig.languages.forEach(lang => {
    const href = `${url.origin}${basePath}?lang=${lang}`;
    const link = document.createElement('link');
    link.rel = 'alternate';
    link.hreflang = lang;
    link.href = href;
    document.head.appendChild(link);
  });
});

Place this snippet in a theme asset (e.g., locale-tags.liquid) and include it right after the SiteLocaleAI script.

5️⃣ Translate product pages on the fly

SiteLocaleAI intercepts any element with the data-locale attribute and replaces its innerHTML with the translated version.

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

When a visitor lands on ?lang=de, the library calls the LLM, caches the result in localStorage, and swaps the content instantly.

6️⃣ Pre‑render translations for SEO (CLI)

While on‑the‑fly translation is great for users, crawlers benefit from static HTML. SiteLocaleAI ships a CLI that pre‑renders each language version and writes them to the public folder.

npx site-locale-cli \
  --input ./src/templates/product.liquid \
  --output ./dist \
  --languages de,fr,nl \
  --api-key $SITELOCALEAI_KEY

The CLI:
1. Renders the Liquid template with a dummy product.
2. Calls the LLM for each language.
3. Writes product.de.html, product.fr.html, etc.
4. Generates a sitemap entry with the correct hreflang URLs.

Upload the generated files to your Shopify store via the Theme Kit or Shopify CLI.

7️⃣ Localize prices with psychological rounding

SiteLocaleAI’s priceRounding function runs after the translation step. Here’s a quick helper you can drop into your theme:

function formatPrice(amount, currency) {
  const roundFn = localeConfig.priceRounding[currency] || ((p) => p);
  const rounded = roundFn(amount);
  return new Intl.NumberFormat('de-DE', { style: 'currency', currency }).format(rounded);
}

// Example usage in a Liquid snippet
{% assign price = product.price | divided_by: 100 %}
<span data-locale="product-price" data-currency="EUR">
  <script>
    document.write(formatPrice({{ price }}, 'EUR'));
  </script>
</span>

Now German shoppers see €9.95 instead of €9.99, French shoppers see €9.95, and Dutch shoppers see €9.95 – all while keeping the conversion accurate.

8️⃣ Test everything

  1. Local test – open your store in a private window, append ?lang=de, and verify the text, price, and hreflang tags.
  2. Google Search Console – submit the new sitemap and check the International Targeting report for any hreflang errors.
  3. Speed check – because the library is client‑side, page weight stays low. Use Lighthouse to confirm a good Core Web Vitals score.

9️⃣ Deploy

Once you’re happy, push the updated theme to production. If you used the CLI pre‑render, upload the static files as a Shopify Section or host them on a CDN and point the canonical tag to the language‑specific URL.

🎉 Wrap‑up

You now have a fully multilingual Shopify store that:
- Serves German, French, and Dutch pages with correct hreflang tags.
- Translates product titles, descriptions, and UI strings on the fly using your own LLM API key.
- Applies psychological price rounding per currency.
- Offers SEO‑friendly static pages via the SiteLocaleAI CLI.

Ready to go global?

Try SiteLocaleAI today – sign up for the $5 Indie plan, grab your API key, and start translating in minutes. Visit the documentation for deeper integration tips and join the community of merchants scaling internationally.

Back to blog