Tutorial

Shopify Store: German, French & Dutch with SiteLocaleAI

Published July 3, 2026

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

International shoppers expect a seamless experience: the language, the currency, and even the way prices are rounded should feel native. SiteLocaleAI makes this possible for Shopify merchants with a drop‑in JavaScript library, a CLI for SEO pre‑rendering, and price localization that respects psychological rounding per currency. In this tutorial we’ll walk through adding German, French, and Dutch translations to a Shopify store, setting up proper hreflang tags, and ensuring search engines index the translated pages.

1. Prerequisites

A Shopify store (any theme works).
API keys for the LLM you want to use (e.g., Claude, GPT‑4o‑mini). SiteLocaleAI is self‑hosted, so you keep the keys private.
Node.js (for the CLI) – optional if you only use the WordPress plugin, but required for Shopify.
Basic knowledge of Liquid (Shopify’s templating language).

2. Install the SiteLocaleAI library

SiteLocaleAI is framework‑agnostic, so you can add it directly to your theme’s layout/theme.liquid file.

<!doctype html>
<html lang="{{ shop.locale }}">
<head>
  {{ content_for_header }}
  <!-- SiteLocaleAI script -->
  <script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>
  <script>
    // Initialize with your LLM API key and target languages
    SiteLocaleAI.init({
      apiKey: '{{ shop.metafields.sitelocale.api_key }}',
      languages: ['de', 'fr', 'nl'], // German, French, Dutch
      defaultLanguage: 'en',
      priceRounding: true,
    });
  </script>
</head>
<body>
  {{ content_for_layout }}
</body>
</html>

Tip: Store the API key in a Shopify metafield (as shown) so it isn’t hard‑coded in the theme.

3. Translate product titles & descriptions on the fly

SiteLocaleAI automatically intercepts text nodes and replaces them with translations from your chosen LLM. For better SEO you’ll want the translated content pre‑rendered (see step 5). For now, let’s ensure the client‑side translation works.

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

The data-sitelocale attribute tells SiteLocaleAI which piece of text to translate. The library will replace the innerHTML with the LLM output for the current language.

4. Add hreflang tags for SEO

Search engines need to know which language version of a page to serve. Add the following snippet to layout/theme.liquid inside the <head> section:

{% assign base_url = shop.url %}
{% for lang in "en,de,fr,nl" | split: "," %}
  <link rel="alternate" hreflang="{{ lang }}" href="{{ base_url }}{{ request.path | replace: '/en/', '/' | prepend: '/' | prepend: '/' | replace: '/' , '/' | prepend: '/' | prepend: '/' | replace: '/' , '/' }}{{ lang }}/" />
{% endfor %}

A more straightforward approach is to generate the URLs with a small helper:

{% capture hreflang_tags %}
{% for lang in site.locale.available %}
  <link rel="alternate" hreflang="{{ lang }}" href="{{ shop.url }}{{ request.path | prepend: '/' | replace: '/en/', '/' | prepend: '/' | replace: '/' , '/' | prepend: '/' | replace: '/' , '/' | prepend: '/' | replace: '/' , '/' }}{{ lang }}/" />
{% endfor %}
{% endcapture %}
{{ hreflang_tags | strip_newlines }}

Replace site.locale.available with the array ['en','de','fr','nl'] if you don’t have a dynamic list.

5. Pre‑render translated pages for crawlers

SiteLocaleAI ships a CLI that can pre‑render static HTML for each language. This is crucial because search engines may not execute JavaScript fully. Install the CLI globally:

npm i -g @sitelocaleai/cli

Create a configuration file sitelocale.config.json in the root of your theme:

{
  "outputDir": "dist",
  "languages": ["en", "de", "fr", "nl"],
  "baseUrl": "https://yourstore.myshopify.com",
  "apiKey": "YOUR_LLM_API_KEY",
  "priceRounding": true
}

Run the pre‑render command:

sitelocale pre-render

The CLI fetches each product page, sends the HTML to the LLM for translation, applies price rounding, and writes a static file for each language under dist/. Deploy the dist/ folder to a CDN (e.g., Cloudflare Pages) and point your Shopify store’s domain to it, or serve it via a reverse proxy.

6. Price localization with psychological rounding

SiteLocaleAI’s priceRounding option automatically converts the base price (USD) to the target currency and applies common psychological endings (e.g., €9.99 instead of €10). You can customize the rounding rules in the CLI config:

{
  "priceRounding": {
    "de": "0.99",
    "fr": "0.99",
    "nl": "0.95"
  }
}

When the CLI processes a product, it will call the LLM to translate the price string and then apply the rounding rule for the language’s currency.

7. Testing the setup

Local preview – Run npm run dev (or your theme’s local server) and append ?lang=de to the URL. You should see German text and € prices.
Google Search Console – Use the URL Inspection tool on a pre‑rendered page like https://yourstore.com/de/products/awesome‑shirt. Verify that the hreflang tags are present and that the content is in German.
Speed test – Because the pages are static after pre‑rendering, the Lighthouse performance score should be above 90.

8. Optional: WordPress‑style plugin for Shopify

If you prefer a no‑code approach, SiteLocaleAI also offers a Shopify app that injects the script and handles hreflang automatically. The app reads the same metafield for the API key, so you can switch between the CLI and the app without changing code.

9. Next steps

A/B test different price rounding strategies to see which drives higher conversion.
Add more languages by expanding the languages array and updating the hreflang snippet.
Monitor SEO in Google Search Console and adjust the pre‑render schedule as you add new products.

10. Need help?

Our documentation covers every detail, from installing the library to customizing price rounding. Check out the SiteLocaleAI Docs for deeper dives, and explore the CLI Reference for advanced workflows.

Ready to make your Shopify store truly global? Try SiteLocaleAI today and see how fast you can launch German, French, and Dutch versions of every product page – all while keeping your SEO intact.

This tutorial was written by the SiteLocaleAI team. All code snippets are provided as‑is; adapt them to your store’s specific setup.

Back to blog