Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
Online shopping has become even more popular and e-commerce stores have begun to expand their reach across borders. As a Shopify store owner looking to expand into international markets you must know that to increase your revenue your store needs to have a multiple currency selector.
By adding a multiple currency selector to your store, customers can now purchase and checkout their products easily without having to bother about doing manual conversions. Showing customers prices in their local currency which they are used to makes them comfortable enough to immediately make payment.
To add a multiple currency selector to your Shopify store, you only need to input a few lines of code and we’ll walk you through doing this.
Offering customers multiple currency options
After you enable selling in multiple currencies with Shopify Payments, your customers can browse your store and check out in their preferred currency. You can set the currency customers see in your store in different places:
- A currency selector - If you want your customers to choose their local currency, then your theme needs a currency selector.
- A link - You can send your customers a link that opens your store in a specific currency.
- Your store - When a customer visits your store, your store chooses the currency to display based on the geolocation of your customer. Geolocation is available on the Shopify Plus plan only.
How to Add A Multiple Currency Selector to Your Shopify Store
Follow this step-by-step guide to add a multiple currency selector to your Shopify store on your own:
- From your Shopify admin, go to Online Store > Themes.
- Beside the name of the theme that you want to edit, click Actions > Edit code.
- If you're using the Debut theme, then click header.liquid in the Sections directory. If you’re using a third-party theme that doesn’t have a header.liquid file, then click theme.liquid instead.
- Find the <header> section in the file, and then add the currency selector code in a place that doesn't compete with the cart icon. We added 3 different currency switchers, so choose whichever works best for you
1. The following example creates a currency selector that sorts and displays the currencies by their ISO code and currency symbol:
{% form 'currency' %}
{{ form | currency_selector }}
<button type="submit">Update</button>
{% endform %}
2. The following example also creates a currency selector that sorts and displays the currencies by their ISO code and currency symbol. This example uses JavaScript to trigger the currency change rather than a button:
{% form 'currency' %}
{{ form | currency_selector }}
{% endform %}
3. The following example contains a customized currency selector:
{% form 'currency' %}
<select name="currency">
{% for currency in shop.enabled_currencies %}
{% if currency == cart.currency %}
<option selected="true">{{currency.iso_code}} {{currency.symbol}}</option>
{% else %}
<option>{{currency.iso_code}}</option>
{% endif %}
{% endfor %}
</select>
{% endform %}
To make the currency change occur when a selection is made from the dropdown, you need to add the following JavaScript code to the bottom of your theme.js:
function currencyFormSubmit(event) {
event.target.form.submit();
}
document.querySelectorAll('.shopify-currency-form select').forEach(function(element) {
element.addEventListener('change', currencyFormSubmit);
});
Note
Some themes might require you to wrap the {% form 'currency' %} tag in an HTML element. For example, in Shopify’s Pop theme, you need to use a <li> element.
- Optional: If your theme has separate styling for the mobile drawer, then you might want to add separate CSS classes so that the currency selector matches the design on mobile.
- Click Save.
Your currency selector should now appear in your store.
Creating a multiple currency selector has never been easier and EcomExperts has got you covered every step of the way. This way, you can increase your sales by making sure your customers have a convenient payment currency skipping the extra bank fees and conversion calculations.
Be sure to leave us a comment below to let us know if this tutorial works for you and any other tutorials you’d like to see.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus

How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours