# Market suggestion

> A popover that tells a new visitor which country, currency and language the store has for them, once per browser, a few seconds after the page loads.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/features/market-suggestion  
Updated: 2026-10-12

A visitor from Italy lands on your site and sees prices in dollars. The market suggestion is a popover that Smootify opens once, a few seconds after the page loads, to tell them the store also sells in their country, with its currency and language. You design it in Webflow. With a country switcher inside it, the visitor changes market in one click.

> [!NOTE]
> The suggestion uses the markets you set up in Shopify: see [Markets, currencies and languages](https://www.smootify.io/docs/features/markets). There is nothing to turn on in the Smootify dashboard.

## How it fits together

What Smootify needs:

- a popover: Webflow’s Popover element, or a Div block with the custom attribute `popover` set to `auto`;
- on it, the custom attribute `data-is` set to `market-dialog`.

What is up to you: the text, the layout, where the panel sits, and which parts you show. There is no trigger to add: Smootify opens the popover itself.

```html
<div id="market" popover="auto" data-is="market-dialog" delay="5">
  <img market-dialog="flag">
  <div>You seem to be in <span market-dialog="country">Italy</span>.</div>
  <div>We ship there, with prices in <span market-dialog="currency">EUR</span>.</div>
  <button data-action="continue">Shop in <span market-dialog="country">Italy</span></button>
  <button popovertarget="market" popovertargetaction="hide">Stay here</button>
</div>
```

The popover can sit anywhere on the page. Put it in a component used on every page, such as the navbar, so it can open wherever the visitor arrives.

## 1. Show the visitor’s market

Inside the popover, add a custom attribute to a Webflow element to fill it:

| Attribute | What it shows |
|---|---|
| `market-dialog="country"` | the country’s name |
| `market-dialog="flag"` | its flag, on an Image, or as the background of any other element |
| `market-dialog="language"` | its first language, written in that language, such as “Italiano” |
| `market-dialog="currency"` | the currency code, such as `EUR` |
| `market-dialog="currency-symbol"` | the currency symbol, such as `€` |
| `market-dialog="currency-name"` | the currency’s name |

When your store sells in the visitor’s country, these show that country. When it does not, they show the country the visitor is on now:

- **Your store sells in the visitor's country**, such as a visitor from Italy and an Italian market: the `market-dialog` values show that country (Italy, EUR, €, Italiano).
- **Your store does not sell there**, such as a visitor from Brazil: they show the country the site shows now (United States, USD, $, English).

Write a text that reads well in both cases.

## 2. Let the visitor change market

A Custom element with the tag `button` and the custom attribute `data-action="continue"` switches to the market the suggestion shows, when it is not the current one, then closes it. Label it with what it does, such as “Shop in Italy”.

Any other way of closing keeps the current market: a close button of the popover, Escape, a click outside. Give the visitor that choice too, with a button such as “Stay here”.

To let the visitor pick another country instead, put a `country-switcher` inside the popover, built as in [Markets](https://www.smootify.io/docs/features/markets). With a switcher inside, `data-action="continue"` only closes the suggestion: the visitor chooses in the switcher.

## 3. When it opens

- **Once per browser.** Once the visitor closes it, by any of the three ways, it does not come back in that browser. Until then, it opens again on the next page.
- **After a delay.** It opens a few seconds after the page loads. The custom attribute `delay` sets the seconds, 3 by default.
- **After the cookie banner.** If Smootify’s [cookie banner](https://www.smootify.io/docs/features/cookie-consent) is showing, the suggestion waits until it closes, then waits its delay again.
- **Only with a country.** If Smootify cannot tell the visitor’s country, nothing opens, and the next page tries again.
- **Only with more than one country.** A store that sells in one country has nothing to suggest: the popover never opens, and opens as usual once you add a market in Shopify.

**How the country is found.** Smootify asks the site’s own domain: Webflow hosting sits behind Cloudflare, which knows the visitor’s country, so the visitor’s IP address is not sent to any other service. Only where that answer is missing, such as on a site hosted elsewhere, it asks the geolocation service country.is.

> [!TIP]
> To see the suggestion again while you test, open the site in a private window.

## 4. Style how it opens

Custom attributes on the popover: `animation-name` sets how it comes in, with one of the first five values below, and `disable-blur` takes the blur off the page behind it. `animation-duration` sets how long the animation lasts, `300ms` by default.

- `animation-name="fade-in"` (the default): the popover fades in.
- `animation-name="slide-in-top"`: it slides in from the top.
- `animation-name="slide-in-right"`: it slides in from the right.
- `animation-name="slide-in-bottom"`: it slides in from the bottom.
- `animation-name="slide-in-left"`: it slides in from the left.
- `disable-blur`: the page behind it is not blurred.

The rest is your design: position, size and colours. More in [the market suggestion](https://www.smootify.io/docs/reference/elements/popover-data-is-market-dialog) and [its attributes](https://www.smootify.io/docs/reference/attributes/market-dialog).

## Before you publish

> [!STUCK]
> - **It never opens.** The visitor already closed it once in this browser: test in a private window. Or your store sells in one country only: add a market in Shopify. Otherwise, check that the element has both `popover` and `data-is="market-dialog"`.
> - **It opens much later than the delay.** The cookie banner was open: the suggestion waits for it to close, then waits its delay again.
> - **Continue does not change the country.** The popover has a `country-switcher` inside: then Continue only closes it, and the visitor picks the country in the switcher.
> - **It shows the current country, not the visitor's.** Your store does not sell in the visitor's country, so there is no other market to suggest.
