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

International shoppers expect a seamless experience in their native language, and search engines reward sites that serve proper hreflang tags. SiteLocaleAI makes this easy with a drop‑in JavaScript library that works with any framework, including Shopify’s Liquid theme language. In this tutorial we’ll:

1. Install the SiteLocaleAI script on a Shopify theme.
2. Configure the library to translate product pages into German (de), French (fr), and Dutch (nl).
3. Generate SEO‑friendly hreflang tags automatically.
4. Use the CLI to pre‑render translated pages for crawlers.

---

1. Adding the SiteLocaleAI Script

Shopify themes allow you to inject scripts directly into the <head> via the theme.liquid layout file. Paste the following snippet right before the closing </head> tag:

<script src="https://cdn.sitelocaleai.com/v1/site-locale.js"></script>
<script>
  const locale = new SiteLocaleAI({
    apiKey: 'YOUR_LLM_API_KEY', // e.g., Claude, GPT‑4o‑mini
    defaultLang: 'en',
    targetLangs: ['de', 'fr', 'nl'],
    priceRounding: true, // psychological rounding per currency
    hreflang: true, // auto‑generate <link> tags
    preRenderCLI: true // enable CLI pre‑rendering later
  });
  locale.init();
</script>

Why self‑hosted? Because the library never sends your content to SiteLocaleAI’s servers; it only forwards the LLM request using the API key you provide. This keeps data private and lets you pick the model that fits your budget.

---

2. Translating Product Pages

SiteLocaleAI works out‑of‑the‑box with any HTML element that contains text. For a typical Shopify product template (product.liquid), you only need to wrap the translatable sections in a container that the library can target:

<div class="site-locale-target" data-lang="{{ shop.locale }}">
  <h1 class="product-title">{{ product.title }}</h1>
  <p class="product-description">{{ product.description }}</p>
  <span class="product-price">{{ product.price | money }}</span>
</div>

When the page loads, SiteLocaleAI will call the configured LLM for each target language, replace the innerHTML, and apply currency rounding automatically. No additional code is required.

---

3. Generating hreflang Tags

Search engines rely on hreflang to understand which language version of a page to serve to a user. SiteLocaleAI can emit these tags for you, but you still need to place them in the <head> of each page. Add the following Liquid snippet to theme.liquid right after the SiteLocaleAI script:

{% assign locales = "en,de,fr,nl" | split: "," %}
{% for locale in locales %}
  <link rel="alternate" hreflang="{{ locale }}" href="{{ shop.url }}/{{ locale }}/products/{{ product.handle }}" />
{% endfor %}

This loop creates a full set of alternate URLs for every product. If a language version is missing, Shopify will fall back to the default English page, which is still a valid hreflang reference.

---

4. Pre‑Rendering for SEO (CLI)

While modern search engines can execute JavaScript, pre‑rendered HTML guarantees that all translated content is indexed instantly. SiteLocaleAI ships a lightweight CLI that crawls your store, renders each language, and writes static HTML files.

First, install the CLI globally (Node.js required only for the build step, not for the live store):

npm install -g site-locale-cli

Then run the pre‑render command for your three target languages:

npx site-locale-cli pre-render \
  --shop-url https://yourstore.myshopify.com \
  --api-key YOUR_LLM_API_KEY \
  --langs de,fr,nl \
  --output ./prerendered

The CLI will:
- Fetch each product page.
- Call the LLM for translation.
- Apply price rounding.
- Write a static HTML file for each language under ./prerendered.

Upload the generated files to a CDN or host them on a sub‑directory (e.g., /de/, /fr/, /nl/). Search engines will now crawl the fully translated pages without needing to execute JavaScript.

---

5. Optional: WordPress‑Style Plugin for Shopify

If you prefer a no‑code approach, SiteLocaleAI also offers a Shopify app that mirrors the WordPress plugin experience. Install it from the Shopify App Store, paste your LLM API key, and toggle the languages you need. The app injects the same script and automatically creates the hreflang tags for you. This is handy for merchants who want to avoid editing theme files.

---

6. Testing & Validation

1. Visual Check – Open a product page with ?lang=de (or fr, nl) and verify the translation and price rounding.
2. Google Search Console – Use the URL Inspection tool to confirm that each language version returns a 200 status and includes the correct hreflang links.
3. Lighthouse – Run an audit to ensure the page’s performance remains solid after the script injection.

---

7. Going Live

When you’re satisfied with the translations, update your Shopify navigation to include language selectors that point to the /de/, /fr/, and /nl/ prefixes. Because the library is framework‑agnostic, the same setup works for any custom storefront built with React, Vue, or plain HTML.

---

8. Further Reading

• Detailed integration guide: https://sitelocaleai.com/docs/quickstart
• Managing hreflang tags: https://sitelocaleai.com/docs/hreflang

---

Ready to boost your international sales and SEO? Try SiteLocaleAI today and see how fast a multilingual Shopify store can be built. No extra hosting costs, full control over your LLM provider, and a pricing plan that scales with you. Happy translating!