Show multiple currencies in a drop-down list

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.

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

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:

  2. Click Change formatting.

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

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

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

  6. Click Save.

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:

  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/change-the-layout/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](http://www.xe.com/iso4217.php). 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:

  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:

  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:

  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:

  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:

  3. Name your snippet currencies.

  4. Click Create 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:

  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:

  3. Name your snippet currency-picker.

  4. Click Create 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:

<p>
  {{ shop.name }} 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.
</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.

Ready to start selling with Shopify?

Try it free