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.
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. 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
popoverset toauto; - on it, the custom attribute
data-isset tomarket-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.
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
- Values
- The visitor's country: its name, flag, first language and currency.
Your store does not sell there
- Values
- The country the site shows now, here the United States.
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. 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
delaysets the seconds, 3 by default. - After the cookie banner. If Smootify’s cookie banner 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.
Fades in. The default.
Slides in from the top.
Slides in from the right.
Slides in from the bottom.
Slides in from the left.
An attribute of its own: the page behind stays sharp.
The rest is your design: position, size and colours. More in the market suggestion and its attributes.
Before you publish
Check these first
- 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
popoveranddata-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-switcherinside: 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.