Show multiple currencies in a drop-down list


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.


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.


If you plan to offer only one alternative currency, you might prefer this toggle customization instead.

Exchange rates used by Shopify are refreshed twice a day based on the rates at 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.

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


You can view a demo of this customization at

Multiple currency drop down


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:


… with this one:


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.

Edit your money formats

  1. In the Standards and formats section, find the Currency setting:

    Currency setting

  2. Click Change formatting.

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

    Currency formatting dialog

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


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

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

    Currency formatting dialog2

    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.

  6. Click Save.


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.

Add settings to the theme editor

To add currency customization options to the theme editor:

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Click Config.

  3. Click settings_schema.json:

    Configs settings

  4. At the bottom of the file, copy the following code and paste it after the last } but before the last ]:

         "name": "Currency",
         "settings": [
             "type": "paragraph",
             "content": "To offer multiple currencies on your online store, you must first [edit your store's currency formatting]({{ site.url }}/manual/using-themes/troubleshooting/help-script-find-money-formats)."
             "type": "checkbox",
             "id": "show_multiple_currencies",
             "label": "Enable currency conversion",
             "default": true,
             "info": "Even though prices are displayed in different currencies, orders will still be processed in your store's currency."
             "type": "select",
             "id": "currency_format",
             "label": "Format",
             "options": [
                 "value": "money_format",
                 "label": "Without currency ($10.00)"
                 "value": "money_with_currency_format",
                 "label": "With currency ($10.00 CAD)"
             "default": "money_with_currency_format"
             "type": "text",
             "id": "supported_currencies",
             "label": "Supported currencies",
             "default": "INR GBP CAD USD AUD EUR JPY",
             "info": "Use the country's ISO [currency code]( Separate your currency codes with a space."
             "type": "text",
             "id": "default_currency",
             "label": "Default currency",
             "default": "USD"
  5. Click Save.

Configure the currency options

To configure your supported currencies:

  1. Go to the theme editor.

  2. Click Currency:

    Currency options

  3. Under Format, choose whether to include the currency descriptor, such as USD or CAD, with the converted currency.

  4. Under Supported currencies, enter the code for each currency you want to support. Separate the supported currency codes with a space.

  5. Under Default currency, enter the code for the currency that you want each new customer to see. You'll probably want to use your store's operating currency:

    Multiple currencies 4

  6. Click Save.

Upload the jquery.currencies.min.js file as a theme asset

  1. Visit this GitHub page and download the ZIP package by selecting Download Zip from the Clone or download drop-down menu:

    Download zip

  2. Unzip the package you downloaded.

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Click Assets.

  3. Click Add a new asset.

  4. Click Choose File and browse to the package you unzipped:

    Add new asset
  5. 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.

Create a currencies snippet

  1. From the Edit HTML/CSS page, click Snippets.

  2. Click Add a new snippet:

    Add a new snippet

  3. Name your snippet currencies.

  4. Click Create snippet:

    Currencies snippet

  5. Copy and paste the code from this link into your new snippet.

  6. Click Save.

Include the currencies snippet

To include the currencies snippet in your theme:

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

  2. Locate the closing </body> tag at the end of the theme.liquid file.

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

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

    Closing body tag1

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

To create the currency-picker snippet:

  1. From the Edit HTML/CSS page, click Snippets.

  2. Click Add a new snippet:

    Add a new snippet

  3. Name your snippet currency-picker.

  4. Click Create snippet:

    Add currency picker snippet

  5. Copy and paste the code from this link into your new snippet.

  6. Click Save.

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:

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

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

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

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

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.

Want to discuss this page?

Visit the Shopify Community