Shopify Multilingual SEO: German, French & Dutch with hreflang
International shoppers are a huge growth opportunity for any e‑commerce brand. If you run a Shopify store, you can reach German, French, and Dutch customers by translating product pages and telling search engines exactly which language version to serve. This guide walks you through a self‑hosted, LLM‑powered solution using SiteLocaleAI, from installing the JavaScript library to generating hreflang tags and pre‑rendering pages for SEO.
1. Why hreflang matters
Search engines use the hreflang attribute to match a user’s language and regional preferences with the correct URL. Without it, Google may show the wrong language version, leading to higher bounce rates and lost sales. Proper hreflang implementation also prevents duplicate‑content penalties.
For a Shopify store that serves three languages, you’ll need a set of tags like:
<link rel="alternate" hreflang="de" href="https://example.com/de/products/awesome‑shirt" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/products/awesome‑shirt" />
<link rel="alternate" hreflang="nl" href="https://example.com/nl/products/awesome‑shirt" />
<link rel="alternate" hreflang="x-default" href="https://example.com/products/awesome‑shirt" />
SiteLocaleAI can generate these tags automatically for every product, saving you hours of manual work.
2. Add SiteLocaleAI to your Shopify theme
SiteLocaleAI is a drop‑in JavaScript library that works with any front‑end framework, including Shopify’s Liquid templates. Follow these three steps:
2.1. Install the library via CDN
Open Online Store → Themes → Edit code and locate the theme.liquid file. Just before the closing </head> tag, add:
<script src="https://cdn.sitelocaleai.com/v1/site-locale-ai.min.js"></script>
2.2. Initialise with your LLM API key
Right after the script tag, initialise the library. Replace YOUR_API_KEY with your Claude, GPT‑4o‑mini, or other LLM key.
<script>
SiteLocaleAI.init({
apiKey: 'YOUR_API_KEY',
defaultLocale: 'en',
supportedLocales: ['de', 'fr', 'nl'],
priceRounding: true // enables psychological rounding per currency
});
</script>
2.3. Translate product titles & descriptions on the fly
Wrap the text you want translated with the data-sitelocale attribute. For example, in product-template.liquid:
<h1 data-sitelocale="{{ product.title }}">{{ product.title }}</h1>
<div data-sitelocale="{{ product.description }}">{{ product.description }}</div>
SiteLocaleAI will replace the inner HTML with the appropriate language version based on the visitor’s locale or the URL prefix (/de/, /fr/, /nl/).
3. Generate hreflang tags automatically
SiteLocaleAI ships with a small helper that prints hreflang links for the current product. Add the following snippet inside the <head> of theme.liquid:
{% assign product_handle = product.handle %}
<script>
// Build hreflang tags for the current product
const locales = ['de', 'fr', 'nl'];
const base = 'https://{{ shop.domain }}';
const path = '/products/{{ product_handle }}';
const head = document.head;
locales.forEach(lang => {
const link = document.createElement('link');
link.rel = 'alternate';
link.hreflang = lang;
link.href = `${base}/${lang}${path}`;
head.appendChild(link);
});
// x‑default
const defaultLink = document.createElement('link');
defaultLink.rel = 'alternate';
defaultLink.hreflang = 'x-default';
defaultLink.href = `${base}${path}`;
head.appendChild(defaultLink);
</script>
This script runs once per page load and ensures search engines see the correct language alternatives.
4. Pre‑render translated pages for crawlers
While JavaScript rendering works for most modern browsers, search‑engine bots often prefer static HTML. SiteLocaleAI provides a CLI that pre‑renders every locale and writes the output to a dist/ folder. You can then serve these static files via Shopify’s Hydrogen or a CDN.
4.1. Install the CLI (Node.js required only for the build step)
npm install -g @sitelocaleai/cli
4.2. Run the pre‑render command
site-locale-ai prerender \
--src ./src \
--out ./dist \
--locales de,fr,nl \
--api-key YOUR_API_KEY
The CLI fetches each product page, runs the LLM translation, applies price rounding, and writes a fully translated HTML file for every locale. Search engines crawling https://example.com/de/... will receive a ready‑to‑index page without executing JavaScript.
Tip: Add the CLI step to your CI pipeline so every new product automatically gets a static translation.
5. WordPress‑style SEO checklist for Shopify
| ✅ | Item |
|---|---|
| 1 | Install SiteLocaleAI via CDN and initialise with API key |
| 2 | Mark translatable text with data-sitelocale |
| 3 | Add dynamic hreflang tags (or use the helper script) |
| 4 | Run the site-locale-ai prerender CLI for each locale |
| 5 | Submit the language‑specific sitemaps in Google Search Console |
| 6 | Test with Google’s URL Inspection tool to verify the correct language version is served |
6. Internal resources
For deeper configuration options, see the official docs:
- Setup guide: https://sitelocaleai.com/docs/setup
- hreflang implementation: https://sitelocaleai.com/docs/hreflang
7. Wrap‑up & next steps
By leveraging SiteLocaleAI’s self‑hosted, LLM‑powered translation engine, you can launch German, French, and Dutch storefronts in minutes, keep prices psychologically rounded for each market, and give search engines the precise hreflang signals they need. The result is higher organic traffic, lower bounce rates, and a smoother checkout experience for international shoppers.
Ready to go global? Try SiteLocaleAI today and watch your Shopify store speak the language of every customer.