How to alert customers about free shipping threshold?

[Anonymous]

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

[ExpertRookie · Accepted solution]

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

[ExpertRookie · Accepted solution]

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

[lh7]

any chance i can get rid of this banner please, I've looked everywhere

[DavidEKim · Accepted solution]

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 "<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">"

6. Above the <form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart"> line, add the code below.

{% assign shipping_value = 15000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
<p class="shipping-savings-message">
  {% if shipping_value_left > 0 %}
      <span class="free_shipping_notice">You are {{ shipping_value_left | money }} away from free shipping!  <a href="/collections/all">Continue shopping</a> to add more products to your cart and receive free shipping for orders over $150.00 AU</span>
  {% endif %}
</p>
<style>
.shipping-savings-message {
  width: 100%;
  display: flex;
  justify-content: center;
}
.free_shipping_notice {
  font-size: 1.2em; 
  font-weight: 600; 
  color: #ff0000;
  line-height: 1.5em;
}
</style>

6. 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 <p></p> (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.

[Anonymous]

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

[DavidEKim]

@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.

[D666]

@DavidEKim 

The condition needs to use if cart.currency.iso_code, e.g.

{% if cart.currency.iso_code  == 'GBP' %}

Thank you very much for this!

[cynja]

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

[marvic]

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.

[marvic]

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.

[YannikMarco]

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

[marvic]

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

<div>
{%- if cart.cart_level_discount_applications.size > 0 -%}
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in cart.cart_level_discount_applications -%}
<li class="discounts__discount discounts__discount--position">
{%- render 'icon-discount' -%}
{{ discount.title }}
(-{{ discount.total_allocated_amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>

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

 

[RA10]

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? 

[DavidEKim]

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.

[YannikMarco]

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

[Tamrar]

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 %}
<p class="shipping-savings-message">
{% if shipping_value_left > 0 %}
<span class="free_shipping_notice">You are {{ shipping_value_left | money }} away from free shipping!</span>
{% elsif cart_total >= 7500 %}
<span class="free_shipping_notice">You have unlocked FREE SHIPPING!</span>
{% endif %}
</p>
<style>
.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;
}
</style>

[SOGLOSS]

amazing!!! Thank you!!!

[D666]

Great stuff!

[JuneR]

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.

[wiredcampers]

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

[SOGLOSS]

This worked perfectly!!! Thank you!!!

[RobCupper]

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 "<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">"

Many thanks

Rob

[porkrines42]

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

[mmontella]

This was helpful and it worked for us. Only thing I wish it did was alert you in the cart once free shipping is indeed hit! 

[ManuelH]

Didnt work on my end. I have a cart that folds from the right side. And I wanted to put it above the checkout button.

[NicolasKG]

Hi David,

This works great, thanks! I noticed, however, that when you update the quantity of items while still in the cart, the message does not disappear even if you reach the free shipping threshold. Is there a way to make it dynamic or go away when the limit is reached while inside the cart page?

[Anna7macaw]

Hi, can you help me with one issue:

I put this code on pop up notification code and when i add my product the amount stay at $150. On normal cart they work but on popup cart they don"t take the product amount that you add, only the product in the cart page. What i have to do to show the thing?

Thank you