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

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

Shopify will always process orders in your store's operating currency.

Demo

You can view a demo of this customization at https://gusikowski-inc5583.myshopify.com.

Multiple currency drop down

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

  1. From your Shopify admin, click Settings (or press G S):

    Settings

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

    Currency setting

  3. Click Change formatting.

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

    Currency formatting dialog

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

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

    Currency formatting dialog2

    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.

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

Edit your Customize theme page file

To add currency customization options to your Customize theme page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Click Config.

  4. Click settings_schema.json:

    Configs settings

  5. At the bottom of the file, copy and paste the following code after the last } and 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](https://help.shopify.com/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](http://www.xe.com/iso4217.php). Separate your currency codes with a space."
           },
           {
             "type": "text",
             "id": "default_currency",
             "label": "Default currency",
             "default": "USD"
           }
         ]
       }
     
  1. Click Save.

Configure the currency options

To configure your supported currencies:

  1. Go to the Customize theme page.

  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.

  3. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  5. Click Assets.

  6. Click Add a new asset.

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

    Add new asset
  8. 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 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 of your Customize theme page.

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.

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:

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

    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.

  3. 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
  <span class="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.

Want to discuss this page?

Visit the Shopify Community