Show multiple currencies in a drop-down list

This page was printed on Jan 21, 2019. For the current version, visit https://help.shopify.com/en/themes/customization/currencies/show-multiple-currencies.

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Caution

This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.

This customization lets you provide a drop-down selector that lets customers view your prices in different currencies. Their currency selection will be stored in a cookie and used again on their next visit to your store. In the theme editor, you can choose which currencies you want to show in the drop-down menu.

Tip

No matter what currency you show on your store pages, Shopify will always process orders in your store's operating currency.

Caution

If you are using the Brooklyn theme, after completing all the steps in this tutorial you must edit the product-grid-item.liquidsnippet by replacing all occurrences of this filter:

money_without_trailing_zeros

… with this one:

money

Theme compatibility

This customization won't work in Shopify's Boundless and Venture themes.

If you're using an old version of the New Standard theme, your theme might come with multiple currencies built-in. In the theme editor, if you see a Money options section, your theme supports multiple currencies. You will still need to edit your money formats for the built-in module to convert prices on the page.

In each text field, copy and paste <span class=money> in front of the formatting text.

Caution

Do not put quotation marks around the word money in the span tags. Adding quotes will break the code.

In each text field, copy and paste </span> after the formatting text:

You might notice that by default the original HTML without currency field does not include a currency descriptor, such as USD or CAD. For this tutorial, we recommend that you do add the descriptor, to avoid any confusion between currencies later.

Click Save.

Caution

Place the span tags in the HTML with currency and HTML without currency text fields only. Do not place the tags in the Email with currency or Email without currency text fields.

The jquery.currencies.min.js file expands the currencies.js library provided by Shopify, and has to be used in conjunction with it. Don't worry about including currencies.js, as the next step will do that.

While currencies.js converts a money amount from one currency to another, jquery.currencies.min.js provides a function that converts all money amounts on a web page and displays a formatted result with a currency symbol and descriptor. Read more about the jquery.currencies.min.js file.

Include the currencies snippet

Copy and paste {% include 'currencies' %} just before the </body> tag.

The bottom of your theme.liquid file should now look something like this:

Click Save.

Create your currency picker

You now need to create a second snippet for your currency picker. The currency picker will be a drop-down menu that lists the supported currencies you entered in the Currency section in the theme editor.

Show the currency picker

The currency picker will appear as a drop-down menu, from which customers can select their preferred currency. It's up to you to decide where to place that drop-down menu on your store pages.

You'll probably want the drop-down menu to appear on every page, so the best place to put the currency picker code is in theme.liquid.

To place the currency picker in your theme.liquid:

From your Edit HTML/CSS page, under Layout, click theme.liquid.

Copy and paste {% include 'currency-picker' %} into the theme.liquid:

If you want to add the currency picker to your header, add your include code between <header> and </header>.

If you want to show the currency picker in your footer, add your include code between <footer> and </footer>.

Experiment with putting the code in different places to see where the currency picker appears on your store pages.

Click Save to confirm the changes to your theme.

Explain to your customers what happens at checkout

Transaction amounts at the checkout can only be shown in the operating currency of your store, which is specified in the Standards and formats section of your General settings page.

When your customers reach the checkout, transaction amounts revert back to your store's trading currency. You can edit your cart.liquid template to explain to your customers that the currency changes when they reach the checkout.

For example, you could copy and paste the following code into your cart.liquid file next to the checkout button:

<p>
{{ shop.name }} processes all orders in {{ shop.currency }}.
While the content of your cart is currently displayed in
<spanclass="selected-currency"></span>,
the checkout will use {{ shop.currency }} at the most current exchange rate.
</p>

The scripts you added update the content of any HTML element with a class set to selected-currency to show the selected currency. In this example, the span element will contain the customer's selected currency.