Tutorial

Translate Shopify Store to German, French & Dutch

Published August 24, 2026

Translate Shopify Store to German, French & Dutch

How to Add German, French, and Dutch to a Shopify Store with SiteLocaleAI

Published on SiteLocaleAI.com

Estimated read time: 7 minutes

International shoppers expect a seamless experience in their native language and currency. With SiteLocaleAI, you can turn any Shopify store into a fully translated, SEO‑friendly site in minutes. This guide walks you through:

  1. Installing the drop‑in JavaScript library.
  2. Configuring language packs for German (de), French (fr), and Dutch (nl).
  3. Generating and injecting proper hreflang tags.
  4. Pre‑rendering translated pages for search‑engine indexing using the CLI.
  5. Verifying the setup with Google Search Console.

1. Prerequisites

  • A Shopify store with admin access.
  • API keys for the LLM you want to use (e.g., Claude, GPT‑4o‑mini). SiteLocaleAI never stores your keys; they stay on your server.
  • Node.js installed locally if you plan to run the pre‑render CLI (optional but recommended for SEO).

2. Drop‑in JavaScript Library

SiteLocaleAI’s library is framework‑agnostic, so you can embed it directly into your Shopify theme.

2.1 Add the script tag

Open Online Store → Themes → Edit code and locate the theme.liquid file (or any layout file that loads on every page). Insert the following snippet just before the closing </head> tag:

<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
<script>
  // Initialize SiteLocaleAI with your LLM API key and target languages
  SiteLocaleAI.init({
    apiKey: 'YOUR_LLM_API_KEY', // keep this secret – use environment variables on your server
    languages: ['de', 'fr', 'nl'], // German, French, Dutch
    defaultLanguage: 'en',
    // Optional: enable price rounding per currency
    priceLocalization: {
      enabled: true,
      rounding: 'psychological' // rounds to 0.99, 0.95, etc.
    }
  });
</script>

Tip: If you prefer not to expose the API key in the front‑end, proxy the request through a tiny serverless function that injects the key. The library works the same way.

2.2 Translate page content

SiteLocaleAI automatically scans the DOM for text nodes and replaces them with translations. For product pages, you’ll want to target specific selectors to avoid translating navigation or checkout elements that are already localized by Shopify.

// Example: translate product title and description only
SiteLocaleAI.translateSelector('.product-title');
SiteLocaleAI.translateSelector('.product-description');

You can place these calls inside a DOMContentLoaded listener or use Shopify’s theme.js event hooks.

3. Adding hreflang Tags

Search engines rely on hreflang attributes to serve the correct language version to users. SiteLocaleAI can generate these tags dynamically.

3.1 Generate tags in the head

Add the following script after the initialization block:

SiteLocaleAI.on('ready', () => {
  const hreflangTags = SiteLocaleAI.generateHreflangTags({
    // Base URL of your store (no trailing slash)
    baseUrl: 'https://yourstore.myshopify.com',
    // Mapping of language codes to Shopify locale paths (if any)
    localePaths: {
      de: '/de',
      fr: '/fr',
      nl: '/nl'
    }
  });

  // Inject tags into <head>
  const head = document.querySelector('head');
  hreflangTags.forEach(tag => head.appendChild(tag));
});

The function creates <link rel="alternate" hreflang="de" href="https://yourstore.myshopify.com/de/..." /> for every product and collection page.

3.2 Verify with Google Search Console

After deploying, use the URL Inspection tool to confirm that Google detects the correct hreflang annotations.

4. SEO‑Friendly Pre‑Rendering with the CLI

While client‑side translation works for users, search bots often don’t execute JavaScript. SiteLocaleAI ships a CLI that pre‑renders translated pages as static HTML, which you can serve via Shopify’s Online Store 2.0 JSON‑LD or a custom reverse proxy.

4.1 Install the CLI

npm install -g @sitelocaleai/cli

4.2 Run a pre‑render job

sitelocaleai prerender \
  --store https://yourstore.myshopify.com \
  --langs de,fr,nl \
  --output ./prerendered \
  --api-key $LMM_API_KEY

The command crawls your store, translates each page, and writes static HTML files to ./prerendered. You can then upload these files to a CDN or serve them via a lightweight Node server that matches the request path.

4.3 Serve pre‑rendered pages

If you use a reverse proxy (e.g., Cloudflare Workers), configure it to serve the pre‑rendered version when the Accept-Language header matches one of the supported languages.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const lang = request.headers.get('Accept-Language')?.split(',')[0] || 'en';
  const path = `${lang}${url.pathname}`;
  const prerendered = await fetch(`https://cdn.yourcdn.com/prerendered${path}.html`);
  return prerendered.ok ? prerendered : fetch(request);
}

Now search engines will index the fully translated HTML, boosting international SEO.

5. Price Localization

SiteLocaleAI can automatically convert prices to the visitor’s currency and apply psychological rounding (e.g., €9.99 instead of €10). Enable it in the init config as shown earlier. The library replaces any element with the class price:

<span class="price" data-amount="49.99" data-currency="USD">$49.99</span>

The script rewrites the content to something like €44.95 for a German user.

6. Testing the Setup

  1. Local test – Open your store in an incognito window, change the browser language to German, and refresh. You should see product titles, descriptions, and prices in German.
  2. Googlebot test – Use the Mobile-Friendly Test tool with the ?preview=de query string to see the pre‑rendered HTML.
  3. Analytics – Track language switches with Google Analytics events:
SiteLocaleAI.on('languageChanged', (lang) => {
  gtag('event', 'language_switch', { language: lang });
});

7. Common Pitfalls & Solutions

Issue Cause Fix
Translations not appearing Library loaded after the DOM is ready Ensure SiteLocaleAI.init runs before DOMContentLoaded or call SiteLocaleAI.translateAll() manually.
Duplicate hreflang tags Theme already injects static tags Remove the static tags or set SiteLocaleAI.generateHreflangTags({skipExisting:true}).
Prices not rounding priceLocalization.enabled set to false Set priceLocalization.enabled: true in the init config.

8. Next Steps

  • A/B test different rounding strategies to see which drives higher conversion.
  • Extend the language list by adding es (Spanish) or it (Italian) using the same config.
  • Combine SiteLocaleAI with Shopify’s International Domains feature for country‑specific SEO.

Ready to go global? Try SiteLocaleAI today and give your Shopify store the multilingual edge it needs to capture European customers.

Read the quick‑start guide for more details, and explore the hreflang documentation for advanced configurations.

Back to blog