Adding German, French, and Dutch to a Shopify Store with SiteLocaleAI

Published on SiteLocaleAI Blog

Category: Tutorial

International shoppers expect a seamless experience: product descriptions, prices, and navigation in their native language. SiteLocaleAI makes this possible on Shopify with a drop‑in JavaScript library that runs on the client, while the heavy lifting stays in your own LLM API (Claude, GPT‑4o‑mini, etc.). This guide shows you how to:

1. Install the library on a Shopify theme.
2. Configure language detection and price localization.
3. Generate correct hreflang tags for SEO.
4. Use the CLI to pre‑render translated pages for search‑engine indexing.

Tip: The same steps work for any framework‑agnostic site (React, Vue, WordPress, etc.).

---

1️⃣ Install the SiteLocaleAI JS Library

Shopify themes are built on Liquid, but you can still add plain JavaScript. Open Online Store → Themes → Actions → Edit code and locate the theme.liquid file. Insert the script right before the closing </head> tag:

<!-- SiteLocaleAI – multilingual support -->
<script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>
<script>
  // Initialize with your LLM API key (stored securely as a Shopify secret)
  SiteLocaleAI.init({
    apiKey: '{{ shop.metafields.sitelocaleai.api_key }}',
    defaultLang: 'en',
    supportedLangs: ['de', 'fr', 'nl'],
    priceRounding: {
      // Psychological rounding per currency (e.g., €9.99 → €9.95)
      EU: 0.05,
      US: 0.01
    }
  });
</script>

Security note: Store the API key in Shopify’s Metafields or use an environment variable via a private app. Never hard‑code it.

The library automatically scans the DOM for translatable text nodes and replaces them with the LLM‑generated translation. No additional markup is required.

---

2️⃣ Language Detection & Price Localization

SiteLocaleAI ships with a tiny language‑detector that reads the browser’s Accept‑Language header. You can override it with a query parameter (?lang=de) for testing.

// Force language for demo purposes
SiteLocaleAI.setLang('de'); // 'fr' or 'nl' for other locales

For price localization, the library intercepts any element with the class price and rewrites the amount using the configured rounding rules.

<span class="price" data-currency="EUR" data-amount="19.99">$19.99</span>

SiteLocaleAI.localizePrices(); // runs automatically on init

The output for a German visitor becomes €19,95, respecting the psychological rounding you defined.

---

3️⃣ Generating hreflang Tags

Search engines rely on hreflang to understand language‑specific URLs. SiteLocaleAI can output these tags dynamically, but for SEO you’ll want static tags that the crawler can read without executing JavaScript.

3.1 Create a mapping in config.yml

languages:
  en: ''
  de: '/de'
  fr: '/fr'
  nl: '/nl'

3.2 Add a snippet to theme.liquid

{% assign current_path = request.path | replace: '/de', '' | replace: '/fr', '' | replace: '/nl', '' %}
{% for lang, prefix in site.locale_config.languages %}
  <link rel="alternate" hreflang="{{ lang }}" href="{{ shop.url }}{{ prefix }}{{ current_path }}" />
{% endfor %}

Now each page includes a full set of hreflang links:

<link rel="alternate" hreflang="de" href="https://myshop.com/de/products/awesome‑shirt" />
<link rel="alternate" hreflang="fr" href="https://myshop.com/fr/products/awesome‑shirt" />
<link rel="alternate" hreflang="nl" href="https://myshop.com/nl/products/awesome‑shirt" />

These tags are visible to crawlers because they are rendered server‑side via Liquid, ensuring proper indexing.

---

4️⃣ SEO‑Friendly Pre‑Rendering with the CLI

Google and Bing can index JavaScript‑generated content, but pre‑rendered HTML gives a speed boost and guarantees coverage. SiteLocaleAI’s CLI fetches each language version, runs the translation pipeline locally, and writes static HTML files that you can serve via a CDN or host on Shopify’s Online Store 2.0 assets.

4.1 Install the CLI (Node.js required only for the build step)

npm i -g @sitelocaleai/cli

4.2 Run the pre‑render for all locales

site-locale-cli render \
  --source https://myshop.com \
  --output ./prerendered \
  --langs de,fr,nl \
  --api-key $SITELOCALEAI_API_KEY

The command creates a folder structure like:

prerendered/
├─ index.html                # English (default)
├─ de/
│   └─ index.html            # German
├─ fr/
│   └─ index.html            # French
└─ nl/
    └─ index.html            # Dutch

4.3 Deploy the static files

Upload the prerendered folder to a CDN (Cloudflare Pages, Netlify, etc.) and point your Shopify store’s primary domain to the CDN’s edge. The CDN serves the correct language based on the URL prefix, while the live store still uses the JS library for any missing strings.

---

5️⃣ Testing & Validation

1. Language switcher – Add a simple dropdown that redirects to the appropriate prefix. html <select onchange="location.href=this.value"> <option value="/">English</option> <option value="/de">Deutsch</option> <option value="/fr">Français</option> <option value="/nl">Nederlands</option> </select>
2. Google Search Console – Verify hreflang warnings disappear.
3. PageSpeed Insights – Check that pre‑rendered pages load under 1 s on mobile.

---

6️⃣ Going Further

• Dynamic price rounding per market can be tuned in the priceRounding object.
• Custom translation prompts (e.g., brand‑tone) are supported via the SiteLocaleAI.setPrompt() API.
• For a no‑code experience, check out the Shopify App version of SiteLocaleAI, which injects the same script automatically.

For more details on the API and CLI options, see the official documentation:
- SiteLocaleAI Docs
- CLI Guide

---

🎉 Ready to Go Global?

Implementing German, French, and Dutch on Shopify is now a matter of a few minutes and a few lines of code. With SiteLocaleAI you keep full control of your LLM keys, enjoy accurate price rounding, and give search engines perfectly indexed multilingual pages.

Try SiteLocaleAI today and watch your international traffic soar! 🚀