Alert Your Customers to How Much More they Need to Buy to get Free Shipping

Example of Free Shipping Alert Message on Cart Page

Alert your customers to how much more they need to get free shipping

 

Example of Free Shipping Alert Message on Cart Page

Example of Free Shipping Alert on Shopify Cart Page

Alert your Shopify customers right on the Cart page how much more they need to spend to qualify for free shipping.

No app needed. And I've never seen an situation (yet) where this snippet conflicted with any other cart customizations or apps.

Adding 2 code snippets will display a dynamic message that will encourage customers near the free shipping threshold to add more items to their cart. Who doesn't want free shipping?

One snippet goes on the Cart file and the other snippet goes on the style sheet.

Let's get started.

Step One - Duplicate your theme

Make a copy of your currently published theme as you'll add the code to the theme copy and preview it before publishing it live to your store. 

Go to your Shopify store Themes page and click on the "Actions" button and select 'Duplicate'. A copy of your live theme will appear at the top of the unpublished theme list located directly below your live theme. This is the theme copy you'll work on.

Step Two - Find the Cart file

On the duplicate theme click on "Actions" to reveal the dropdown menu and click on Edit Code. On the sidebar menu look under "Sections" for cart-template.liquid.

Here is an example of the cart-template.liquid file for Turbo theme showing the free shipping alert code added between Lines 18 - 30.

Click image to expand...

 

Step Three - Customize the code for your store

Let's customize the code for your store. Open the CODE SNIPPET for CART PAGE (from the link below) and copy and paste the code into a plain text editor like Note Pad or Text Edit (in the plain text mode not in Rich Text mode) - and then customize it.

Open Code Snippet

The shipping value in the example is written as 9700 - and that translates to this store's free shipping threshold of $97.00

Edit that number to match your store's free shipping threshold.

eg 7500 for $75.00 or 4999 for $49.99, etc.

You'll also want to customize the message - and be explicit about any conditions for the free shipping. In this example, You are $xx away from FREE shipping within Canada!

In this example, a second optional line to the message has been added about one product that qualifies for free shipping whether or not the threshold is met. 

Step Four - Insert the code

In the example, the free shipping alert message box is located below the page title "Shopping Cart".

In the Cart file look for the code for the page title - it will usually be close to the top. On the next line below the block of code for the page title (in this example, line 18) insert the code. Save.

Now we're going to style it to center the message box, add a background color and a border color.

Step Five - Locate the stylesheet file

In your Shopify store's Edit Code area look down toward the bottom of the sidebar menu for the Assets section and then look for the file called styles.scss.liquid (or it might be called scss.liquid or something like that.)

Here is an example of the sytles.scss.liquid for Turbo theme showing the style code for the free shipping alert between lines 9205 and 9211.

Click image to expand...

 

Step Six - Customize the message box colors

Now, you'll customize the message box colors for your store.  

Open the code snippet (from the link below). Copy and paste the CODE SNIPPET for SCSS FILE into a plain text editor like Note Pad or Text Edit (in the plain text mode not in Rich Text mode) - and then customize it.

Open Code Snippet

The code for the background color is a 6 digit hex code (in this example the code is: #fafafa).

The border color code is a value code (in this example, the code is: mediumvioletred)

Here's a handy reference for hex colors and color names you can use to choose your colors and swap out for your store.

https://www.w3schools.com/colors/colors_hex.asp

I recommend a bright color for the border to draw your customer's eyes to the important message. 

The font style and color for the text will be inherited from your theme so no need to format those.  

Step Seven - Insert the Style code

Copy and paste your customized code at the very bottom of the style sheet, making sure the last curly bracket } is at the very end. Save. 

Step Eight - Preview and Publish

Go back to your Themes page and on the duplicate theme you've added the code to, click on "Actions" then "Preview". Add items to your cart to test the message box for both situations when the cart total doesn't meet the shipping threshold and when it does. 

If all looks as expected, then hit Publish and the duplicate theme with the new code will go live. 

You're done! 

Too busy to do this yourself?

I'll do it for you.

Set up a job at Storetasker

and select Claudia Howard as your preferred expert


 

 

Leave a comment (all fields required)

Comments will be approved before showing up.