How to Customize "Add to Cart" Button based on Customers Location

Store Design
, ,
1

Hey there! I am so grateful to have this incredible community to turn to for help right now!

For context to my following question - I’ve self-published a children’s book with my Mum and I am using Squarespace to build our main website, with Shopify as the “store” aspect only. I created a “good enough” version of the website for launch, and now I am in the midst of doing a full website revamp. This includes simplifying the store so that we can have one product page for each product and the interaction with the product be based on the customer’s location.

So what that would look like is that for our physical books, I am wanting to set it so the “add to cart” button will change for customers from different countries:

  • For customers from Australia, New Zealand, Canada, and the USA, the button would show “Add to cart”. This is because we currently have shipping setup for these countries.

  • For customers anywhere else in the world, the button would show "Go to local retailer website" (or something like that) and redirect them to https://books2read.com/myfriendbreath. Those orders will then be fulfilled by Amazon, Barnes & Noble, the Book Depository, etc.

I found this incredibly insightful tutorial which sparked the understanding that this is possible to set up. Thanks for the inspiration @coleatkinson

What I’m hoping for is the ability to set up the code so that it defaults to the external retailer link, and then changes to the “add cart” button for customers from the four countries where we can ship.

Also, as the tutorial was based on the Dawn theme - where I am using the Refresh theme - I couldn’t work out where the code would go.

I deeply appreciate any suggestions you can provide for how to make this setup possible!

With gratitude,

Kelsey :slightly_smiling_face:

2

Hi @Kookaburra_Kels , in your product-main.liquid, you’ll find a piece of code for your ‘add to cart’ button:

Replace it with:

{%if localization.country.iso_code != 'AU' and localization.country.iso_code != 'CA' and localization.country.iso_code != 'US' %}
[Go to local retailer website](https://books2read.com/myfriendbreath)
{%else%}

{%endif%}

Please be aware that this code will switch add to cart to other button for every product that is using this main-product section, so it will affect everything.
Update: Kelsey and me worked together on this, and this case was very specific, so not the whole solution is shared here. Specifically part: Based on selected variant of specific product show different button based on location.

3

Hi Marina,

I would like to do something very similar where North American companies can use the ‘Add to Cart’ button, UK and Germany go to their respective distribution websites (with the ability to add other regions as our distribution network grows), and everywhere else is directed to reach out to us directly for a quote. Is this something you could help with?

Thanks!

Sam

4

Hi @AHead ,

This can be implement using custom dev in the theme which will check the user’s current location and show appropriate CTA’s.

Please refer the below URL where we show normal checkout flow to Indian users and PayPal checkout for non-Indian customers

https://letsdebugcode.grtrading.in/products/change-header-logo-for-specific-in-collection-and-product-shopify

Let me know if you have any doubt of question on this.