The Easy Upsell: How To Set Up “You Are $X Away From Free Shipping” on Shopify

By Cesar Beltran
THE EASY UPSELL created by Shopify website developers

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:

You are x away from free shipping

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.

  1. 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.
    price-free-shipping
  2. Next, go to the cart template, by going to Admin > Online Store > Themes > Edit HTML/CSS > cart.liquid under “Templates” on the left.
    cart liquid
  3. 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.

  4. Save cart.liquid.
  5. 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;
    }
    
    
  6.  Save.

    That will give you something similar to this:
    Screen Shot 2016-03-17 at 9.43.00 AM

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

Powered by ConvertKit
Tell others about this post

Comments 25

  1. 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!

    1. 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/

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

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

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

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

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

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

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

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

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

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

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

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

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.