Seo Guide

Shopify Multilingual SEO: German, French & Dutch with hreflang

Published June 18, 2026

Shopify Multilingual SEO: German, French & Dutch with hreflang

International shoppers expect a seamless experience in their native language and currency. In this guide we’ll show you how to use SiteLocaleAI to translate a Shopify store into German, French, and Dutch, add proper hreflang tags, and pre‑render pages for search‑engine indexing.

1. Why hreflang Matters

Search engines use the hreflang attribute to understand which language version of a page should be shown to a user. Without it, Google may serve the wrong language, hurting click‑through rates and rankings. For a Shopify store targeting multiple European markets, implementing hreflang correctly is essential for international SEO.

2. Prerequisites

A Shopify store (any theme works).
API keys for your preferred LLM (e.g., Claude, GPT‑4o‑mini) – SiteLocaleAI is self‑hosted, so you keep the keys.
Node.js installed locally for the CLI (optional if you prefer the WordPress plugin route).
Access to your store’s theme files or a custom app where you can inject the SiteLocaleAI script.

3. Install the SiteLocaleAI JS Library

Add the library to your theme’s layout/theme.liquid (or any global layout file). The script is framework‑agnostic, so it works with Shopify’s Liquid templates.

<!-- Load SiteLocaleAI -->
<script src="https://cdn.sitelocaleai.com/v1/site-locale.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',
    rounding: true // enable psychological price rounding
  });
</script>

The library automatically translates visible text on the page and rewrites price elements using the configured rounding rules.

4. Translate Product Pages Dynamically

Wrap product titles, descriptions, and price elements in a data-sitelocale attribute. SiteLocaleAI will replace the innerHTML with the translated version on page load.

<h1 data-sitelocale="product-title">{{ product.title }}</h1>
<p data-sitelocale="product-description">{{ product.description }}</p>
<span class="price" data-sitelocale="price">{{ product.price | money }}</span>

When a visitor selects a language (via a simple dropdown you can add), the library swaps the content instantly, without a full page reload.

5. Generate hreflang Tags Automatically

SiteLocaleAI can emit the correct <link rel="alternate" hreflang="..."> tags for each product page. Add the following snippet to the <head> of your theme:

{% assign langs = "en,de,fr,nl" | split: ',' %}
{% for lang in langs %}
  <link rel="alternate" hreflang="{{ lang }}" href="{{ shop.url }}{{ product.url }}?lang={{ lang }}" />
{% endfor %}

The ?lang= query parameter tells the JS library which language to render. Google will crawl each URL and index the localized version.

6. SEO Pre‑Rendering with the CLI

Dynamic translation is great for users, but search bots may not execute JavaScript. SiteLocaleAI’s CLI can pre‑render static HTML for each language, ensuring full indexing.

# Install the CLI globally
npm i -g site-locale-cli

# Run pre‑rendering for the three target languages
site-locale pre-render \
  --url https://yourstore.myshopify.com/products/* \
  --langs de,fr,nl \
  --output ./prerendered

The CLI crawls every product page, renders the translated HTML, and writes static files to ./prerendered. You can then host these files on a CDN or configure Shopify’s static asset serving to serve them to bots.

7. Price Localization & Psychological Rounding

SiteLocaleAI applies currency‑specific rounding (e.g., €9.99 → €9.95) to make prices feel more natural. The rounding rule is enabled by the rounding: true flag in the init config. You can also customize rounding per currency in the locale-config.json file:

{
  "de": { "currency": "EUR", "round": 0.05 },
  "fr": { "currency": "EUR", "round": 0.05 },
  "nl": { "currency": "EUR", "round": 0.05 }
}

8. Testing & Validation

Manual Test – Switch languages on a product page and verify that titles, descriptions, and prices update instantly.
Google Search Console – Use the URL Inspection tool on each ?lang= URL to confirm that Google sees the correct hreflang tags.
Lighthouse – Run an audit to ensure the page loads fast; SiteLocaleAI’s parallel token generation keeps latency low.

9. Internal Resources

Detailed integration steps: https://sitelocaleai.com/docs/js-library
SEO pre‑rendering guide: https://sitelocaleai.com/docs/seo-cli

10. Launch Checklist

[ ] Add SiteLocaleAI script and init config.
[ ] Wrap all user‑facing text with data-sitelocale.
[ ] Insert hreflang link tags in the <head>.
[ ] Run the CLI to pre‑render language pages.
[ ] Submit the sitemap with language‑specific URLs to Google Search Console.
[ ] Monitor traffic and rankings for the new locales.

Ready to go global?

With SiteLocaleAI you can launch German, French, and Dutch versions of your Shopify store in minutes, keep your LLM keys private, and boost international SEO without a heavy engineering effort. Try SiteLocaleAI today and watch your global sales grow!

Back to blog