Multi-currency stores can face a seemingly minor issue. At first glance, everything seems normal: Shopify Markets and regional pricing are set up to handle stores in USD, EUR, GBP and JPY, and the store looks fantastic. But when you add a swatch app, you suddenly realise that the prices listed next to swatches are displayed in the wrong currency. Even worse, the price is displayed in the base currency USD, even though the customer is browsing from Berlin.
This is NOT a trivial bug. This bug will prevent a large number of your site conversions. A French customer looking for shoes at your site sees the swatch price “$24” right next to the product price “22 EUR”. They will not trust your site for clearly displaying incorrect prices and will abandon their shopping cart. The rest of your site may look amazing but customers will not appreciate it if they encounter this bug. You will receive a large number of support tickets asking for help with this problem.
We fix this bug by using a combined listings app that supports Shopify Markets natively. Here’s how we fix it with Rubik Combined Listings, what to pay attention to when setting it up, and how to make sure the swatches have the right price for all markets.
In this post
- Why most swatch apps break multi-currency
- How Shopify Markets pricing works
- How Rubik Combined Listings handles it
- Regional product groups
- Testing your setup per market
- Frequently asked questions
Why most swatch apps break multi-currency
Most swatch apps were created prior to Shopify Markets. Typically, swatch apps cache product information on their own servers, and render the price from that cached value. The app is designed to operate in a way that doesn’t recognize whether the current non-default currency is in use on the default language site or not, which means the swatch will always display in the base shop currency.
Instead of building the swatch in a vacuum and then later importing the product data, we can build the swatch from within the Shopify Liquid context where the rest of the product page lives. Any data, such as the price, that lives on the product page comes from the same place in the Liquid context. Server-side currency conversion is done by Shopify, and since that’s happening, the swatch never needs to know the shopper’s currency.
Rubik does things differently. The prices on the swatches are picked dynamically from metafield references which match the active Shopify product context. This means that you don’t need to explicitly configure prices for different Markets but the Markets aware pricing will flow through automatically. As a result, the swatch labeled “$24” in the US Theme view is correctly rendered as “22 EUR” in the German Theme view.
How Shopify Markets pricing works
Shopify Markets allows you to set a price change for each region. This can be set automatically based on exchange rates, or you can manually set the EUR price and have it stay constant, or create rules for how to round the prices. You can also choose to include or exclude tax from the automatic price change for each market.
Note that all of this information already exists within Shopify’s product object, and any storefront code which requests (e.g.) the price of a given product would receive the correct value for the currently active market. Your swatch app need only ask for this information, and hopefully receive the correct result. No custom integration, no per-market mapping table, no call to a 3rd party currency service is necessary.
For more on Shopify Markets and combined listings, see international SEO with combined listings.
How Rubik Combined Listings handles it
Note: Groups are actually stored as Shopify metaobjects, and individual grouped product references are stored as metafield references within Swatch displays. Swatches display live prices for (in this example) 3 Different Priced products, and will display the appropriate currency as the active Shopify Markets context. Storefront will render the Swatch correctly.
p>Just like with most other plugins, you don’t need to set up anything special with Rubik Combined Listings. As usual, you can configure Shopify Markets exactly how you like. Simply install and configure the plugin, setup your groups, and you’re good to go. For display swatches, select a preset with price (#9 is the most recent and popular one). That’s it! Prices will update when you open your store in different markets.
Note: For the price-display preset, the currency symbol on the swatch repeats whatever Shopify uses for the currency in the currency settings, per market, following whatever Shopify uses for the money_format setting per market. Thus a French store would display the swatch with “22,00 EUR” and a US store would display “$24.00.” This is consistent with the rest of your store, and should already be happening on your product pages.
Regional product groups
Some merchants want to have different product groups for different markets. Maybe you sell a “Cold Weather Bundle” in the EU market but a “Beach Bundle” in the AU market. Or you may want to have different colors in different regions for supplier deal reasons.
How does it handle the scope of product publishing on Shopify? For a given market, it only includes the products that you’ve published to that market in the swatch group for your store’s scope. This means that even if a swatch group has 8 colours for the US, it might display 6 for the EU because two of those products haven’t been published there. No errors and no broken images, just the right swatches.
Native Shopify features are the minimum standard for third party apps to strive for. Writing work arounds for every product launch in every market seems like such a waste.
Testing your setup per market
Testing Prior to Production. Three Checks to Run
- Open your storefront in a private browser window. Use Shopify’s market switcher (or set the country via URL parameter) to switch between your active markets. Confirm the swatch prices update for each one.
- Spot check a product that has different availability per market. Confirm the swatch group shows fewer options in markets where products are unpublished.
- Check the rounding. If you use Shopify’s auto-conversion with rounding rules (so prices end in .99 or .95), the swatch should show the rounded price, not the raw conversion. If it shows the raw number, your theme is calling the wrong Liquid filter, not a Rubik bug.
The live admin preview in the Rubik theme dashboard allows you to test out content and plugins before publishing them to the live site. It gives you a semblance of a real store environment while allowing you to tweak mock versions of your products, enabling you to test the site out before populating the actual products. Pretty useful for identifying any pesky layout glitches before they reach a customer.
Page builders, themes, and Variant Images
The Markets aware functionality is also implemented across the other 7 page builders and all the 350 + Shopify themes we’ve verified with. The swatch block will read from the active Shopify product it is displayed in, no matter where it has been placed in the product page. The same applies to all the other Markets as well.
If your international store also requires different product page images to swap out based on color (so a EU store might show an EU model in the photos for a particular color for example), consider pairing up the Rubik Combined Listings app with the Rubik Variant Images app. The Rubik Combined Listings app will handle the combined listings and grouping, and the Variant Images app will handle the per-variant image filtering on the product page.
Link to Craftshift article on international Shopify SEO where we cover multi-region SEO setup.
See the live demo store, watch the tutorial video, or read the getting started guide.
Frequently asked questions
How do combined listings work with Shopify Markets and multi-currency?
Rubik Combined Listings pulls the product information, including the active market price from the current Shopify product context. The Currency setting will then automatically default to your Shopify Markets configuration – no market by market setup required. You can then set up the Markets feature in the Settings app as you would normally, and the color swatches will then render with the correct currency for each market.
Will the swatch price show the right currency symbol per market?
This example uses the price-display swatch preset set to use Shopify’s money_format setting per market. Therefore, a US visitor will see $24.00 and an EU visitor will see 22,00 EUR.
What if a product in a group is not published to a specific market?
Rubik respects the publishing scope – i.e. products that are not published to a particular market do not appear in the storefront colour swatch for that market. Thus, a group of 8 different colours might appear in the storefront swatch for some markets with 2 unpublished colours.
Does Rubik respect Shopify Markets rounding rules?
Yes. This swatch displays the Shopify price for the current market, and includes the rounded price when there are auto-conversion with rounding price rules.
What about tax-inclusive vs tax-exclusive pricing?
Same answer. Rubik returns whatever Shopify returns for the active market. So if your EU market is configured for tax-inclusive pricing, and your US market is tax-exclusive, it should all work out automatically for the swatches.
Does it work with fixed market prices, not just auto-conversion?
Yes. Fixed prices per market in Shopify Markets are provided by Shopify with the same auto-converted prices that Rubik displays. Rubik simply displays whatever price Shopify provides.
