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.
At a glance
Dropdown toggle
The toggle: the current country
- Name
- Goes into the first element without
data-prop, the dropdown icon aside. Put a Text block there, first: any other element before it, such as a wrapper, would have its content replaced. - Values
- Elements with
data-propshow the current country.
Dropdown link
The links: one per country
- Template
- The first Dropdown link, copied once for each country of your markets. The other links you designed are removed.
- Current
- Its link gets the class
w--current. - A pick
- Changes the country and closes the dropdown.
More in the guide.
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 | data-prop | 6 |
Loading
Its code loads only on pages that have country-switcher.