Seo Guide

Shopify Multilingual SEO: German, French & Dutch with hreflang

Published April 27, 2026

Shopify Multilingual SEO Guide: German, French & Dutch with hreflang

International shoppers are a huge revenue source for Shopify merchants. Adding language support for German, French, and Dutch not only improves user experience but also signals to search engines that your store is globally relevant. In this guide we’ll show you how to:

  1. Add a drop‑in SiteLocaleAI JavaScript library to translate content on the fly.
  2. Localize prices with psychological rounding per currency.
  3. Generate SEO‑friendly hreflang tags for each language version.
  4. Pre‑render translated pages for crawlers using SiteLocaleAI’s CLI.
  5. Integrate the WordPress‑style plugin (optional) for headless Shopify setups.

1. Install SiteLocaleAI in Your Shopify Theme

SiteLocaleAI works with any front‑end framework, including Shopify’s Liquid templates. Add the library to your theme’s layout/theme.liquid just before the closing </body> tag:

<script src="https://cdn.sitelocaleai.com/siteLocaleAI.min.js"></script>
<script>
  const locale = new SiteLocaleAI({
    apiKey: 'YOUR_LLM_API_KEY', // e.g., Claude, GPT‑4o‑mini
    defaultLang: 'en',
    supportedLangs: ['de', 'fr', 'nl'],
    priceRounding: true, // enable psychological rounding
    currencyMap: {
      de: 'EUR',
      fr: 'EUR',
      nl: 'EUR'
    }
  });
  locale.init();
</script>

The init() call automatically scans the page for translatable text nodes and replaces them with the LLM‑generated translations. Because the library is framework‑agnostic, it works whether you’re using Shopify’s native theme language or a React‑based storefront.

2. Localize Prices with Psychological Rounding

SiteLocaleAI can rewrite price strings to match local buying psychology (e.g., €9.99 → €9,95). The library detects currency symbols and applies rounding rules defined per locale.

// Example: price element in Liquid
<span class="price" data-price="19.99">$19.99</span>

// SiteLocaleAI will automatically transform it to:
// German: "19,95 €"
// French: "19,95 €"
// Dutch: "19,95 €"

If you need custom rounding, pass a priceFormatter function in the config:

locale.setPriceFormatter((value, locale) => {
  const rounded = Math.floor(value * 20) / 20; // nearest 0.05
  return new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' }).format(rounded);
});

3. Generate hreflang Tags for SEO

Search engines rely on hreflang tags to understand which language version to serve to a user. In Shopify you can inject these tags via Liquid. Create a snippet called hreflang.liquid and include it in theme.liquid inside the <head>.

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

If you use a sub‑directory strategy (/de/, /fr/, /nl/), make sure your Shopify URL redirects are configured accordingly. The href attribute should point to the fully rendered, translated page so that crawlers can index the content.

4. Pre‑render Translated Pages for Crawlers (CLI)

While SiteLocaleAI renders translations client‑side, search bots may miss them. The built‑in CLI can pre‑render static HTML snapshots for each locale, which you can serve to bots via the User‑Agent detection or a robots.txt rule.

# Install the CLI globally (Node.js required only for the build step)
npm i -g @sitelocaleai/cli

# Run pre‑render for the three locales
site-localeai prerender \
  --src ./src \
  --out ./prerendered \
  --langs de,fr,nl \
  --api-key YOUR_LLM_API_KEY

The CLI fetches the original page, runs the LLM translation, and writes static HTML files (de/product‑handle.html, etc.). Deploy these files to a CDN or configure Shopify’s theme to serve them when a bot requests the page.

5. Optional: WordPress‑style Plugin for Headless Shopify

If your Shopify store is headless and you manage content in WordPress, SiteLocaleAI offers a plugin that runs entirely on the server side—no Node.js required. Install it from the WordPress admin, add your LLM API key, and map the Shopify product URLs. The plugin will fetch product data, translate it, and generate SEO‑friendly pages that WordPress serves.

6. Testing & Validation

  1. Google Search Console – Use the International Targeting report to verify hreflang implementation.
  2. Lighthouse – Run an audit for SEO and Performance to ensure the translated pages load quickly.
  3. Manual Check – Append ?lang=de (or fr, nl) to a product URL and confirm the language switch and price rounding.

7. Wrap‑up

By combining SiteLocaleAI’s drop‑in JavaScript library, price rounding, and pre‑render CLI, you can launch a fully localized Shopify store in German, French, and Dutch while keeping SEO health intact. The framework‑agnostic approach means you stay in control of your LLM provider and avoid vendor lock‑in.

Ready to boost your Shopify SEO? Try SiteLocaleAI today and watch your international traffic grow.

Read the full setup guide | Learn more about hreflang handling

Back to blog