How to Add a Language Switcher to Your Shopify Store

Losing a sale because a customer couldn't read your store is entirely preventable — and adding a language switcher is the most visible signal you can give international shoppers that they're welcome. This guide walks you through every method for adding a Shopify language switcher, from clicking a checkbox in the theme editor to writing Liquid for a vintage theme, so you can pick the right approach and avoid the implementation mistakes that trip up even experienced developers.

What a Shopify Language Switcher Actually Does

Before diving into setup, it's worth being precise. Shopify's native multilingual system (built on Shopify Markets) stores translated content directly in your store's resource records. When a customer switches language, Shopify serves a URL with the locale prefix — /fr/products/your-product, for example — and pulls the correct translations from those records. No redirects to a subdomain, no iframe trickery.

The language switcher is simply the UI control that lets customers trigger that switch. It lives in your theme, fires a locale change, and relies on translated content already existing in your store. If the content isn't translated yet, switching the language just shows your original text. That distinction matters — the switcher and the translations are two separate concerns.

If you haven't translated your content yet, start with How to Translate Your Shopify Store: The Complete 2026 Guide before continuing here.

Step 1: Add Your Languages in Shopify Admin

You can't show a switcher for languages that aren't active. First, make sure each target language is enabled.

1. Go to Settings → Languages in your Shopify admin.
2. Click Add language and choose from the list.
3. Click Publish next to each language you want live on the storefront.

Repeat for every language you need. Not sure how many to add? How Many Languages Should Your Shopify Store Support? covers the decision framework in detail.

Step 2: Add the Language Switcher in Your Theme

Online Store 2.0 Themes (Dawn and Compatible Themes)

Modern themes handle this with a few clicks:

1. Go to Online Store → Themes → Customize.
2. Navigate to your Header section (or Footer, depending on your preference).
3. Look for a Country/Region selector or Language selector toggle and enable it.
4. Save.

That's genuinely it for most OS 2.0 themes. The block uses Shopify's built-in localization object and renders a <form> with the correct attributes automatically.

Vintage Themes (Debut, Brooklyn, Supply, and Custom Liquid)

Older themes won't have that toggle. You'll need to add the switcher manually. The key object in current Liquid (as of 2024+) is localization.available_languages — not the older shop.published_locales, which is deprecated and will return unexpected results.

Here's a minimal, working implementation. Add it inside your header.liquid or a dedicated language-switcher.liquid snippet:

{% form 'localization', return_to: request.path %}
  <input type="hidden" name="locale" value="{{ localization.language.iso_code }}">
  <select name="locale" onchange="this.form.submit()">
    {% for language in localization.available_languages %}
      <option
        value="{{ language.iso_code }}"
        {% if language.iso_code == localization.language.iso_code %}selected{% endif %}
      >
        {{ language.endonym_name }}
      </option>
    {% endfor %}
  </select>
{% endform %}

One critical detail developers frequently miss: the <form> tag must use {% form 'localization' %} (Shopify's Liquid form tag), not a plain HTML <form> element. And you must include <input type="hidden" name="locale" ...> alongside the <select>. Without the hidden input, Shopify's form handler won't receive the locale value correctly on some theme configurations, and the switcher will appear to work but silently fall back to the default language. This is the single most common implementation bug with native locale switching.

Include your snippet in the header with {% render 'language-switcher' %}.

Step 3: Handle RTL Languages

If you're adding Arabic, Hebrew, Urdu, or another right-to-left language, enabling the locale is not enough — your theme's layout direction must also change. Shopify's Liquid exposes localization.language.direction, which returns "rtl" or "ltr". Use it on your <html> tag:

<html lang="{{ request.locale.iso_code }}" dir="{{ localization.language.direction }}">

Setting dir="rtl" on the root element causes browsers to flip block layout, text alignment, and flexbox direction automatically for most content. For custom CSS that uses directional properties (margin-left, padding-right, text-align: left), you'll need to audit and override using [dir="rtl"] selectors — for example:

[dir="rtl"] .nav-menu {
  flex-direction: row-reverse;
}

For a deeper look at the full RTL implementation checklist, see Selling in RTL Languages: Arabic & Hebrew on Shopify.

Step 4: Place the Switcher Strategically

Where you put the switcher affects whether customers actually use it. Based on common UX patterns:

• Header (top right): Most expected position for international visitors — mirror where you'd place a cart icon.
• Footer: Acceptable as a secondary location; good for stores where language switching is a rare event.
• Both: Useful if your header is minimal and the footer is rich.

Avoid burying it inside a hamburger menu on mobile. International customers who land on the wrong language version will bounce quickly if they can't find the switcher within two seconds.

Display the language name in its own script where possible — localization.language.endonym_name gives you "Français" instead of "French," which is more immediately recognizable to the customer you're trying to serve.

Step 5: Verify Hreflang Tags Are Working

A language switcher improves human navigation; hreflang tags do the same job for search engines. Shopify automatically injects <link rel="alternate" hreflang="..."> tags into your storefront HTML once you've published languages in Settings → Languages. You don't need to add these manually.

To confirm they're rendering:

1. Visit a product page on your live store.
2. Right-click → View Page Source.
3. Search for hreflang. You should see one tag per active language, plus an x-default tag pointing to your primary locale.

If the tags are missing, check that the languages are set to Published (not just added) in Settings → Languages. Unpublished languages won't generate hreflang entries.

For a full guide to getting multilingual SEO right — including URL structure, translated meta fields, and sitemap considerations — see Shopify Multilingual SEO: How to Rank in Every Language.

Step 6: Test the Full Switcher Flow

Before announcing your multilingual store, run through this checklist:

• Switch to each active language from the homepage.
• Confirm product pages, collection pages, and cart show translated content (not your source language).
• Check that the URL updates to include the locale prefix (/fr/, /de/, etc.).
• Test on mobile — verify the switcher is visible and tappable.
• Use an incognito window to confirm a first-time visitor lands on the right language based on browser preference.
• View page source on at least one translated page and confirm hreflang tags are present.

Getting Your Translations in Place

Once the switcher is live, the question becomes: what are customers actually seeing when they switch? A switcher pointing to untranslated content is worse than no switcher — it signals you didn't finish the job.

Getting accurate translations that also cover SEO meta fields (page titles, meta descriptions, URL handles) is where most merchants spend the most time. That's the problem StoreLingo solves: it uses Claude AI to translate your products, collections, pages, and articles — including all SEO fields — lets you review before publishing, and automatically detects when content changes so you're never re-translating content that hasn't moved.

Add StoreLingo on the Shopify App Store →

---

FAQ

Do I need to edit my theme code to add a language switcher on Shopify? On Online Store 2.0 themes like Dawn, you can enable the language selector directly in the theme editor with no code required. Vintage or heavily customized themes will require you to add a Liquid snippet manually using the localization.available_languages object and a {% form 'localization' %} block.

Will the language switcher affect my store's SEO? The switcher itself doesn't affect SEO, but the underlying setup does. When you publish languages in Shopify, it generates hreflang tags and locale-prefixed URLs automatically — both of which signal to Google which language version to show to which audience. The switcher is just the customer-facing control for the same system.

What happens if a customer switches language but I haven't translated that content yet? Shopify will display your original source-language text as a fallback. The URL will update to include the locale prefix, but the page content will remain in your default language until a translation exists for that resource. This is why adding translations before (or immediately after) enabling a language is important.