How to customize free shipping bar to show progress for different free shipping thresholds/countries

[wagw_brand]

Hi,

I'm using broadcast theme and it seems like the free shipping progress bar can only be set to one number. I have different free shipping thresholds for different countries/markets so I was wondering if there is a way to change it to show as such?

Thanks

[Dotsquares]

hi @wagw_brand 

By default the Broadcast theme only supports one static free shipping threshold in the progress bar.

If you have different thresholds for different countries or markets, you'll need to customize the code a bit so the threshold changes dynamically based on the customer’s location.

Here’s one way to approach it:
1. Use Geolocation (Shopify or JavaScript-based)
You can detect the customer’s country using one of these methods:

Shopify’s request.country object (if you’re using Shopify Markets).

A JavaScript-based geolocation API (like IPinfo or GeoIP) for more flexibility.

2. Update the Threshold Logic
In your cart or header file (where the progress bar lives), locate the part where the threshold is defined. It might look something like:

{% assign free_shipping_threshold = 50 %}

You can update it like this:

{% if request.country == 'US' %}
  {% assign free_shipping_threshold = 50 %}
{% elsif request.country == 'CA' %}
  {% assign free_shipping_threshold = 75 %}
{% elsif request.country == 'UK' %}
  {% assign free_shipping_threshold = 60 %}
{% else %}
  {% assign free_shipping_threshold = 100 %}
{% endif %}

3. Adjust the Progress Bar Display
Wherever the progress bar calculates the progress (usually with cart.total_price), update the logic to use the dynamic free_shipping_threshold.

{% assign cart_total = cart.total_price | divided_by: 100 %}
{% assign remaining = free_shipping_threshold | minus: cart_total %}

{% if cart_total >= free_shipping_threshold %}
  <p>🎉 You’ve got free shipping!</p>
{% else %}
  <p>You're {{ remaining | money }} away from free shipping.</p>
{% endif %}

[wagw_brand]

Hi and firstly really appreciate the reply and advice. I'm a total newbie at this and we are Asia based (not sure if that matters) but yes I am using Shopify Markets (we have only Basic plan so only 3 markets). For your point #1, do I need to change anything if I have Markets set up? For your point #2, how can I find the code and edit it? Haven't done any code editing before so not sure where to access that on my site.

Sorry for all the questions and thank you in advance for even taking the time to answer 🙏

[loyalty-wizard]

Unfortunately that's a limitation of that specific feature with broadcast theme - You can see the official docs here that they don't actually support multi-currency for the free shipping progress bar.

https://broadcast.presidiocreative.com/header/announcement-bar-settings/free-shipping-message

The solution suggested above may work - if not, you may be best off using a dedicated app designed around this feature in particular, which will likely have the features you need bundled in - then you can go ahead and disable the one included as part of the theme.