Localization

Country and language switchers for a Shopify Markets store. Picking a country re-prices every displayer and the cart for that market; the language list follows the active country. Needs: the engine only.

On your storefront

Drop the pickers anywhere inside <storesynk-store>. The engine fills the lists from the shop’s Markets data; never hardcode them. On a single-market shop each picker hides itself, so they are safe to leave in.

<storesynk-store domain="your-store.myshopify.com" token="your-public-storefront-token" persist-locale="cookie">
  <nav class="locale">
    <change-country show-currency label="Country"></change-country>
    <change-language label="Language"></change-language>
  </nav>
</storesynk-store>

• Each picker adopts a child <select> you provide or creates one. For pills instead of a select, give it a first-child <locale-value> template with <show-locale-name> and, on the country picker, <show-locale-currency>. The engine clones it per entry into a keyboard radiogroup.
• persist-locale on the store controls how the choice is remembered: cookie (default, readable by SSR), localStorage, or none.
• The SSR packages render the pickers and the locale-aware prices on the server from the same cookie.

<h2 id="ship-to">Ship to</h2>
<change-country>
  <div class="locale-pills" aria-labelledby="ship-to">
    <locale-value class="pill">
      <show-locale-name></show-locale-name>
      <small><show-locale-currency></show-locale-currency></small>
    </locale-value>
  </div>
</change-country>

Options

Tag	Attribute	What it does
change-country	show-currency	Appends the currency to each option, e.g. “Germany (EUR €)”.
change-country, change-language	label	Accessible name for the generated select or pill group.
storesynk-store	persist-locale	cookie (default), localStorage, or none.

States

Attribute	Set on	Meaning
ss-empty	either picker	one or fewer choices; the picker also gets hidden
ss-loading	either picker	a switch is in flight
ss-active	locale-value	the selected pill

Related

• Markets reference
• Markets troubleshooting