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

Kookaburra_Kels · ‎04-06-2023

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 🙂

MarinaPetrovic · ‎04-20-2023

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

<product-form class="product-form">
                  <div class="product-form__error-message-wrapper" role="alert" hidden>
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      class="icon icon-error"
                      viewBox="0 0 13 13"
                    >
                      <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                      <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                      <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                    </svg>
                    <span class="product-form__error-message"></span>
                  </div>

                  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    <input
                      type="hidden"
                      name="id"
                      value="{{ product.selected_or_first_available_variant.id }}"
                      disabled
                    >
                    <div class="product-form__buttons">
                      <button
                        type="submit"
                        name="add"
                        class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            role="presentation"
                            class="spinner"
                            viewBox="0 0 66 66"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                      </button>
                      {%- if block.settings.show_dynamic_checkout -%}
                        {{ form | payment_button }}
                      {%- endif -%}
                    </div>
                  {%- endform -%}
                </product-form>

Replace it with:

{%if localization.country.iso_code != 'AU' and localization.country.iso_code != 'CA' and localization.country.iso_code != 'US' %}
<a href="https://books2read.com/myfriendbreath" class="button button--full-width" href="YOUR_URL">Go to local retailer website</a>
{%else%}
<product-form class="product-form">
                  <div class="product-form__error-message-wrapper" role="alert" hidden>
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      class="icon icon-error"
                      viewBox="0 0 13 13"
                    >
                      <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                      <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                      <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                    </svg>
                    <span class="product-form__error-message"></span>
                  </div>

                  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    <input
                      type="hidden"
                      name="id"
                      value="{{ product.selected_or_first_available_variant.id }}"
                      disabled
                    >
                    <div class="product-form__buttons">
                      <button
                        type="submit"
                        name="add"
                        class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            role="presentation"
                            class="spinner"
                            viewBox="0 0 66 66"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                      </button>
                      {%- if block.settings.show_dynamic_checkout -%}
                        {{ form | payment_button }}
                      {%- endif -%}
                    </div>
                  {%- endform -%}
                </product-form>
{%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.

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

AHead · ‎10-31-2024

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