Switch between multiple currencies
Add a button that toggles between three or four currencies on your storefront.
Did you know?
The solution presented here won't work in the following themes: Venture and Boundless.
Before attempting this tutorial, you should complete the simpler version, which creates a button that toggles between two currencies. This tutorial builds on the work done there.
When you've created your
currencies-picker snippet, you need to make the following additions:
- Define an additional CSS class:
- Add your 3rd and 4th currencies:
Anything that's not on the far left or on the far right must have a class set to middle. Instead of the three-letter currency codes, you can use images or the currency symbols as content of the span elements. Only the data-currency attribute values matter here. The content of the span elements can be anything.