Re: You are X amount away from free shipping

Solved

How to alert customers about free shipping threshold?

Not applicable

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

Accepted Solutions (2)

ExpertRookie
Shopify Partner
1518 249 322

This is an 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

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

DavidEKim
Shopify Partner
393 131 199

This is an 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.

20221216_162725.png

 

 

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.

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 27 (27)

ExpertRookie
Shopify Partner
1518 249 322

This is an 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

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
lh7
Visitor
1 0 0

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

DavidEKim
Shopify Partner
393 131 199

This is an 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.

20221216_162725.png

 

 

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.

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
Not applicable

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
Shopify Partner
393 131 199

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

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
D666
Excursionist
23 2 14

@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
Visitor
1 0 0

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

 

marvic
Explorer
66 4 19

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
Explorer
66 4 19

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
Tourist
4 0 2

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

marvic
Explorer
66 4 19

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.

Screenshot 2024-01-09 at 10.11.55 am.png

RA10
Visitor
1 0 0

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
Shopify Partner
393 131 199

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.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
YannikMarco
Tourist
4 0 2

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

Tamrar
Tourist
4 0 5

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
Tourist
3 0 0

amazing!!! Thank you!!!

D666
Excursionist
23 2 14

Great stuff!

JuneR
Visitor
1 0 0

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.

wcdes12
Tourist
13 0 1

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
Tourist
3 0 0

This worked perfectly!!! Thank you!!!

RobCupper
Excursionist
17 1 3

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
Visitor
1 0 0

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

mmontella
Tourist
11 0 0

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
Explorer
91 4 13

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
Visitor
1 0 0

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
Shopify Partner
1 0 0

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

Imby
New Member
4 0 0

thank you that is so helpful. One question please how do I change the colour of CONTINUE SHOPPING? I managed to change text colour but this is purple.. thanks so much