Estimating Prices in Other Currencies

Imagine you've built a US store and you'd like to appeal to customers in the United Kingdom and Europe? Wouldn't it be helpful if all your products were displayed with an estimated 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 JavaScript currency conversion library and a free foreign exchange rates conversion API we can add this feature to Squarespace.

Want more, or just some help?

The details that follow will allow you to build this feature into your Squarespace site. Of course we could go further, but that's where our Squarespace Developer services kick-in. Contact us if you'd like us to customise this, or you'd like something more advanced.

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>

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

You'll probably want to add a note about the pricing to explain that it is provided as a guide and is not intended to be 100% accurate. Although the exchange rates are updated daily, these are standard bank rates and may differ from the actual rate that a consumer will be charged when they use their credit or debit card.