Free Shipping Bar Issue

Store Design

Topic summary

A user running The Body Shop Denmark’s store on the Broadcast Theme is experiencing a bug with the built-in free shipping bar. When the cart total exceeds the 400 KR threshold for free shipping, the bar displays a negative amount instead of showing a “FREE Shipping” message.

Troubleshooting attempts:

  • Multiple developers requested access to the free-shipping.liquid file code
  • The user shared the complete code from their theme’s free shipping component
  • Several solutions were proposed involving conditional logic to check if the cart total exceeds the threshold

Proposed fixes:

  • Add an if/else condition to display “FREE Shipping” when remaining_amount <= 0
  • One developer (namphan) provided a complete code replacement modifying the limit_currency_new variable logic
  • Another developer (Bang_T) suggested a simpler fix replacing the message assignment with conditional logic, including Danish text “Du fik gratis fragt” (You got free shipping)

Current status:

  • The user tested Bang_T’s solution but reported it still doesn’t work correctly (showing unexpected display)
  • Bang_T requested collaborator access (code: 3387) to investigate directly
  • The issue remains unresolved and ongoing
Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

www.thebodyshop.dk
I am using the Broadcast Theme
I have set up a free shipping bar in my cart as that as from 400KR the customer gets FREE Shipping.
However, when i go over the 400Kr required - it gives me a minus amount instead of stating you got FREE Shipping

image
image374×865 27.8 KB

2

Hi @TBS2023

What free shipping bar app are you using?

3

the one included in the theme

4

Hi @TBS2023,

Please send me the code of cart-drawer.liquid file, I will check and guide you

5

Hi,

Hope this will help

  • Locate file that has the free shipping logic.Might be - cart.liquid, cart-notification.liquid,free-shipping-bar.liquid or cart-progress.liquid

  • Check for condition that checks the cart total

Example

{% assign shipping_goal = 400 %}
{% assign remaining_amount = shipping_goal | minus: cart.total_price | divided_by: 100 %}

  • Fix negative value issue

Code example

{% assign shipping_goal = 400 %}
{% assign remaining_amount = shipping_goal | minus: cart.total_price | divided_by: 100 %}

{% if remaining_amount > 0 %}
  You are {{ remaining_amount | round }} kr away from FREE Shipping!
{% else %}
  You got FREE Shipping!
{% endif %}
6

Hi @TBS2023

I recommend that you use the feature Free Shipping Bar of the BiDeal Bundle Volume Discounts app.

image
image398×930 56.4 KB

It’s smart & only 1 step for setup, easy to customize style without knowledge about coding.

Let’s try it, and I can support you for free.

7

This is my code
Not sure why it doesn’t work

{%- if show_message -%}
  {%- liquid
    assign limit = free_shipping_limit | plus: 0
    assign limit_currency = limit | times: 100
    assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100
    assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit
    assign percent = 100 | minus: percent

    if settings.currency_code_enable
      assign limit_currency = limit_currency | minus: cart.total_price | money_with_currency
    else
      assign limit_currency = limit_currency | minus: cart.total_price | money_without_trailing_zeros
    endif

    capture left_to_spend
      echo '<span data-left-to-spend>' | append: limit_currency | append: '</span>'
    endcapture

    assign message = message | replace: '||amount||', left_to_spend
    assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t

    capture free_shipping_classes
      if is_cart_drawer
        echo 'drawer__message '
      endif

      if template.name == 'cart'
        echo 'cart__message '
      endif

      echo 'free-shipping'

      if subtotal_without_currency >= limit and qualified_shipping_message != blank
        echo ' is-success'
      endif
    endcapture
  -%}
8

Hi @TBS2023,

Please send me the code of free-shipping.liquid file, I will check and guide you

10

i dont seem to be able to find the threshold - would you mind having a look as collaborator?

