How to add the language switcher to your header

By default the Lokalize switcher floats in a corner of the page. Most merchants would rather have it sit in the header, next to the search, account, and cart icons, so it looks like part of the theme.

You do that by giving Lokalize a CSS selector — the class or ID of an element already in your header — and telling it whether to sit before, after, or inside that element. No theme code editing, and nothing breaks if you switch themes later: you just point it at a different selector.

tip

Nothing here requires a developer. Step 2 is the only part that involves your browser's inspector, and it is three clicks.

Step 1: Turn on the Language selector block

1. In Lokalize, open Settings → Switchers from the left sidebar.
2. Find the Language & Currency Selector card.
3. Click Go to theme editor.
4. Your theme editor opens with the Language selector app embed in the left panel. Toggle it on.
5. Click Save.

:::note Screenshot pending The Switchers page with the Language & Currency Selector card and its "Go to theme editor" button. :::

:::note Screenshot pending Theme editor App embeds panel with "Language selector — Lokalize" toggled on. :::

The switcher now appears on your storefront, floating in the top-right corner. The rest of this guide moves it into the header.

Step 2: Find the CSS selector for your header

You need the class or ID of an element that already lives in your header — usually the group that holds your search, account, and cart icons.

1. Open your storefront in Chrome (your live store, not the theme editor preview).
2. Right-click the cart icon in your header and choose Inspect.
3. The inspector opens with that icon highlighted in the HTML.
4. Look at the highlighted line and the lines just above it for a class="..." or id="..." value. Walk a line or two up until you find the element that wraps the whole icon group.
5. Write it down with the right prefix:
   • a class gets a dot in front — header-actions becomes .header-actions
   • an ID gets a hash in front — cart-icon becomes #cart-icon

:::note Screenshot pending Chrome DevTools with the header icon group highlighted and the class attribute circled. :::

A real example from a Horizon theme store:

<div class="header__column header__column--right" data-testid="header-top-right">
  <search-button>…</search-button>
  <header-actions>
    <div class="account-button header-actions__action">…</div>
    <button class="header-actions__action" data-testid="cart-drawer-trigger">
      <cart-icon>…</cart-icon>
    </button>
  </header-actions>
</div>

Here, .header__column--right is the wrapper around all three icons — that is the selector to use.

tip

Pick the wrapper, not the icon itself. Clickable elements such as the cart button often have their own click behaviour. If you place the switcher inside one, clicking the switcher can open the cart drawer instead of the language list. See The switcher opens my cart drawer below.

Step 3: Point Lokalize at that selector

Back in the theme editor, with the Language selector app embed open:

1. Scroll to the Position section.
2. Set Position to Inline (in page flow).
3. Paste your selector into Header element CSS selector — for example .header__column--right.
4. Choose a Placement:

Placement	Where the switcher lands
Before element	Just outside the element, to its left
After element	Just outside the element, to its right
Inside element (start)	First item inside the element — before your search icon
Inside element (end)	Last item inside the element — after your cart icon

5. Click Save.

:::note Screenshot pending The Position section of the app embed with "Inline (in page flow)", the selector field filled in, and the Placement dropdown open. :::

:::note Screenshot pending Storefront header showing the switcher sitting next to the search, account, and cart icons. :::

Which placement do I want?

• Switcher to the left of all your icons → selector = your icon group, Placement = Inside element (start)
• Switcher to the right of all your icons → selector = your icon group, Placement = Inside element (end)
• Switcher directly next to one specific icon → selector = that icon's own element, Placement = Before element or After element

Step 4: Adjust spacing and style

Still in the Position section:

• Margin (top,right,bottom,left) — spacing around the switcher, in pixels. 0,12,0,12 gives it breathing room on both sides.
• Height — leave at 0 to fit the content, or set a height to line it up with the other icons.

Then open the Style section:

• Appearance → Minimal (blend with header) drops the background and border and inherits your header's own text colour. Use this if your header is dark, or if it switches between light and dark mode — the switcher follows along on its own.
• Appearance → Boxed keeps the panel look, with your own Background color, Border color, Border width, and Border radius.

