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.