Storefront Web Components Country?

Technical Q&A
1

Hi there i am using the web components to embed Shopify products onto my website (so on an external website to Shopify) (Shopify Storefront Web Components Playground)

This is working well however i wish the prices to change currency depending on the site vistiors (e.g.show GB or US prices).

Using the country= parameter (below) i can manually set the country and this then (with the ‘money’ tag (below) shows the price in the right currency which is great)

//////////////////////////
<shopify-store public-access-token=“xxx” id=“store” store-domain=“https://xxx.myshopify.com” country=“GB” language=“en”>

/////////////////////

So my question is how do i make the ‘country’ tag dynamic? Is there a tag in the web components where i can output the 2 letter country code?

2

Hello @macleanmhl ,

Try this one
country=“{{ localization.country.iso_code }}”

3

Wow thanks for quick reply! I added this code within my site within the product detail page just to test (within a shopify-context tag) and nothing seems to be output?

4

Since the components run on your own site, you have to work out the country yourself and set the attribute. There’s no built-in auto geolocation attribute on shopify-store that I’m aware of, country just takes a static two letter code, so the job is: detect the visitor’s country, then write that code into the attribute. Cleanest is server side, if your site sits behind Cloudflare, read the CF-IPCountry request header and render country with it, so it’s right on first paint with no currency flash. If you can only do it client side, Cloudflare’s free trace endpoint works with no API key:

const res = await fetch('https://www.cloudflare.com/cdn-cgi/trace');
const txt = await res.text();
const country = txt.match(/loc=(\w{2})/)?.[1] || 'GB';
document.querySelector('#store').setAttribute('country', country);

Two things to watch. Set the attribute as early as you can client side or you’ll get a brief flash of default currency pricing before it updates, and clamp the detected code to markets you actually sell to with a fallback like GB or US, otherwise an unsupported country can drop you back to base prices.

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

5

Thanks so much for the clear answer and solution - its much appreciated

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed