Translate Your Shopify Store to German, French & Dutch with SiteLocaleAI
Running a Shopify store means you already have a solid e‑commerce foundation. The next step is to make it truly global. In this tutorial we’ll walk through adding German, French, and Dutch translations, automatically generating hreflang tags, and localizing prices—all with SiteLocaleAI’s drop‑in JavaScript library.
1. Install the SiteLocaleAI library
SiteLocaleAI is framework‑agnostic, so you can load it directly from a CDN or via npm. For a quick start, add the following script tag to your theme.liquid file, just before the closing </head> tag:
<script src="https://cdn.sitelocaleai.com/v1/site-locale-ai.min.js"></script>
If you prefer a build‑time approach, run:
npm install site-locale-ai
and import it in your custom JavaScript bundle.
2. Initialise the library with your LLM API key
SiteLocaleAI works with any LLM you control (Claude, GPT‑4o‑mini, etc.). Store the key in a Shopify secret (e.g., using Shopify Secrets or a private app) and expose it to the front‑end via a meta tag or a server‑side endpoint.
<meta name="site-locale-ai-key" content="{{ shop.metafields.custom.lm_api_key }}" />
Then initialise the library:
document.addEventListener('DOMContentLoaded', () => {
const apiKey = document.querySelector('meta[name="site-locale-ai-key"]').content;
SiteLocaleAI.init({
apiKey,
languages: ['de', 'fr', 'nl'], // German, French, Dutch
defaultLanguage: 'en',
priceRounding: true, // enable psychological rounding per currency
});
});
The priceRounding flag tells SiteLocaleAI to apply market‑specific rounding (e.g., €9.99 → €9.95).
3. Add automatic hreflang tags in Liquid
Search engines need hreflang attributes to understand language variants. Create a small Liquid snippet (snippets/hreflang.liquid) that reads the current URL and injects the tags.
{% assign locales = "en,de,fr,nl" | split: "," %}
{% for locale in locales %}
<link rel="alternate" hreflang="{{ locale }}" href="{{ shop.url }}{{ request.path | replace: '/en/', '/' | append: locale }}/" />
{% endfor %}
Include the snippet in the <head> of theme.liquid:
{% include 'hreflang' %}
When a visitor lands on /products/awesome‑shirt, SiteLocaleAI will serve the translated version (/de/products/awesome‑shirt, etc.) and the hreflang links will point to the correct URLs.
4. Translate product data on the fly
SiteLocaleAI can translate any DOM element that carries the data-locale-key attribute. In your product template (product.liquid), mark the fields you want translated:
<h1 data-locale-key="product.title">{{ product.title }}</h1>
<p data-locale-key="product.description">{{ product.description }}</p>
When the library boots, it will request translations for the selected language and replace the inner HTML automatically.
5. Localise prices with psychological rounding
Add the data-price attribute to price elements. SiteLocaleAI will convert the amount based on the visitor’s locale and apply rounding rules.
<span class="price" data-price="{{ product.price | money_without_currency }}">{{ product.price | money }}</span>
Behind the scenes the library calls your LLM (or a simple conversion table) and then formats the result, e.g., €9.95 for German shoppers.
6. Pre‑render translated pages for SEO (CLI)
Search engines still crawl the HTML they receive. To give them fully rendered, translated pages, use the SiteLocaleAI CLI to generate static snapshots.
npx site-locale-ai prerender \
--output ./prerendered \
--languages de,fr,nl \
--url https://your‑shop.myshopify.com
The CLI crawls every product, renders the translations, and writes static HTML files. Deploy the prerendered folder to a CDN or configure Shopify’s Theme Kit to serve those files for bots (via robots.txt rules or a custom sub‑domain).
7. Test and verify
- Language switcher – add a simple dropdown that calls
SiteLocaleAI.setLanguage('de')etc. - Google Search Console – submit the sitemap that now includes the
/de/,/fr/, and/nl/URLs. - PageSpeed – because the translation happens client‑side after the initial HTML, page‑load metrics stay low.
8. Next steps & resources
- Dive deeper into the API options: SiteLocaleAI Docs.
- Learn how to customise price rounding per currency: Pricing Guide.
🎉 Ready to go global?
With just a few lines of code you’ve turned a single‑language Shopify store into a multilingual, SEO‑friendly shop that respects local pricing psychology. Try SiteLocaleAI today and watch your international traffic soar!