Markets, currencies and languages

Smootify shows each visitor the Shopify market of their country: its currency, its prices and the products it sells. You set up the markets in Shopify. On the site, a country switcher lets the visitor change country, and with locales on, each language and market has its own pages and a language switcher of links. This page says what happens when the country changes and what you build for it.

How Smootify picks the country

From the first of these that gives one, in this order:

To turn on the browser’s language, set the option in the userOptions of the integration, in astro.config.mjs:

smootify({ siteId, userOptions: { selectMarketBasedOnBrowserLanguage: true } });

To suggest the right country to a new visitor, see Market suggestion.

What changes with the country

• Prices and currency. Every product, card and the cart show the prices Shopify has for that market, in its currency. They reload in place, without reloading the page, and the cart moves to the new country.
• Taxes. Prices are shown as Shopify sends them for the market. Whether they include taxes is a setting of your Shopify store.
• Sales in Europe. When your primary market is outside the European Economic Area, Shopify hides the compare-at prices it converts for EEA countries. The reason is the EU Omnibus rule: a price reduction shown in the EEA must also show the lowest price of the 30 days before it, the “Omnibus price”, which a converted compare-at price does not carry. That is why the setting is on by default. There a product on sale shows only its price: no strikethrough, and condition="on-sale" stays hidden. To show them, untick Hide compare-at prices for European Economic Area (EEA) customers under Settings > Markets > Preferences, and show the Omnibus price next to every reduction in those countries.
• Products the market does not sell. Their smootify-product stays empty and the card gets the hidden attribute. Smootify does not redirect the visitor. Show your own message on the page for those products, or leave the card hidden.
• Search engines. The product’s structured data carries the price and currency of the current market. See SEO and structured data.

1. Add a country switcher

Write a country-switcher element, anywhere on the page, usually in the navbar. Put a [popover] inside it, with a button popovertarget to open it.

<country-switcher>
  <button type="button" popovertarget="country">
    <span data-prop="flag"></span>
    <span data-prop="name"></span>
    <currency-code></currency-code>
  </button>
  <div id="country" popover>
    <button type="button">
      <span data-prop="flag"></span>
      <span data-prop="name"></span>
      <span data-prop="currency-symbol"></span>
    </button>
  </div>
</country-switcher>

The popover has two parts, each with its own job:

• The trigger. A button with popovertarget, that shows the current country. Smootify writes the country’s name in its first element without data-prop: put the element for the name first. Elements with data-prop show the current country.
• The panel. The first button or link inside the [popover] is the template, copied once for each country of your markets. The other ones you wrote are removed. The current country gets aria-current="true". A pick changes the country and closes the popover.

Inside the link and the toggle, the elements with data-prop show a country:

• data-prop="name": the country’s name;
• data-prop="iso-code": its code, such as IT;
• data-prop="flag": its flag, on an img, or as the background of any other element;
• data-prop="currency-iso-code", "currency-symbol", "currency-name": its currency.

The currency elsewhere. A currency-code element, anywhere on the page, shows the current currency code, for example in the footer. It is filled only while the page has a country-switcher.

A store that sells in one country. With a single country in your Shopify markets there is nothing to pick, so country-switcher removes itself. It fills the currency-code elements first, and the ones outside it stay. Add a second country in Shopify and the switcher shows, with nothing to change on the site.

A popover only. country-switcher is a popover: the first button or link inside the [popover] is the template. See Popovers. On a site with locales, use the [locales] switcher of section 3 instead.

Country and language together. When the country you pick has the same code as one of your store’s languages, such as IT for Italy and Italian, the language changes too. On a site without locales, the switcher looks for the page of that language in the [locales] links, or in the <link rel="alternate" hreflang> links of the head:

• it finds the locale for the country’s code (IT goes to the Italian page), changes the country, then the language, and goes to that page;
• without a matching locale, only the country changes and the page stays.

Every value is in country switcher attributes.

2. Add a pickup location switcher

If your store offers local pickup, a location-switcher lets the visitor choose their store once, for the whole site. It is built like the country switcher, on a popover, and the first button or link is the template of each location.

<location-switcher>
  <button type="button" popovertarget="location">Pickup location</button>
  <div id="location" popover>
    <button type="button"><span location="name">Store name</span><span location="address">Address</span></button>
  </div>
</location-switcher>

• location="name" and location="address" show a location, in the links and in the toggle.
• It lists your Shopify locations that offer local pickup. When the store has none, it is removed.
• The choice is remembered in the visitor’s browser and sent to Shopify as their preferred location. The pickup block of product pages then leaves it out of the list of other stores: see Pickup and store locator.

3. Languages

Languages and markets. Turn on locales in the integration, in astro.config.mjs:

smootify({ siteId, locales: true })

Smootify reads the store’s markets and languages from Shopify and builds one page for each market and language, at the URLs Shopify uses by default, such as /it/products/…. Each page has its own <html lang>, and <Seo> writes the links to all the others for search engines. To build only some of them, give locales an object: locales: { languages: ["EN", "IT"], markets: ["CH", "europe"] }.

The language switcher. It is the [locales] element, with a real link for each page in the other language or market, built with localeSwitcherLinks from @smootify/astro/locales. Give each link the locale’s hreflang: a click sets the country and the language of that link, then goes to its page.

---
import { localeSwitcherLinks } from "@smootify/astro/locales";
const { paths, locale } = Astro.props;
const links = localeSwitcherLinks(paths, locale);
---
<div locales>
  {links.map((l) => (
    <a href={l.href} hreflang={l.hreflang} aria-current={l.current ? "true" : undefined}>{l.label}</a>
  ))}
</div>

For developers, the country and the language can also be changed from code: see JavaScript API.

Selling in the EU

Since 19 June 2026, a store that sells online to consumers in the EU must offer a withdrawal button, which works without logging in. A site can host it on a page of its own or link to a withdrawal app’s page on Shopify: see EU right of withdrawal.

Before you publish