Displaying Multiple Currencies in Shopify (The Easy Way)

I recently happened upon The Noise Goods store. Their solution to displaying alternative pricing is pretty neat. They simply show a row of prices under the headline price

I had a bit of a nosey around to see how they did it and thought I’d do a short write up on what I found.

Getting the conversion data

Shopify provides a JS file with all the up to date exchange rates and a handy function to convert from one to another. They update the values twice a day, and using this file means you can have the rates stay up to date without needing to do anything.

To get the JS, you’ll need to include it in your template, like so:

<!— layout/theme.liquid —>

{% if template contains 'product' %}
    
    <!— … Your stuff … —>
    
    {{ "/services/javascripts/currencies.js" | script_tag }}
    
{% endif %}

Shopify's Currencies.js

Once you have this file included, you get access to a global Currencies object. The first property is a rates object with all the exchange rates as nodes (USD is the baseline). You can access the values using the corresponding 3 digit country code, like this:

// Get GBP conversion rate 

Currency.rates.GBP /* or */ Currency.rates['GBP']

The second property is a handy function for converting one to another (reprinted here in its entirety):

var Currency = {
  
  /* … rates … */
  
    convert: function(amount, from, to) {
        return (amount * this.rates[from]) / this.rates[to];
    }

}

The codez

All that's left is to put it all together:

<!— layout/theme.liquid —>

{% if template contains 'product' %}
    
    <!— … Your stuff … —>
    
    {{ "/services/javascripts/currencies.js" | script_tag }}

    <script>
        
        // Set the current price
        var price = {{ current_variant.price }}
        
        // Returns the current (approximate) price in Euros
        function getEuros() {
            return (Currency.convert(price, 'GBP', 'EUR')/100).toFixed(2);
        }
        
        // looks for an element with an ID of "euroPrice" and replaces the content with a sring
        document.getElementByID('euroPrice').html = '€' + getEuros() + ' EUR' 
        
    </script>

{% endif %}

You could also tie this up with any function you have that fires when a variant is selected/changed. This way if the price changes, so can your conversions.

Here's a little demo where you can adjust the price to see it in action:

Are you building a store? Thinking of moving to Shopify? If you are and you need some advice, get in touch! We'd love to hear from you.