How to alert customers about free shipping threshold?

Hi,

Is there a way to add a notification or text to alert customers when they are close to receiving free shipping?

Thanks!

www.byanymeans.net.au

Hi @Anonymous
Currently Dawn theme does not support for that feature, so in this case you should hire an expert, and the will help you add that feature for your theme

Hi,

OMG!

It’s simple to make the ‘Free Shipping’ message on your cart.

To add the message to your cart, please follow the steps below.

  1. Go to Online Store (Under Sales channels)

  2. Click 
 (3 dots next to the Customize)

  3. Click Edit code

  4. Click main-cart-items.liquid (Under Sections)

  5. Find “”

  6. Above the line, add the code below.

{% assign shipping_value = 15000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}

  {% if shipping_value_left > 0 %}
      You are {{ shipping_value_left | money }} away from free shipping!  Continue shopping to add more products to your cart and receive free shipping for orders over $150.00 AU
  {% endif %}

  1. Save the main-cart-items.liquid file.

Please change the message to fit your needs.

The above code is set to $150 AU for free shipping (shipping_value = 15000).

If you want to change it to $100.00 AU, please change shipping_value = 10000 and inside of the

(paragraph).

You may change the font size, color, weight from

.free_shipping_notice {
font-size: 1.2em;
font-weight: 600;
color: #ff0000;
line-height: 1.5em;
}

The message will show up as below.

Hope it helps.

If you resolve the issue, please click “Like” and “Accept Solution”.

If you have any other questions, please let me know.

Thanks.

12 Likes

Thanks for the reply! Is there a way to do this based off location? Because different countries have different free shipping milestones on my website

@Anonymous

Hi,

Using currency iso_code (Alphabetic Code), you can add conditions for the currency you are using.
For example,

{% if currency.iso_code == 'USD' %}
  {% assign shipping_value = 15000 %}
{% elsif currency.iso_code == 'AUD' %}
  {% assign shipping_value = 20000 %}
{% elsif currency.iso_code == 'EUR' %}
  {% assign shipping_value = 15000 %}
{% elsif currency.iso_code == 'GBP' %}
  {% assign shipping_value = 16000 %}
{% endif %}

The complete currency iso code is available at https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xls and please use the “Alphabetic Code”.

At the end of the free shipping statement,
“add more products to your cart and receive free shipping for orders over {{ currency.symbol }}{{ shipping_value | money_without_trailing_zeros | divided_by: 100 }}”

Hope it helps.
Thanks.

1 Like

Thank you so much for this. If I dont have the main-cart-items.liquid, I guess I should just create it, right?

Is there a way to update the page if a customer adds more items to the cart? e.g. if they multiply one of the items they already purchased to hit the free delivery threshold? ATM if they increase the cart value above the threshold the notification still shows. Only a page reload makes the notification disappear.

It should be in your theme files:

Online Store → Themes → click on the three dots left of “Customize” → Edit Code

Type “cart” in the search field on the top left and the main-cart-items.liquid file should show up in the “Section” folder.

Hi @DavidEKim

Thanks so much for your solution - this was super easy to follow and apply! I was wondering if there was a way to do this when the customer clicks on the cart icon and their shopping bag appears from the side?

Hi,

You need to modify another liquid file. It could be cart-drawer, cart-popup, or cart-side. Please find the file for your cart popup and add the code.

1 Like

Here is updated code when customer reaches => amount : You have Unlocked Free Shipping!

{% assign shipping_value = 7500 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}

{% if shipping_value_left > 0 %} You are {{ shipping_value_left | money }} away from free shipping! {% elsif cart_total >= 7500 %} You have unlocked FREE SHIPPING! {% endif %}

.shipping-savings-message { width: 100%; display: flex; justify-content: center; } .free_shipping_notice { font-size: 0.9em; font-weight: 600; color: #000000; line-height: 1.5em; }
3 Likes

Thank you for the solution. Is it possible to set up an amount that is close to the free shipping threshold? For example, our free shipping threshold is $400. Can this message be displayed when a customer reaches $300? If the total is under $300, the message will not be displayed.

Hi @DavidEKim ,

We are looking to do the same as the above, we have tried to follow the guide but we are using the Brooklyn theme and don’t seem to have the same options as above.

Could you help please?

Thanks

This worked perfectly!!! Thank you!!!

amazing!!! Thank you!!!

Hast du eine Lösung fĂŒr dein Problem finden können? Stehe gerade vor dem selben Problem.

Hast du eine Antwort fĂŒr dein Problem finden können? Steht gerade vor dem selben Problem ohne Lösung.

1 Like

I changed the position. Place the code below this block:

{%- if cart.cart_level_discount_applications.size > 0 -%}
    {%- for discount in cart.cart_level_discount_applications -%}
  • {%- render 'icon-discount' -%} {{ discount.title }} (-{{ discount.total_allocated_amount | money }})
  • {%- endfor -%}
{%- endif -%}

The message will appear underneath the total cart value at the bottom, which is dynamically updated when the customer makes changes to the cart.

2 Likes

Hi David, would you be able to help me do the same for my store? I am using Berlin theme, and URL is www.slackjawapparel.com - I have tried following the above but do not have the line of code matching “”

Many thanks

Rob

This worked, but is there a way to make it so that the message doesn’t appear when the cart is empty?