Creating free shipping motivator

There are few Shopify apps that do a great job providing “You are X amount away from free shipping”, but in case you don't want to install another app, there is a way of adding a small snippet of javascript that will do the same thing.

Image for post
Image for post

Most of the themes have the onCartUpdate event that will trigger some actions on the javascript side to update some parts of a page (eg cart counter).
This can be found at Assets folder in your Shopify theme.
Open file ajax-cart.js.liquid or similiar (main.js.liquid) and search for function onCartUpdate. Found it? Great!

Let’s create our function which will be called on onCartUpdate method

The variable FreeShippingPrice is our price for free shipping, which means if the total order is over $50, we will notify the customer about free shipping.

The variable showText is our function to show text. Modify the variable info as you like. It can be an <p>, <h1> or some other element.
After info variable, we will remove any past text that was applied to clear the screen hence the $(“.cart-info”).remove().
And last, we will prepend the new element before add to cart button which has a class of .ajaxcart__button.

If you are modifying a theme which does not have this class, use any other that is on the checkout button

The logic should be simple — we have a message to show depending on calculation. If FreeShipingPrice — Total Cart Price ≤ 0, the customer is eligible for free shipping, else show the remaining price till free shipping.

Find a function onCartUpdate and insert our newly created function.

ShopifyAPI.onCartUpdate = function(cart) {
// call our calculateShipping method
calculateShipping(cart);
};

We need to go to Settings->Shipping and add rate for a minimum order of $50 and check Free Shipping checkbox.
This way, Shopify will automatically set Free Shipping on the checkout page.

Add a product to cart

Image for post
Image for post

Great! It works…now let's add another product that will be more than $15.

Image for post
Image for post

It works!

It’s not that hard to implement this cool feature when you need a simple notification to the customer.
Problem is when you update your free shipping rate, you need to go to calculateShipping function and modify the variable FreeShippingPrice.
Well, if you need that type of functionality and/or you don’t want to code, there are always paid/free apps that you can check.

Written by

We Are Shopify Experts | Is your store online? If not, we want to help you get started today. Give us a call at https://harttmedia.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store