14 
{% comment %}
  Renders Free shipping message

  Accepts:
  - message: {String} Free shipping text (required)
  - gradient: {String} Progress bar gradient color
  - show_wheel: {Boolean} Show progress wheel
  - show_progress_bar: {Boolean} Show progress bar
  - is_cart_drawer: {Boolean} Is cart drawer

  Usage:
  {% render 'free-shipping', message: block.settings.message, show_wheel: true, show_progress_bar: false, is_cart_drawer: false %}
{% endcomment %}

{%- liquid
  assign free_shipping_limit = settings.free_shipping_limit
  assign show_message = false
  if message != blank
    assign show_message = true
  endif

  if gradient != blank
    assign style = '--FREE-SHIPPING-GRADIENT: ' | append: gradient | append: ';'
  endif

  if color_scheme != blank
    assign selected_color_scheme = color_scheme | strip
    assign scheme_accent_color = settings.color_schemes[selected_color_scheme].settings.accent
    assign style = '--FREE-SHIPPING-GRADIENT: ' | append: scheme_accent_color | append: ';'
  endif
-%}

{%- if show_message -%}
  {%- liquid
    assign limit = free_shipping_limit | plus: 0
    assign limit_currency = limit | times: 100
    assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100
    assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit
    assign percent = 100 | minus: percent

    if settings.currency_code_enable
      assign limit_currency = limit_currency | minus: cart.total_price | money_with_currency
    else
      assign limit_currency = limit_currency | minus: cart.total_price | money_without_trailing_zeros
    endif

    capture left_to_spend
      echo '<span data-left-to-spend>' | append: limit_currency | append: '</span>'
    endcapture

    assign message = message | replace: '||amount||', left_to_spend
    assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t

    capture free_shipping_classes
      if is_cart_drawer
        echo 'drawer__message '
      endif

      if template.name == 'cart'
        echo 'cart__message '
      endif

      echo 'free-shipping'

      if subtotal_without_currency >= limit and qualified_shipping_message != blank
        echo ' is-success'
      endif
    endcapture
  -%}

  <div
    class="{{ free_shipping_classes }}"
    data-free-shipping="{% if qualified_shipping_message != blank %}true{% else %}false{% endif %}"
    data-free-shipping-limit="{{ limit }}"
    {% if style != blank %}
      style="{{ style }}"
    {% endif %}
  >
    {%- if show_wheel -%}
      <div class="free-shipping__graph" data-progress-graph style="--stroke-dashoffset: 87.96459430051421;">
        <svg height="18" width="18" viewBox="0 0 18 18">
          <circle r="7" cx="9" cy="9" />
          <circle class="free-shipping__graph-progress" stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
        </svg>
      </div>
    {%- endif -%}

    {%- if qualified_shipping_message != blank -%}
      <span class="free-shipping__success-message">{{ qualified_shipping_message }}</span>
    {%- endif -%}

    <span class="free-shipping__default-message">
      {{ message }}
    </span>

    {%- if show_progress_bar -%}
      <progress
        class="free-shipping__progress-bar"
        data-progress-bar
        value="{{ percent }}"
        max="100"
      ></progress>
    {%- endif -%}

    <div class="confetti">
      <span class="confetti__dot confetti__dot--1"></span>
      <span class="confetti__dot confetti__dot--2"></span>
      <span class="confetti__dot confetti__dot--3"></span>
      <span class="confetti__dot confetti__dot--4"></span>
      <span class="confetti__dot confetti__dot--5"></span>
      <span class="confetti__dot confetti__dot--6"></span>
    </div>
  </div>
{%- endif -%}
15

Hi @TBS2023,

Please change all code:

{% comment %}
  Renders Free shipping message

  Accepts:
  - message: {String} Free shipping text (required)
  - gradient: {String} Progress bar gradient color
  - show_wheel: {Boolean} Show progress wheel
  - show_progress_bar: {Boolean} Show progress bar
  - is_cart_drawer: {Boolean} Is cart drawer

  Usage:
  {% render 'free-shipping', message: block.settings.message, show_wheel: true, show_progress_bar: false, is_cart_drawer: false %}
{% endcomment %}

