Tutorial

Translate Shopify to German, French & Dutch with SiteLocaleAI

Published June 8, 2026

Translate Shopify to German, French & Dutch with SiteLocaleAI

Translate Shopify to German, French & Dutch with SiteLocaleAI

Published on SiteLocaleAI.com

Introduction

Expanding a Shopify store into European markets is a huge revenue driver, but it also brings challenges: language barriers, currency conversion, and search‑engine indexing. SiteLocaleAI solves these problems with a drop‑in JavaScript library that runs on your own LLM API keys, price localization, and a CLI that pre‑renders translated pages for crawlers.

In this tutorial we’ll:
1. Install the SiteLocaleAI library on a Shopify theme.
2. Configure language packs for German (de), French (fr), and Dutch (nl).
3. Generate and inject hreflang tags.
4. Use the SEO CLI to pre‑render translated product pages.
5. Verify the setup with Google Search Console.

Prerequisites
- A Shopify store with a custom theme (Online Store > Themes > Edit code).
- API keys for an LLM (e.g., Claude or GPT‑4o‑mini).
- Node.js installed locally for the SEO CLI (optional but recommended).

1. Add SiteLocaleAI to Your Theme

1.1. Upload the Library

Download the latest sitelocaleai.min.js from the SiteLocaleAI docs and upload it to your theme’s Assets folder.

# From your theme folder
curl -O https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js
shopify theme push

1.2. Include the Script

Edit layout/theme.liquid and add the script right before the closing </head> tag:

{{ 'sitelocaleai.min.js' | asset_url | script_tag }}

1.3. Initialise the Library

Place the following snippet in the same file, after the script tag. Replace YOUR_LLM_API_KEY with your actual key.

<script>
  SiteLocaleAI.init({
    apiKey: 'YOUR_LLM_API_KEY',
    defaultLang: 'en',
    supportedLangs: ['de', 'fr', 'nl'],
    priceRounding: true,
    currencyMap: {
      de: 'EUR',
      fr: 'EUR',
      nl: 'EUR'
    }
  });
</script>

The library now watches for language switches and will translate any text node on the page using your LLM.

2. Add a Language Switcher

Shopify doesn’t ship a built‑in language switcher for custom themes, so we’ll create a simple dropdown.

<!-- snippets/language-switcher.liquid -->
<div class="locale-switcher">
  <select id="locale-select" onchange="SiteLocaleAI.setLang(this.value)">
    <option value="en">English</option>
    <option value="de">Deutsch</option>
    <option value="fr">Français</option>
    <option value="nl">Nederlands</option>
  </select>
</div>

Include the snippet in header.liquid where you want the menu to appear:

{% include 'language-switcher' %}

Now visitors can toggle languages instantly, and the library will request translations from your LLM.

3. Generate hreflang Tags

Search engines need hreflang tags to understand which language version to serve to which audience. SiteLocaleAI can output these tags via a small helper function.

3.1. Helper Liquid Filter

Create a new snippet snippets/hreflang-tags.liquid:

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

3.2. Insert into <head>

Add the snippet right after the SiteLocaleAI script in theme.liquid:

{% include 'hreflang-tags' %}

The loop creates a <link> for each supported language, pointing to the same product slug but with the language prefix (e.g., /de/products/awesome‑t‑shirt).

4. SEO Pre‑Rendering with the CLI

Search engines can’t execute JavaScript during crawling, so we pre‑render static HTML for each language using SiteLocaleAI’s CLI.

4.1. Install the CLI

npm i -g @sitelocaleai/seo-cli

4.2. Configure the CLI

Create a sitelocaleai.config.json at the root of your theme folder:

{
  "storeUrl": "https://yourstore.myshopify.com",
  "apiKey": "YOUR_LLM_API_KEY",
  "langs": ["de", "fr", "nl"],
  "outputDir": "./prerendered",
  "paths": ["/products/*", "/collections/*", "/" ]
}

4.3. Run the Pre‑Render

sitelocaleai pre-render

The CLI will:
1. Crawl each path.
2. Request translations from the LLM.
3. Write static HTML files into ./prerendered/<lang>/.

4.4. Serve the Pre‑Rendered Files

Upload the generated files to a CDN (e.g., Cloudflare Pages) and configure Shopify to serve them via a custom sub‑domain like de.yourstore.com. Update your DNS records accordingly.

5. Verify with Google Search Console

  1. Add the new language sub‑domains as property in Search Console.
  2. Use the URL Inspection tool to confirm that Google sees the correct hreflang tags and the translated content.
  3. Monitor the Coverage report for any indexing errors.

6. Price Localization

SiteLocaleAI automatically rounds prices to psychologically appealing numbers (e.g., €19.99 → €20). The priceRounding flag we set earlier enables this. If you need custom rounding rules per currency, extend the init config:

SiteLocaleAI.init({
  ...
  roundingRules: {
    EUR: value => Math.round(value) + 0.99,
    GBP: value => Math.round(value) + 0.95
  }
});

7. Wrap‑Up

You now have a fully multilingual Shopify store that:
- Translates product titles, descriptions, and UI text on‑the‑fly using your own LLM.
- Serves SEO‑friendly static pages for crawlers.
- Includes proper hreflang tags for Google and Bing.
- Localizes prices with psychological rounding.

Ready to go live?

Next Steps

  • Test the checkout flow in each language to ensure tax calculations remain correct.
  • Add language‑specific SEO metadata (title, description) via the SiteLocaleAI.setMeta API.
  • Explore the WordPress plugin if you also run a blog on WordPress – no Node.js required.

Want to try it yourself?

Visit the SiteLocaleAI documentation for deeper integration guides, or spin up a free trial on our dashboard. Translate faster, rank higher, and watch your international sales soar! 🚀

Back to blog