Show multiple currencies in a drop-down list

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. On your Customize theme page, you can choose which currencies you want to show in the drop-down menu.

Tip

Exchange rates used by Shopify are refreshed twice a day based on the rates at XE.com. Although rates are automatically scheduled to be updated at 00:00 GMT and 07:00 GMT, the updates might take place up to a couple of hours after their scheduled time.

Demo

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 built-in multiple currencies. From your Customize theme page, 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.

Edit your money formats

From your Shopify admin, click Settings (or press GS):

Scroll down to the Standards and formats section, where you'll see your Currency setting:

Click Change formatting.

Find the HTML with currency and the HTML without currency formats:

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

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

Caution

Do **not** use quotes around the word `money` in the opening `span` tags. Adding quotes will break the code.

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.

Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

Click Assets.

Click Add a new asset.

Click Choose File and browse to the package you unzipped:

Upload the jquery.currencies.min.js file.

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 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 of your Customize theme page.

Display 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 you must edit the theme.liquid file and place the currency picker in either the header or the footer element.

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

If your theme uses div elements in the top and bottom sections of your store pages instead of head and footer elements, you will need to use some basic HTML and CSS skills to place the currency picker exactly where you want it to be shown. This might be more difficult if your theme is responsive.

Click Save.

Caution

Do not add your currency picker to the head element, add it to the header element. The head element should never contain anything that's meant to be visible on the page; the head element is only meant to include meta data, scripts, and stylesheets. On the other hand, the header element is meant to hold visible content shown at the top of the web page such as your logo and navigation links. The header is where you need to add your currency picker.

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 without explanation. You can edit your cart.liquid template to explain to your customers that the currency will change 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 }} process all orders in {{ shop.currency }}.
While the content of your cart is currently displayed in
<spanclass="selected-currency"></span>,
you will check out using {{ 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 currently selected currency. In this example, the span element will contain the customer's selected currency.