Increasing Cart Value by Displaying Dollar Amount Left until Free Shipping

In this article we will walk through how to display the amount needed for a user to receive free shipping. For example, if a potential customer has $25 in their cart but to receive free shipping they need a total cart value of $50, we can create an overlay that will say: "only $25 away from free shipping". This can increase cart value and overall sales! 

 

SHOPIFY CUSTOMERS: Use this article instead! 

Please note: this promotion will only work on the cart page because the cart value class or ID is ONLY on the cart page.  

Don't have JS knowledge or want to have this feature active across your entire site? We can help with our Managed Plans! 

Check out this video or follow the instructions below: 

 

Step 1: Head to the design canvas of the promotion you want to use, find the custom code section on the right hand corner.

Under Tab JS insert: 

var ju_options = {
	"personalized": {
		"shipping_threshold": (50-parseFloat(jju('div.subtotal').text().replace(/[^\d.-]/g, ''))).toFixed(2)
	}
}

Step 2:Next you will need to find your shopping cart total code. This can be done by following this article. Replace the "div.subtotal" code in the custom code Tab JS section with the snippet from your cart page. 

Step 3: If you would like the code to target a cart total of $50 for free shipping, you do not need to change anything else. However if you want another amount please change the 50 within the code to 100, or 200. Whatever amount equals free shipping! Make sure you activate the JS override here: 

Step 4: Head back to your design canvas and where you would like the number to be displayed, place {{shipping_threshold}}. (this will call the number needed from the tab JS code installed)

Step 5: Head to your promotional rules section. Edit or add a new rule and find the matching element condition under Technology rules. Drag and drop that into the rule set. Then find current url rule under URL based rules and drag that over into the same set. 

Step 6: Within the Matching Element rule, place the same snippet you found earlier that targets the cart total. Replacing the "div.subtotal" in this example with your snippet match this example and place it into the rule: div.subtotal:sLess(50). This is telling the overlay to not show once the cart total hits 50 dollars. If you are using another value replace the 50 with 100 or 200. 

Step 7: Within the "current URL contains" condition place the word cart in the blank space. If your cart page does not contain cart but uses checkout or cartpage, place that snippet within the rule. The reason I've added current URL contains cart is because this promotion will only function on the cart page because the cart class or ID is only on that page! 

For my example, the rule would look like this: 

 

Step 8: Integrate your email marketing application and you will be all set!

REMEMBER TO HIT PUBLISH ON ALL CHANGES. 

 

Tags: cart value, track cart value, increase cart value, dollar amount, shipping countdown

 

 

Have more questions? Submit a request

4 Comments

  • 0
    Avatar
    John Sacharok

    I am having a hard time finding the correct snippet to use for my cart total. I have read several articles here that show more in detail how to do this, without success. I am using Volusion. Please help!

  • 1
    Avatar
    Jenna Fortunato

    Hi John! 

    Thank you in advance for using Justuno. It can sometimes be tricky for users who are not familiar with jquery to find the right element to target. What is your website on file and we would be more than happy to try and assist you with that! 

  • 0
    Avatar
    John Sacharok
  • 0
    Avatar
    Jenna Fortunato

    Hey John, 

     

    Looking at your cart page, you should be able to use .pricecolor.colors_productprice as the targeted class on your cart page. Check out this video to learn how I found that: https://screencast.com/t/4vPugav3v

     

    Feel free to reach out with any other questions or submit a ticket regarding this issue if you are unable to complete the steps!

Please sign in to leave a comment.