Alert Your Customers to How Much More they Need to Buy to get Free Shipping
Example of Free Shipping Alert Message on Desktop Cart Page
Example of Free Shipping Alert Message on Mobile Cart Page
Alert your Shopify customers right on the Cart page how much more they need to spend to qualify for free shipping.
NOTE: This notice works on a Cart Page - not on drawer style carts.
No app needed. (Note: will not work with bundle/upsell apps in the cart.)
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 a backup and to preview the new code 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-template.liquid file
On the duplicate theme click on "Actions" to reveal the dropdown menu and click on Edit Code. On the file menu look under "Sections" for cart-template.liquid.
Look for the Cart Title code - usually wrapped in <h1> </h1> tags.
Copy and paste this code below the cart title code. The 5000 is for free shipping over $50.00. You can adjust the number for your store after it's pasted in the template.
<div class="container">
{% assign shipping_value = 5000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
</div>
<p class="shipping-savings-message">
{% if shipping_value_left > 0 %}
You are {{ shipping_value_left | money }} away from FREE shipping within the USA!<br>
{% else %}
You've got free shipping within the USA!
{% endif %}
</p>
Step Three - Customize the code for your store
Let's customize the code for your store.
Edit the 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 the USA!
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 13) 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 css.liquid or something similar.)
At the very bottom of the file add the following code:
.shipping-savings-message {
background-color: #fafafa;
border: 3px solid #3FA3B3;
padding: 20px;
text-align: center;
margin-bottom: 25px;
}
Now, you'll customize the message box colors for your store.
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 6 digit hex code(in this example, the code is: #3FA3B3)
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 Six - 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 Seven - 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
