# country-switcher

> Lists the market's countries in a Webflow dropdown or a popover and changes country on a pick; when Shopify has a language with the country's ISO code (IT → Italian) it changes language too. With Webflow Localization (a Webflow locale switcher, or the page's hreflang alternate links) the language goes through Webflow: the page moves to that language's locale (it-IT before it when the site has both), and without a locale for that language only the country changes.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/country-switcher  
Updated: 2026-10-13

## At a glance

- **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.

More in [the guide](https://www.smootify.io/docs/features/markets).

## Where it can go

- **Anywhere** on the page.
- **Must contain one of** `.w-dropdown .w-dropdown-link`, `[popover] :is(a, button:not([popovertarget]))`.
- **Out of place,** Smootify removes it from the page: a .w-dropdown without links removes it, no popover fallback; also (2.0) when the store sells in one country (availableCountries has one entry), since there is nothing to pick.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Country switcher](https://www.smootify.io/docs/reference/attributes/country-switcher) | `data-prop` | 6 |

## Loading

Its code loads only on pages that have `country-switcher`.