{%- liquid
  assign free_shipping_limit = settings.free_shipping_limit
  assign show_message = false
  if message != blank
    assign show_message = true
  endif

  if gradient != blank
    assign style = '--FREE-SHIPPING-GRADIENT: ' | append: gradient | append: ';'
  endif

  if color_scheme != blank
    assign selected_color_scheme = color_scheme | strip
    assign scheme_accent_color = settings.color_schemes[selected_color_scheme].settings.accent
    assign style = '--FREE-SHIPPING-GRADIENT: ' | append: scheme_accent_color | append: ';'
  endif
-%}

{%- if show_message -%}
  {%- liquid
    assign limit = free_shipping_limit | plus: 0
    assign limit_currency_new = limit | times: 100
    assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100
    assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit
    assign percent = 100 | minus: percent

    if settings.currency_code_enable
      assign limit_currency = limit_currency_new | minus: cart.total_price | money_with_currency
    else
      assign limit_currency = limit_currency_new | minus: cart.total_price | money_without_trailing_zeros
    endif

    capture left_to_spend
      echo '<span data-left-to-spend>' | append: limit_currency | append: '</span>'
    endcapture

    assign message = message | replace: '||amount||', left_to_spend
    assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t

    capture free_shipping_classes
      if is_cart_drawer
        echo 'drawer__message '
      endif

      if template.name == 'cart'
        echo 'cart__message '
      endif

      echo 'free-shipping'

      if subtotal_without_currency >= limit and qualified_shipping_message != blank
        echo ' is-success'
      endif
    endcapture
  -%}

  <div
    class="{{ free_shipping_classes }}"
    data-free-shipping="{% if qualified_shipping_message != blank %}true{% else %}false{% endif %}"
    data-free-shipping-limit="{{ limit }}"
    {% if style != blank %}
      style="{{ style }}"
    {% endif %}
  >
    {%- if show_wheel -%}
      <div class="free-shipping__graph" data-progress-graph style="--stroke-dashoffset: 87.96459430051421;">
        <svg height="18" width="18" viewBox="0 0 18 18">
          <circle r="7" cx="9" cy="9" />
          <circle class="free-shipping__graph-progress" stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
        </svg>
      </div>
    {%- endif -%}

    {%- if qualified_shipping_message != blank -%}
      {%- if limit_currency_new >= cart.total_price -%}
        <span class="free-shipping__success-message">FREE Shipping.</span>
      {%- else -%}
        <span class="free-shipping__success-message">{{ qualified_shipping_message }}</span>
      {%- endif -%}
    {%- endif -%}

    <span class="free-shipping__default-message">
      {{ message }}
    </span>

    {%- if show_progress_bar -%}
      <progress
        class="free-shipping__progress-bar"
        data-progress-bar
        value="{{ percent }}"
        max="100"
      ></progress>
    {%- endif -%}

    <div class="confetti">
      <span class="confetti__dot confetti__dot--1"></span>
      <span class="confetti__dot confetti__dot--2"></span>
      <span class="confetti__dot confetti__dot--3"></span>
      <span class="confetti__dot confetti__dot--4"></span>
      <span class="confetti__dot confetti__dot--5"></span>
      <span class="confetti__dot confetti__dot--6"></span>
    </div>
  </div>
{%- endif -%}
16

Hello @TBS2023

Hope you are doing well. in the file free-shipping.liquid

Please replace

assign message = message | replace: ‘||amount||’, left_to_spend

By

if left_to_spend > 0
assign message = message | replace: ‘||amount||’, left_to_spend
else
assign message = ‘Du fik gratis fragt.’
endif

Hope it help.

17

this is what i get

image
image412×220 21.2 KB

18

Hello @TBS2023

Please awake of the ‘ character when paste to code. Here is the correct correct_code - Google Docs

19

Hello @TBS2023

this issue relsoved or not ?

20

This is what happens when i use your code

image
image371×129 3.48 KB

21

Hello @TBS2023

its bad to here that, if possible can you share the Collaborator request code. I will take a close look.

Thanks

22

Try this - 3387

thebodyshop.dk

23

Hello @TBS2023

I just sent the request, please accept as soon as possible.