# Markets, currencies and languages

> Sell in several countries with Shopify Markets. Covers the country and currency switcher, the pickup location switcher, what changes with the country, and languages with Webflow Localization or Weglot.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/internationalization  
URL: https://www.smootify.io/docs/features/markets  
Updated: 2026-10-10

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 the language follows Webflow Localization or Weglot. This page says what happens when the country changes and what you build for it.

> [!NOTE]
> Set up your markets in Shopify first, under **Settings > Markets**: the countries, their currencies and the products each market sells. Smootify lists only the countries of your markets. Product translations also come from Shopify, for example from the Translate & Adapt app.

## How Smootify picks the country

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

1. **The visitor's choice.** A country picked in a country switcher, or with Webflow's locale switcher, is remembered in the visitor's browser and wins from then on.
2. **The page's language, when it names a country.** A Webflow locale such as `fr-CA`, or the language Weglot shows.
3. **The browser's language**, such as `it-IT` for Italy, when you turn on `selectMarketBasedOnBrowserLanguage`. It is off by default.
4. **Otherwise**, your store's primary market.

To turn on the browser’s language, paste this in your site’s custom code, in the head, before the Smootify loader:

```html
<script>
  window.SmootifyUserOptions = { selectMarketBasedOnBrowserLanguage: true };
</script>
```

If you already have a `SmootifyUserOptions` script, add the line to it instead: a second script replaces the first. To suggest the right country to a new visitor, see [Market suggestion](https://www.smootify.io/docs/features/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 gets the class `w-dyn-bind-empty`. Smootify does not redirect the visitor. Style the class, or hide the block, for those products.
- **Search engines.** The product’s structured data carries the price and currency of the current market. See [SEO and structured data](https://www.smootify.io/docs/start/seo).

## 1. Add a country switcher

Add a Custom element with the tag `country-switcher`, anywhere on the page, usually in the navbar. Put a Webflow **Dropdown** inside it.

```html
<country-switcher>
  <div class="w-dropdown">
    <div class="w-dropdown-toggle"><div>United States</div><img data-prop="flag"><div data-prop="currency-iso-code">USD</div></div>
    <nav class="w-dropdown-list">
      <a href="#" class="w-dropdown-link"><img data-prop="flag"><div data-prop="name">Country</div><div data-prop="currency-symbol">$</div></a>
    </nav>
  </div>
</country-switcher>
```

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

- **The toggle** shows the current country. Its elements with `data-prop` show the current country's values. The first element of the toggle that has no `data-prop` (the dropdown icon aside) gets the current country's name: put a Text block there, first. Any other element without `data-prop` placed before it, such as a wrapper, would have its content replaced by the name.
- **The links.** The first Dropdown link is the template: Smootify copies it once for each country of your markets and removes the other links you designed. The current country's link gets the class `w--current`. A pick changes the country and closes the dropdown.

**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 Image, or as the background of any other element;
- `data-prop="currency-iso-code"`, `"currency-symbol"`, `"currency-name"`: its currency.

**The currency elsewhere.** A Custom element with the tag `currency-code`, 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 instead of the Dropdown.** `country-switcher` also works with a popover: the first link or button inside the popover is the template. See [Popovers](https://www.smootify.io/docs/build/popovers). With both inside, Smootify uses the Dropdown.

**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. With Webflow Localization, the country switcher goes through Webflow:

- it opens the page of your locale for that language, so the address changes too, and from a product page it lands on the same product. A locale with the country, such as `it-IT`, comes before one without, such as `it`;
- if your site has no locale for that language, only the country changes;
- if the visitor is already on that locale, only the country changes.

Every value is in [country switcher attributes](https://www.smootify.io/docs/reference/attributes/country-switcher).

## 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 Dropdown or a popover, and the first link is the template of each location.

```html
<location-switcher>
  <div class="w-dropdown">
    <div class="w-dropdown-toggle"><div>Pickup location</div></div>
    <nav class="w-dropdown-list">
      <a href="#" class="w-dropdown-link"><div location="name">Store name</div><div location="address">Address</div></a>
    </nav>
  </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](https://www.smootify.io/docs/features/store-availability).

## 3. Languages

**Webflow Localization.** Smootify reads the locale of the page and asks Shopify for the product texts in that language. Shop policies, metaobjects and Magic Boxes come in that language and in the visitor’s market too, so an entry translated in Shopify, for example with Translate & Adapt, shows translated. Webflow’s locale switcher then changes the Shopify language too, and the country when the locale names one, such as `en-GB`, before it opens the page. On product and collection pages, its links use the handle translated in Shopify, and Smootify adds the alternate links search engines read when the page is missing them. Webflow Localization needs a Webflow site plan that includes it.

> [!WARNING]
> With Webflow Localization, the language changes only through Webflow's locale switcher, which also changes the page's address. Do not add another language picker: the page would stay in its Webflow locale, and the page and the Shopify texts would end up in different languages. The country switcher already goes through Webflow's locales.

**Weglot.** Smootify waits until Weglot has translated the page, then asks Shopify in that language, so prices and texts arrive in the right language the first time. Weglot’s language subdomains, such as `fr.example.com`, are covered by the licence of `example.com`.

For developers, the country and the language can also be changed from code: see [JavaScript API](https://www.smootify.io/docs/developers/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 Webflow 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](https://www.smootify.io/docs/features/eu-withdrawal).

## Coming from 1.x

- **Products out of the market** are no longer redirected: their block is hidden, and `condition="product-unavailable"` shows your own message on the page, such as one with a country switcher. See [Build the product page](https://www.smootify.io/docs/build/product-page#7-stock-sale-and-other-states).
- **`location-switcher`** reads `location="name"` and `location="address"` in the toggle too, where 1.x read `data-prop`.

## Before you publish

> [!STUCK]
> - **The switcher is gone, or lists no country.** Your store sells in one country only, so there is nothing to switch. Add markets under **Settings > Markets**.
> - **The switcher disappears.** It has no Dropdown link, or no link in its popover: the first link is the template.
> - **The toggle loses its content.** Its first element without `data-prop` gets the country's name. Put the name's Text block first.
> - **The currency in the footer never changes.** `currency-code` works only while the page has a `country-switcher`.
> - **Sales show everywhere but in Europe.** Shopify hides converted compare-at prices from EEA countries when your primary market is outside the EEA, because they lack the Omnibus price: see *Sales in Europe* above.
> - **Everything is sold out in one country.** No shipping zone covers that country, and Shopify reports the products as unavailable there. Add the country to a shipping zone under **Settings > Shipping and delivery**.
> - **A product block is empty in one country.** That market does not sell the product. Add it to the market's catalog in Shopify, or design for the empty block.
> - **The language changes with the country.** The country has the same code as one of your languages.
> - **Webflow's locale switcher is missing.** Webflow Localization needs a site plan that includes it.
> - **The page and the products are in different languages.** With Webflow Localization, the language was changed by something other than Webflow's locale switcher, such as a language picker of your own or custom code. Change it only with Webflow's locale switcher.