Showing multiple currencies in Shopify

We’ve been getting a lot of emails lately from people asking what the DIY Stitch People book costs in their currency (GBP, AUD, etc). We normally just head to Google, grab the latest exchange, and reply to the email with the result. Today I decided to fix that process.
After some searching, I found the article I needed: Showing multiple currencies in a drop-down list on your storefront

It’s pretty straightforward if you know what you’re doing with Shopify theme files. If you follow the instructions in that article, you’ll end up with a currency dropdown in your header. I didn’t love the placement, so I took it a step further and put the currency dropdown right next to the display price:

Screen Shot 2015-02-10 at 7.41.50 PM

To get this, you just need to tweak where you’re including the snippet. To get it in the header, the article asks you to put it in theme.liquid. I instead put it on the product page, product.liquid, below the price (and outside of the span that contains the price):

<span class="current_price">
 {{ product.price | money }}
</span>

// Add this code
{% if settings.show_multiple_currencies %}
  <span class="currency_switcher">
    {% include 'currencies-switcher' %}
  </span>
{% endif %}

Then I just added some CSS (style.css.liquid) to get the dropdown sitting next to the price (but not too close):

.currency_switcher {
  display:inline-block; 
  margin-left:0.7em;
}

The result gave me that currency dropdown box right next to price, which I think is much more visible than having it buried in the header.

This Post Has 6 Comments

  1. Just wanted to thank you for the info. It was really helpful. Out of curiosity, how do you customize the field color, font, text style, etc just for the currency converter. I noticed that my global typography and colors for my Shopify theme are controlling these values at the moment. Thanks.

    1. You’ll just need to play around with the CSS a bit. I usually recommend making a new style sheet (something like custom.scss.liquid) and then adding it to your theme.liquid file. Then you can write any styles needed to override the default styling of the currency converter. Then if you ever change themes, you don’t have to dig through the theme’s stylesheet–you can just copy everything from your custom stylesheet and recreate in whatever new theme you’re using.

  2. Hello, thank you for the great tip. I did it and it looks great on my website. I am having only one problem now, when I select another currency, prices do not change. Do you know what could have had happened? thank you

    1. Does it work if you put it in the header? If you followed the instructions in the Shopify blog post, it should be working. Double check to make sure you have all the element classes and attributes named like they should be.

  3. I cannot thank you enough for this post! You made my website look so much better, thanks!

    1. Glad it helped! Looks great on your site.

Leave a Reply to Henry Cancel reply

Close Menu