Switch between multiple currencies

You can add a currency selector to your theme so that customers can choose their preferred currency while they're browsing your store, and then use that currency to pay for their orders at checkout.

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. The currency that your customer sees in your store can be set in a few 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 currency selectors work

You can use Shopify Liquid objects to support selling in multiple currencies with Shopify Payments. If you enable selling in multiple currencies with Shopify Payments, then your theme's currency selector must use these Liquid objects. Currency selectors that use different objects don't work when you enable selling in multiple currencies. If you have an incompatible selector in your theme, then you need to replace it with one that uses the currency objects.

Shopify’s Debut theme includes a currency selector that supports selling in multiple currencies by default. If your theme doesn't have a currency selector by default, then you need to create your own.

Example currency selector

Liquid currency objects

The following Liquid objects are useful if you need to create a currency selector:

  • currency - A form that you can use to add a currency selector to your store.
  • currency_selector - A theme tag form that can generate a drop-down list of currencies.
  • shop.enabled_currencies - An attribute for the shop object that returns the list of currencies that your store accepts.
  • cart.currency - An attribute for the Cart object that returns the currency of the cart. If your store sells in multiple currencies, then the cart.currency is the same as your customer's local (presentment) currency. Otherwise, the cart currency is the same as your store currency.

All Shopify Liquid money amounts are returned in the customer's local (presentment) currency.

Create a currency selector

You can use the currency form to create a currency selector that appears on all pages of your store.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Beside the name of the theme that you want to edit, click Actions > Edit code.
  3. 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.
  4. 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. Refer to the style and placement guidelines to learn more about adding a currency selector.

  5. 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.

  6. Click Save.

Your currency selector should now appear in your store.

Style and placement guidelines

The currency selector's typography and colors should match the rest of your theme's design. The following guidelines can help you add the currency selector to the right place in your theme.

If the utility links (such as Sign up or Log in) are near the cart, then the currency selector should be placed and styled in the same way as those links:

With customer account enabled

Example of selector with customer accounts enabled. Example of selector without customer accounts enabled.

With customer account disabled

Another example of selector with customer accounts enabled. Example of selector without customer accounts enabled.

If the utility links are widely separated from the cart, then the currency selector should be grouped with the cart for better visibility:

Example of a selector grouped with the cart icon

Placing the currency selector in relation to the cart

Because the cart is the most important element aside from your store's navigation links (such as Home or Shop), the currency selector should not compete with the cart. Customers should be interacting with the cart more than the currency selector.

If the cart is positioned on the right-hand side of the page, then the currency selector shouldn't replace its position. This helps to make sure that the cart is easy for customers to access.

Do this

Example of selector with customer accounts enabled. Another example of selector with customer accounts enabled.

Don't do this

Example of selector without customer accounts enabled. Example of selector without customer accounts enabled.

Placing the currency selector in a navigation drawer

If the currency selector is inside the navigation drawer, then it should be treated like the utility links (rather than the navigation links):

Example of a currency selector in the navigation drawer

Example currency selectors

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 %}

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 %}

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 your theme.js:

$('.shopify-currency-form select').on('change', function() {
  $(this)
    .parents('form')
    .submit();
});

After your customer chooses their currency, the prices in the storefront change to the new currency.

By default, your customer remains on the same page that they were on before they selected their currency. You can use the return_to type to send your customer to a different page. The following example redirects your customers to the collections page:

{% form 'currency' %}
  {{ form | currency_selector }}
  <input type="hidden" name="return_to" value="{{ routes.all_products_collection_url }}">
  <button type="submit">Update</button>
{% endform %}

Ready to start selling with Shopify?

Try it free