Displaying Prices in Other Currencies

28 May 2018: Fixer.io will be discontinuing the free legacy currency lookup service on 1st June 2018. We're in the process of updating this article to take account of these changes and to use a different API. The newly released fixer.io API still has a free option but it is limited to 1,000 API calls per month and must use Euro as the base currency. To use another base currency and/or to have more than 1,000 lookups per month, you must use one of the paid plans starting at US$10 per month.

You've built your online store with Squarespace and you'd like to appeal to customers in other countries? Wouldn't it be helpful if all your products were displayed with a converted price in Pounds Sterling (£) and Euros (€) alongside your US Dollar pricing?

In Squarespace, it's reasonably easy to build an online store and start selling your products or services to customers around the world. However, your store can only manage transactions in your one currency - your own country's currency. This isn't unusual, but it can put off potential customers who are browsing your store from another territory, because they have no idea how much your product is in their currency.

Adding Live Currency Conversions

With some JavaScript, a simple currency conversion library and a free foreign exchange rates conversion API you can add this feature to Squarespace - for free. Below I provide all the details you need to add this feature to your Squarespace store. All you need is a little knowledge about about HTML and Javascript. This solution is copyrighted, like all our tips. You are free to use it on your own website but you must not publish, distribute or sell it, or make any other claim to it. 

Want some help?

Want to add this feature yourself? I provide all the details here to allow you to add this feature to your Squarespace store - for free - if you understand a little about HTML and Javascript. The solution is copyrighted, but you are free to use it on your own website as long as you do not distribute it to others or sell it. 

Want us to help?

Of course we could make the solution even better and customise it for your site. That's where our Squarespace Developer service kicks in. Contact us if you'd like us to customise this, or you'd like something more advanced. For example

  • Would you like different currencies?
  • Would you like them to be displayed in a particular way?
  • Would you like to add prices in your customer's home currency automatically?
  • Would you like the customer to be able to change the currency using a currency selection box?

Getting Started

Let's build this example using the Supply template. This template is specifically designed for online stores. Here's what it will look like when we've added the additional pricing:

We already have some products in our store, and they are priced in US Dollars. If you haven't already added any products, you'll want to do this first. 

Technical Stuff (skip this if you're not technical)

We're going to use a simple JavaScript currency conversion library called money.js. It is a simple library with just one function - to convert a money value from one currency into another. It is free, has no dependencies and is very small at just over 1Kb. At the time of writing, the current version is hosted on Cloudflare at //cdnjs.cloudflare.com/ajax/libs/money.js/0.2.0/money.min.js.

In order to perform currency conversion using this library, you'll need a reliable source of real-time exchange rate information. I've used Fixer.io because it is a free JSON API that provides current (and historical) foreign exchange rates published by the European Central Bank and it's updated daily around 4PM CET.

Adding the Code

Log into your site and navigate to Settings > Advanced > Code Injection. In the Footer box (not the Header box!) of the Code Injection page, add the following code:

<script src="//cdnjs.cloudflare.com/ajax/libs/money.js/0.2.0/money.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var priceElement = document.getElementsByClassName("sqs-money-native");
if (priceElement.length > 0) {
  var price = document.getElementsByClassName("sqs-money-native")[0].innerText;
  var gettodaysrates = function(getrates) {
    fx.rates = getrates.rates
    var eurprice = fx(price).to("EUR").toFixed(2)
    var gbpprice = fx(price).to("GBP").toFixed(2)
    $(".product-excerpt").prepend("<p>Approximate price in other currencies:</p><p>Euro: €" + eurprice + "</p>GBP : £" + gbpprice + "<hr>")
  }
  $.getJSON("//api.fixer.io/latest?base=USD", gettodaysrates)
}
</script>

If you're using the Galapagos template, change $("product-excerpt") to $("productitem-excerpt").

The first line loads the money.js library. The second loads the JQuery library. The rest of the code looks for the US Dollar price on the page, converts it into the other two currencies and then displays them below the original price within the product excerpt text. If you're store is in a different currency, you'll need to change some of the currency names. Finally a horizontal line is added to separate these details from the rest of the product information.

Save the changes, and then try using the page. It's best to do this from a private/incognito window where you're not logged into your site.

Remember the Squarespace checkout will always be in your home currency, and this cannot be changed. You'll probably want to add a note about the pricing to your terms and conditions to explain that the other currencies are provided as a guide and are not necessarily 100% accurate. The exchange rates are updated daily, but these standard bank rates may differ from the rate charged by the customer's card issuer.