Tutorial

Add German, French & Dutch to Your Shopify Store

Published July 21, 2026

Add German, French & Dutch to Your Shopify Store

Translating a Shopify Store to German, French & Dutch with SiteLocaleAI

International sales are a huge growth driver for Shopify merchants, but handling translations, localized pricing, and SEO can be a nightmare. SiteLocaleAI solves this with a single, framework‑agnostic JavaScript library that you host yourself, using any LLM API key you prefer (Claude, GPT‑4o‑mini, etc.). In this tutorial we’ll walk through:

  1. Adding the SiteLocaleAI script to a Shopify theme.
  2. Configuring language packs for German (de), French (fr), and Dutch (nl).
  3. Generating hreflang tags automatically.
  4. Localizing prices with psychological rounding.
  5. Using the CLI to pre‑render translated pages for SEO.

Prerequisites – A Shopify store, an LLM API key, and basic knowledge of Liquid (Shopify’s templating language).

1. Install the SiteLocaleAI Library

SiteLocaleAI is a drop‑in script, so you can add it directly to your theme’s layout/theme.liquid file.

{% comment %} SiteLocaleAI – add before closing </head> {% endcomment %}
<script src="https://cdn.sitelocaleai.com/v1/site-locale-ai.min.js"></script>
<script>
  // Initialize with your LLM API key (keep it secret – use Shopify's env vars or a server‑side endpoint)
  SiteLocaleAI.init({
    apiKey: '{{ shop.metafields.sitelocaleai.api_key }}',
    defaultLang: 'en',
    supportedLangs: ['de', 'fr', 'nl'],
    priceRounding: {
      de: { currency: 'EUR', round: 0.99 },
      fr: { currency: 'EUR', round: 0.95 },
      nl: { currency: 'EUR', round: 0.97 }
    }
  });
</script>

Tip: Store the API key in a Shopify metafield or use a serverless function to inject it at runtime, so it never appears in the public source.

2. Translate Product Content on the Fly

SiteLocaleAI automatically intercepts text nodes and replaces them with LLM‑generated translations. To ensure product titles, descriptions, and price blocks are translated, wrap them in a data-sitelocale attribute.

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

When a visitor selects a language (via a simple dropdown you add to the header), SiteLocaleAI swaps the text and also re‑calculates the price using the rounding rules defined earlier.

3. Automatic hreflang Generation

Search engines need proper hreflang tags to understand the language‑region targeting of each page. SiteLocaleAI can generate them dynamically based on the URL structure.

{% comment %} Insert hreflang tags in <head> {% endcomment %}
{% assign base_url = shop.url %}
{% assign locales = 'en,de,fr,nl' | split: ',' %}
{% for locale in locales %}
  <link rel="alternate" hreflang="{{ locale }}" href="{{ base_url }}/{{ locale }}{{ request.path }}" />
{% endfor %}

If you use Shopify’s built‑in language sub‑folder (e.g., /de/, /fr/), the URLs will resolve correctly. The href values point to the same product page rendered in the target language, thanks to SiteLocaleAI’s server‑side pre‑rendering (see next section).

4. Price Localization with Psychological Rounding

Customers respond better to prices ending in .99, .95, or .97 depending on local expectations. SiteLocaleAI’s priceRounding config handles this automatically.

// Inside the init config (see step 1)
priceRounding: {
  de: { currency: 'EUR', round: 0.99 },
  fr: { currency: 'EUR', round: 0.95 },
  nl: { currency: 'EUR', round: 0.97 }
}

When the library formats a price, it first converts the base USD amount using the latest exchange rate (fetched from the LLM provider or a third‑party API) and then applies the rounding rule. The result is displayed in the correct locale‑specific format (e.g., € 19,99 for Germany, 19,95 € for France).

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engine crawlers don’t execute JavaScript reliably, so you need static HTML for each locale. SiteLocaleAI ships a CLI tool that pre‑renders pages and writes them to a folder you can serve via Shopify’s Theme Kit or a CDN.

# Install the CLI globally (requires Node 18+)
npm i -g site-locale-ai-cli

# Pre‑render the home page and all product pages for the three locales
site-locale-ai render \
  --output ./prerendered \
  --locales de,fr,nl \
  --url https://yourstore.myshopify.com

The CLI fetches each page, runs the LLM translations locally, injects the hreflang tags, and writes the final HTML. Upload the generated files to a static bucket (e.g., AWS S3) and configure Shopify to serve them via a reverse proxy for the language sub‑folders.

Reference: See the full CLI documentation at https://sitelocaleai.com/docs/cli.

6. Adding a Language Switcher

A simple dropdown in your header allows shoppers to pick a language. The switcher updates the URL and triggers SiteLocaleAI to load the correct locale.

<div class="language-switcher">
  <select id="locale-select" onchange="changeLocale(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>

<script>
  function changeLocale(lang) {
    const path = window.location.pathname.replace(/^\/[a-z]{2}\//, '/');
    const newUrl = `/${lang}${path}`;
    window.location.href = newUrl;
  }
  // Initialise the library with the language from the URL
  const lang = window.location.pathname.split('/')[1];
  if (['de','fr','nl'].includes(lang)) {
    SiteLocaleAI.setLang(lang);
  }
</script>

Now visitors can seamlessly switch between English, German, French, and Dutch, while the SEO‑friendly hreflang tags keep search engines happy.

7. Testing & Validation

  1. Visual check – Open /de/, /fr/, and /nl/ pages in a private browser window. Verify that product titles, descriptions, and prices appear correctly.
  2. Google Search Console – Submit the new sflang URLs under International Targeting to confirm they’re recognized.
  3. Lighthouse – Run an audit to ensure the pre‑rendered pages have a high SEO score.

8. Wrap‑Up

By integrating SiteLocaleAI’s drop‑in JavaScript library, configuring language packs, and using the CLI for pre‑rendering, you can launch a fully localized Shopify store in minutes. The approach keeps your LLM keys private, reduces translation costs, and boosts organic traffic through proper hreflang tags and price psychology.

Ready to go global? Try SiteLocaleAI today and watch your international sales soar.

For deeper technical details, visit the official docs:
- https://sitelocaleai.com/docs
- https://sitelocaleai.com/docs/seo

Back to blog