All the major retailers do it… So why not you too?
An easy way to encourage customers to buy more products is to offer free shipping above a certain threshold.
For example, you might offer “Free Shipping For Orders Over $75”.
This is relatively easy to show on your site (on your shipping page, for example), but one of the best places to have it is on your cart page. And, unfortunately, it’s a bit tricky to implement there, since it requires adding custom code to your cart.liquid template.
Luckily, that’s where we come in.
Here’s a great example: https://www.erstwilder.com/cart
(Go and add a product to the cart there to see it in action.)
This post will show you how to add “You are $X away from free shipping!” to your cart page, in just a few easy steps.
You’ll end up with something like this, which you can change as needed:
In our example below, we’re going to offer free shipping for all orders above $75.
Of course, you could change this to another value ($20, $200, whatever you like), as required.
- Configure your shipping settings. Go to Admin > Settings > Shipping in your Shopify store, and set it up to offer free shipping above $75 or your chosen value.
- Next, go to the cart template, by going to Admin > Online Store > Themes > Edit HTML/CSS > cart.liquid under “Templates” on the left.
- Once you have cart.liquid open, add the code below at the VERY TOP (see below for a few notes on how to customize it for your particular shop):
{% 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 %} 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 $75. {% else %} You've got free shipping! {% endif %} </p>Some notes: For anyone with under $75 in their cart, this message will show. For anyone with over $75, they will just see “You’ve got free shipping!”. You can change 7500 to match the value of free shipping – that is the dollar value in cents. For example, $20 would be 2000, $100 would be 10000 and so on. You can change the wording as needed — just don’t touch what’s in curly brackets, as that’s what makes the script work. The code above will insert a link to your /collections/all page (‘all products’), but you could change that too if you like.
- Save cart.liquid.
- Lastly, you might want some CSS to style your fancy new section on your cart page. You can use this as a starting point, and change the colors to any HEX color you like (using this color picker for example). So, to do this, open up style.css under “Assets” on the left inside the Theme Editor. This file might be named stylesheet.css, styles.css, style.css, or something similar to that, depending on your theme. Paste this at the very BOTTOM of that file:
.shipping-savings-message { background-color: #f9ffe6; border: 3px solid green; padding: 20px; text-align: center; margin-bottom: 25px; } -
Save.
That will give you something similar to this:
Remember you can change the colors, padding, and so-on as needed, just by editing that code and replacing the hex colors or padding values. If you’re happy with it as-is, you can just copy/paste.
That’s all there is to it — you now have an easy, flexible way to encourage customers to buy a little more and get free shipping into the bargain.
Got questions? Happy to answer in the comments.
Thank you again for following our Shopify Insider Blog @ Blackbelt Commerce, we have many other valuable posts that are informative. Here are our top recommendations; How To Choose A Shopify Developer, The Best Shopify Cheat Sheet Resources, selling and social media:facts, what are the advantages of e-commerce store, and More Shopify Design Strategies.
We can also help you with many other services. Also, you can learn all about who are the Shopify Experts at Blackbelt Commerce.
What are the top Shopify stores doing?
Take what we've learned and use it to your advantage.
Get our exclusive research: Insights from over 500 Shopify Stores.
Thank you for this!!
Hi Quinten, you are welcome, glad it helped 🙂
Hello there. Great site! Saw your post on the Shopify blog.
How would you implement that if you have different free shipping thresholds for different countries: we have Free shipping for 199$ in Canada and 249$ in the USA.
Appreciate, very unfamilliar with coding.
Thanks!
Hi Louis! Thanks for reading, glad you liked the post 🙂 As for setting up the notification with custom messaging based on location — this is doable (for example – we did this for our client https://www.erstwilder.com) — that’s something we might need to take a deeper look at in a custom mini-project, as it really depends on your site 🙂 Feel free to contact us at the link below and happy to see if we can help > https://www.blackbeltcommerce.com/contact/
Hi there, love the idea of this!
Preparing to launch my store this week, using the Minimal theme.
I’ve built a website previously and I’m reasonably familiar with coding but cannot find anything remotely similar to stylesheet.css under Assets.
I can create a new asset but I’m unsure which drop-down to use and whether I need to place {{ ‘custom-styles.css’ | asset_url | stylesheet_tag }} in Layout > theme.liquid before ??
Thanks for all the great work you’re doing!
Richie
Hey Richie! Really any CSS file will do, it depends on your theme but most likely it will be something like style.css, stylesheet.css, base.css, theme.css or similar. Hope that helps, just let me know if you have any other questions.
Thanks,
Tristan.
Hi Tristan,
Sorry to bug you but I’m still no closer to creating a nice, boxed look around the postage counter – and I’ve tried all sorts of different variations on the suggestions you offered. Please see my message from June 7th, which I checked for about a week, in the hope of a reply. Now I’m very close to launching my website and thought I’d try again!
Best,
Richie
Hi Richie, please post a link to your site so we can take a look, as it’s a little hard to tell in this case, as every theme is a bit different.
Hi Tristan and my apologies for not seeing your reply. I had assumed I would receive an email notification… Thanks for your suggestions but I am still unclear:
In my Assets (as I said earlier, Minimal theme) I can see “theme.scss.liquid” only.
None of your other suggestions are present.
I have the Free Shipping calculator/countdown working but in order to create a box around the text, do I need to create “theme.css” in Assets?
Best,
Richie
You can use that existing CSS file, any CSS file will do.
Greetings
Put the code into both places exactly as shown but checkout page doesn’t show any message. I’m at the part asking for a credit card. Do I need to go further to see the message?
I don’t want to input my card and end up ordering my own product.
Bob
Hi Bob – this should go on your cart page (cart.liquid), is that where you’ve placed it? You won’t see it in the checkout (as that isn’t editable unless you’re on Shopify Plus), the cart is the best place. Feel free to place a link so I can take a look.
Hello and thanks for the quick reply.
Here’s the url of the page where I tried it out.
We installed the script in cart.liquid.
And custom css in the style.scss.liquid.
You’ll see there’s no notice.
What do you think we’re doing wrong?
Bob
Further to my reply.
It’s working.
Our “Cart” page isn’t as obvious as you would think.
Love it!
Bob
Hi, Im using retina theme, its is possible to make its work with ajax cart?
Hi there! Thanks for reading. Yes, that would be possible, but it would be somewhat of a custom job. Feel free to contact us: www.blackbeltcommerce.com/contact and we can take a look 🙂
FANTASTICO!!!!
thanks so much. This a great tip.
This is great! Is it possible to add this to the cart which pops out initially when a product is added to the cart? Not the actual cart page but the pop-up that generally shows on the right hand side of the page when a product is first added.
Thanks!
Ben
Hello, I have added this feature to my shop and I absolutely love it. I was curious if it were possible to set something up for Canadian customers who shop on the site as well? I offer free shipping to US when they spend over $75, but would like to include a note for customers in Canada as well. Thank you
Love this upsell feature. I was wondering if there’s a modification to the script to exclude one product?
For example, our store offers free shipping on orders over $97 except for 1 sampler product priced at $24.95 that includes free shipping. It’s confusing to see the upsell offer on the cart page for the sampler product.
Hi, I would like to know if you know how to do this with Ajax, in case the code goes on the header/ dropdown mini-cart, which needs to be updated live, uppon product adds/ remove.
Hi Ricardo, yes, we can create custom code as well. Let us know if you are interested.