How to setup a multi-currency Shopify store in Webflow
A currency selector is a small but powerful component that instantly makes your store feel more personal and accessible to international shoppers. In this guide, we’ll walk you through how to use the Shopyflow's currency selector component that updates prices dynamically using Shopify’s Storefront API, all within the Webflow Designer.
The Currency Selector is an interactive component that is created using a native Webflow Dropdown element and it allows users to select the store's active currency from the currencies set in the Shopify market settings.
Currencies are represented by their respective country codes (if defined in Shopify Admin Settings > Markets). You can find the complete country list here.
How to add a currency selector to your project
Follow the below video guide to understand it's structure and how you can add it to your storefront
- Open Shopyflow Webflow App in Webflow designer
- Go to Store Builder click Add new
- In the opening list click the Currency Selector to copy it to clipboard
- Paste it anywhere in your project
Currency selector structure
Currency selector is made of 3 types of components that are placed in a dropdown
Currency Displayer
Currency Displayer component shows the currently selected currency by the user. It is placed in the dropdown_toggle element and automatically populated with the inner contents of the selected Currency Selector Value
Currency Selector Wrapper
Currency Selector Wrapper contains the Currency Selector Value items. It is placed inside of the dropdown list element.
Currency Selector Value
Currency Selector Value is the actual clickable item that stores the country code of the assigned currency in it’s sf-currency-value attribute (eg. sf-currency-value="DE").
Using Webflow Locales List as currency selector
If you are using Webflow Localization, you can also use Webflow Locales List element as your currency selector. To utilize that element as a currency selector follow the steps below:
- Select the Locales List Wrapper element in the designer and give it sf-change-currency custom attribute.
- As its value, enter the list of country codes that would represent your locales (e.g. sf-change-currency="US,CA,UK,DE").
- The number of country codes in the list should match the number of locales in your Webflow Locales List.
Auto-detecing Customer's Location
You can use this code snippet to detect your customer's location and set the currency based on the market on which the detected country belongs. Add this code snippet to Webflow site settings into the head code.
<!-- Detect customer's location & set currency -->
<script>
(async () => {
const previousSelection = localStorage.getItem('_sf-country');
if (previousSelection) return;
const { country_code } = await fetch('https://ipwho.is').then((res) => res.json());
country_code && localStorage.setItem('_sf-country', country_code);
})();
</script>