Configuring Buy Button for Market Specific Pricing

[Joe_Riggi]

Hey Folks,

We're currently selling in both the US and Canadian markets using Shopify's Market feature, and everything's running smoothly.

We have different prices and stock levels for each country, and we don't do any currency conversions.

Up until now, we were only selling to the U.S. through our independent PHP-based website, which automatically detects the visitor's country and enables the sales feature (Buy Button) if they're in the U.S.

Now, I want to implement the same functionality for Canada.

I'm having trouble configuring the Buy Button. When a visitor from Canada arrives on the independent site, they still see US prices. Even after adding items to the cart, US prices are shown.

But when they go to checkout (which happens on Shopify), and they select Canada as their country, the prices switch to CAD, leading to different prices than what they initially saw.

My question: How can I configure the Buy Button to display the correct country-specific pricing right from the start?

[Small_Task_Help]

Hi,

You can create separate Buy Buttons and toggle them based on geolocation

Code example

// Assuming two Buy Buttons: one for US and one for Canada
const usBuyButton = document.getElementById('us-buy-button');
const caBuyButton = document.getElementById('ca-buy-button');

// Detect visitor country using a geolocation API or custom function
const visitorCountry = getVisitorCountry(); // Returns 'US' or 'CA'

// Show the relevant Buy Button
if (visitorCountry === 'CA') {
  caBuyButton.style.display = 'block';
  usBuyButton.style.display = 'none';
} else {
  usBuyButton.style.display = 'block';
  caBuyButton.style.display = 'none';
}