Shipping bar for cart page and cart drawer

Upsell Products with Shipping Bar for Cart page and Drawer

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All  Shopify 2.0 FREE themes  ONLYWorks from lower version to version 15

Are you looking for a simple yet powerful way to increase your average order value and enhance the shopping experience on your Shopify store? Implementing a free shipping bar can be a game-changer! In this blog post, we'll walk you through how to add a shipping bar to your cart page and cart drawer, personalize it to align with your brand, and set a specific threshold for free shipping to motivate customers to spend more. 

Why a Free Shipping Bar?

A free shipping bar is a visual indicator that shows customers how close they are to earning free shipping. It not only encourages customers to add more items to their cart but also creates a sense of urgency to reach the free shipping threshold. Here’s why you should consider adding one to your store:

  1. Increases Average Order Value: Customers are more likely to increase their cart value to qualify for free shipping.
  2. Enhances Customer Experience: A shipping bar provides clear information about shipping costs and incentives, reducing cart abandonment.
  3. Drives Sales: The prospect of free shipping can be a strong motivator for customers to complete their purchases.

And to make sure you're confident in your purchase, I invite you to check out my demo store (password: Made4Uo) before making any commitments.

Please see the Get shipping estimates section below. UPSELL section not included.

Personalize Your Shipping Bar

Customizing your shipping bar is crucial to make it align with your brand and capture your customers' attention. Here’s how you can personalize it effectively:

  • Design: Choose colors, fonts, and styles that match your brand’s aesthetic. The bar should stand out but still feel like a natural part of your store.
  • Message: Write a compelling and clear message. For example, “Spend $50 more to get free shipping!” This message should be visible and enticing.
  • Threshold: Set a realistic and motivating amount for customers to reach for free shipping. Consider your average order value and customer buying behavior.

 What you are buying:

  • Add shipping bar to your cart page and cart drawer
  • Personalized your shipping bar
  • You can place your amount to reach for free shipping

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

Steps on how to add Shipping Bar

Step #1. Open your code editor

From your Admin Page, click Online Store > Themes >Actions > Edit code

Step #2. Create a new Snippet file

In the Snipper folder, create a snippet. Name it  shipping-bar. The file must show shipping-bar.liquid under the snippet folder.

Step #3. Add the code to the new Snippet file

Paste the code below in the file. Make sure to click SAVE.

Step #4. Add shipping bar settings to theme editor

Next, go to config folder, and open the settings_schema.json. Before the last "]", click enter to have a new line, then place the code below. Make sure to SAVE.

Step #5. Add the shipping bar to cart page

We have to place this in our cart section. Open the main-cart-items.liquid under the Section folder. Find the code  <table class="cart-items">. Make a new line and place the code below. Make sure to save.

 

See image for placement.

Shipping bar in main cart

Step #6. Add the shipping bar to cart drawer

Next, we need to place the code in the cart drawer. Open the file cart-drawer.liquid under the Snippet folder. Find the code  below.

 

Make a new line then paste the code below. Make sure to save.

 

See image below for placement.

Shipping bar in cart drawer

Step #7. Change the shipping bar settings

Adjust the settings using the Theme editor, and click Settings, then Shipping bar.

Step #8. Create an automatic free shipping discount

You must create an automatic free shipping discount to go with this shipping bar. Make sure you have the same threshold amount. Follow this steps to create an automatic free shipping discount

Conclusion

A well-implemented and personalized shipping bar can significantly impact your store’s performance by encouraging customers to spend more to reach the free shipping threshold. By adding a shipping bar to your cart page and cart drawer, and customizing it to fit your brand, you can create a more engaging shopping experience and drive higher sales.

Ready to enhance your store's shopping experience? Implement a free shipping bar today and watch your average order value and customer satisfaction soar! If you have any questions or need further assistance, feel free to reach out or leave a comment below. Happy selling!

 

Copied!
Back to blog

Leave a comment