← Todos os guias

Navigation for international stores: language, currency, and regional catalogs

Language switcher patterns in navigation

Where to place the language picker, flag icons versus text labels, auto-detection pitfalls, and designing language switching that doesn't confuse international shoppers.

Language switcher patterns in navigation

A language switcher lets visitors change the store’s display language. It sounds simple, but the implementation details — placement, design, behavior — make the difference between a smooth international experience and a confusing one.

Placement options

Header (desktop). The most common position. A small flag or language code near the account icons. Works well on desktop where the header has space. Usually a dropdown that shows available languages on click or hover.

Slide menu (mobile). On mobile, header space is limited. Placing the language switcher inside the slide menu — at the top, before the category list — keeps it accessible without crowding the header. The shopper opens the menu, sees the language option first, and switches if needed before browsing.

Footer. Some stores place the language switcher in the footer. This works for returning visitors who know where to find it, but first-time visitors from a non-default language market may never scroll to the footer — they’ll leave before reaching it.

Tabbar or dedicated button. For stores where language switching is frequent (high international traffic), a dedicated button in the tabbar or a persistent floating icon gives one-tap access from any page. This is aggressive but effective for stores with 50%+ international traffic.

Flags versus text labels

Using country flags to represent languages is tempting but problematic. A US flag for English excludes British, Australian, and Canadian English speakers. A Spanish flag for Spanish excludes Latin American Spanish speakers. The flag represents a country, not a language, and the mismatch can feel exclusionary.

Text labels are clearer: “English,” “Français,” “Deutsch,” “日本語.” Each language name is written in its own language so the visitor can recognize it even if the rest of the page is in a language they can’t read. A French visitor on an English page can scan for “Français” without understanding English.

A compromise: text labels with a small globe icon (🌐) to signal that this is the language control. The globe is neutral and universally understood as “international/language.”

Auto-detection and override

The best language switcher is one the visitor never has to use. Shopify Markets auto-detects the visitor’s browser language or IP location and serves the appropriate language automatically. If the detection is correct, the visitor sees the site in their language without touching anything.

But auto-detection isn’t perfect. A French tourist in the US sees English. A VPN user sees the wrong language. A bilingual visitor prefers a different language than their browser default. The switcher must be easy to find for these cases — and the selection should persist (via cookie or account preference) so the visitor doesn’t have to switch again on every visit.

One common pitfall: redirecting the visitor to a different URL when they switch languages, which loses their place on the page. If the visitor is on a product page and switches from English to French, they should land on the French version of that same product page, not the French homepage.

This article is part of the larger guide on Navigation for international stores: language, currency, and regional catalogs.

Compartilhar Facebook X