:::note Screenshot pending Side-by-side of Boxed and Minimal appearance in the same header. :::

Step 5: Check it on mobile

Most themes use the same header on mobile, so the switcher appears there too. Resize your browser window, or use your phone, and look at the header.

In the Mobile section of the app embed, Mobile display gives you three options:

• Same as desktop — identical switcher at every screen size
• Compact — a smaller switcher that takes less room in a crowded mobile header
• Hidden — no switcher on mobile at all

tip

If your theme uses a separate mobile header, your desktop selector may not exist there. Repeat Step 2 with your browser narrowed to phone width and check whether the element you picked is still in the markup.

:::note Screenshot pending Mobile header with the switcher in Compact mode. :::

Common selectors by theme

Every theme names things differently, so these are starting points — always confirm with Step 2.

Theme	Selector to try	Placement
Horizon	.header__column--right	Inside element (start)
Dawn	.header__icons	Inside element (start)
Debut / Brooklyn	.site-header__icons	Inside element (start)
Impulse / Motion	.site-nav--icons	Inside element (start)
Prestige	.Header__Icon	Before element

Troubleshooting

The switcher does not appear at all

Your selector probably does not match anything in your header. Check:

• The prefix. . for a class, # for an ID. header-actions on its own matches nothing.
• Spelling and case. CSS selectors are case-sensitive — .Header__Icon and .header__icon are different elements.
• That the element is in the header. If you picked something from the footer or a drawer, the switcher lands there instead.

If the selector matches nothing, the switcher falls back to the bottom of the page, so scroll down — if you find it there, the selector is the problem.

The switcher opens my cart drawer instead of the language list

You placed it inside a clickable element. Cart and account icons are usually buttons or links with their own click handlers, and anything inside them inherits that click.

Fix it by switching from Inside element (start/end) to Before element or After element on that same selector. The switcher then sits beside the icon as its own element, with its own click behaviour.

It works in English but not in my other languages

This one catches people out. Shopify treats the Header element CSS selector field as translatable text, so if you have Lokalize (or any translation app) translating your theme settings, your selector can get machine-translated — .rightcartbtn turns into .RechterWarenkorbButton on your German storefront, and matches nothing.

To fix it:

1. In your Shopify admin, go to Settings → Languages.
2. Next to the affected language, click Manage.
3. Change the filter to Theme → App embeds.
4. Find the Header element CSS selector entry.
5. Replace the translated value with the exact same selector you use in English.
6. Click Save.

tip

Do this once for each published language. A CSS selector is code, not copy — it must be byte-for-byte identical in every language.

:::note Screenshot pending Shopify Languages → Manage → Theme translations with the CSS selector field showing a translated value. :::

The switcher appears twice, or in the wrong header

Some themes ship two headers — one for desktop, one for mobile — both using the same class names, with the unused one hidden. Lokalize picks the one that is actually visible, so this usually sorts itself out. If it does not, pick a selector that is unique to the header you want: look for an element that only exists inside the desktop or mobile header.

The switcher disappears after I add something to the cart

Some themes re-render the header when the cart updates, which removes anything added to it. Lokalize watches for this and puts the switcher back automatically. If it stays gone, try moving one level up — target the outer header container instead of the icon group, since the outer container is less likely to be re-rendered.

Other icons in my mobile header disappeared

Your header has run out of room. Set Mobile display to Compact, or reduce the Margin so the switcher takes less width. If it is still tight, turn on Show only flags in Display options — a flag alone is far narrower than a flag plus a language name.

Good to know

• Changing the selector never edits your theme code. Lokalize places the switcher at runtime, so uninstalling the app or switching themes leaves nothing behind to clean up.
• If you would rather keep the floating switcher, set Position back to Fixed (floating) and pick a corner under Fixed position.
• The dropdown always offers both language and country, no matter which Switcher icon you choose — that setting only controls what the closed switcher shows.

Related Articles

• How to add and publish a language to your store
• How to bulk translate
• Lokalize plans compared