Tutorial

Translate Store to German, French & Dutch with SiteLocaleAI

Published October 3, 2026

Translate Store to German, French & Dutch with SiteLocaleAI

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

Published on SiteLocaleAI Blog

Estimated read time: 7 minutes

Why multilingual Shopify?

A multilingual storefront opens doors to new markets, boosts conversion rates, and improves SEO. Google’s algorithm prefers language‑specific pages indexed with proper hreflang tags, and shoppers are more likely to buy when prices are shown in familiar formats and rounded psychologically (e.g., €9,99 → €10).

SiteLocaleAI gives you a drop‑in, framework‑agnostic JavaScript library that runs on any Shopify theme, lets you self‑host using your own LLM API keys, and provides a CLI for SEO pre‑rendering. The result: fully translated product pages, correct hreflang tags, and localized pricing—all without a third‑party SaaS subscription.

Prerequisites

  • A Shopify store (any plan) with at least one product.
  • Access to an LLM API key (Claude, GPT‑4o‑mini, etc.).
  • Node.js (for the CLI) – optional if you only use the script tag.
  • Basic knowledge of Liquid (Shopify’s templating language).

1. Install the SiteLocaleAI library

SiteLocaleAI ships as a single JS file you can host on your server or a CDN. Add the following <script> tag right before the closing </head> in your theme.liquid:

<head>
  ...
  <script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
  <script>
    // Initialise with your LLM key and target languages
    SiteLocaleAI.init({
      apiKey: "YOUR_LLM_API_KEY",
      languages: ["de", "fr", "nl"], // German, French, Dutch
      defaultLanguage: "en",
      priceRounding: true, // enable psychological rounding
      // Optional: custom translation prompts
      translationPrompt: "Translate the following product description, preserving brand tone."
    });
  </script>
</head>

Tip: Keep the API key on the server side and expose it via a short proxy endpoint to avoid leaking it in the client bundle.

2. Translate product data on the fly

Shopify exposes product JSON through the {{ product | json }} filter. Wrap the JSON in a <script type="application/json"> tag so SiteLocaleAI can read it.

<script id="product-data" type="application/json">
  {{ product | json }}
</script>

Then, in a separate script (or the same init block), call the translation API:

document.addEventListener('DOMContentLoaded', async () => {
  const raw = document.getElementById('product-data').textContent;
  const product = JSON.parse(raw);

  // Ask SiteLocaleAI to translate title & description for each language
  const translations = await SiteLocaleAI.translate({
    text: {
      title: product.title,
      description: product.description
    },
    targetLanguages: ["de", "fr", "nl"]
  });

  // Render the appropriate language based on the URL prefix (e.g., /de/)
  const lang = window.location.pathname.split('/')[1]; // simple detection
  if (translations[lang]) {
    document.title = translations[lang].title;
    document.querySelector('.product-title').textContent = translations[lang].title;
    document.querySelector('.product-description').innerHTML = translations[lang].description;
  }
});

Result: When a visitor lands on /de/products/awesome‑shirt, they see the German title and description, and the same logic works for French (/fr/) and Dutch (/nl/).

3. Localize prices with psychological rounding

SiteLocaleAI can convert the base price (stored in your store’s default currency) to the visitor’s currency and apply rounding rules like €9,99 → €10 or $19.95 → $20.

function formatPrice(amount, currency) {
  // SiteLocaleAI provides a helper for rounding
  const rounded = SiteLocaleAI.roundPrice(amount, currency);
  return new Intl.NumberFormat('de-DE', { style: 'currency', currency }).format(rounded);
}

// Example usage inside the product template
const priceEl = document.querySelector('.product-price');
const basePrice = {{ product.price | divided_by: 100.0 }}; // Shopify stores price in cents
const userCurrency = SiteLocaleAI.detectCurrency(); // e.g., "EUR" or "USD"
priceEl.textContent = formatPrice(basePrice, userCurrency);

The detectCurrency method looks at the Accept‑Currency header or the URL prefix you define, ensuring the price always feels natural to the shopper.

4. Generate hreflang tags automatically (CLI pre‑rendering)

Search engines need static hreflang links in the <head> of each page. SiteLocaleAI’s CLI can pre‑render every language version and inject the tags.

# Install the CLI globally (requires Node 18+)
npm i -g @sitelocaleai/cli

# Run the pre‑render for your Shopify theme folder
sitelocaleai prerender \
  --src ./theme \
  --out ./dist \
  --langs de,fr,nl \
  --base-url https://yourstore.myshopify.com

The CLI crawls each product page, fetches translations from your LLM, writes static HTML files to ./dist, and adds the following block to the <head> of every page:

<link rel="alternate" hreflang="de" href="https://yourstore.myshopify.com/de/products/awesome-shirt" />
<link rel="alternate" hreflang="fr" href="https://yourstore.myshopify.com/fr/products/awesome-shirt" />
<link rel="alternate" hreflang="nl" href="https://yourstore.myshopify.com/nl/products/awesome-shirt" />
<link rel="alternate" hreflang="x-default" href="https://yourstore.myshopify.com/products/awesome-shirt" />

Upload the pre‑rendered files to your Shopify theme (or host them on a CDN) and point the storefront to the correct version using a simple redirect rule.

5. Keep the Shopify theme clean – no Node.js on the server

If you prefer the classic Shopify approach without a build step, you can still leverage SiteLocaleAI via the WordPress‑style plugin that only requires the script tag we added earlier. All heavy lifting (translation, rounding, hreflang generation) happens client‑side or via the CLI you run locally.

6. Test, validate, and launch

  1. Crawl the site with Screaming Frog or Ahrefs to verify every product has three language versions and proper hreflang tags.
  2. Check price formatting on each locale (e.g., €10, $20).
  3. Run a quick A/B test on the English version vs. the German version to measure conversion lift.

For a deeper dive, see the official docs:
- [Quickstart guide]https://sitelocaleai.com/docs/quickstart)
- [hreflang configuration]https://sitelocaleai.com/docs/hreflang)

7. Wrap‑up

By following these steps you now have:
- A self‑hosted, LLM‑powered translation layer that respects your brand voice.
- Psychologically rounded prices that feel natural to each market.
- SEO‑ready hreflang tags generated automatically, ensuring Google indexes the right language version.

All of this runs on a drop‑in JavaScript library, so you don’t need to rewrite your Shopify theme or install heavy Node.js services.

Ready to go global?

Try SiteLocaleAI on your Shopify store today and watch international traffic and sales grow. Sign up for the $5 Indie plan or talk to our sales team for a custom Enterprise solution.

Happy translating!

Back to blog