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.
Follow the below video guide to understand it's structure and how you can add it to your storefront
Currency selector is made of 3 types of components that are placed in a dropdown
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 contains the Currency Selector Value items. It is placed inside of the dropdown list element.
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”).
