Compatibility: All Shopify 2.0 FREE themes ONLY. Works 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:
- Increases Average Order Value: Customers are more likely to increase their cart value to qualify for free shipping.
- Enhances Customer Experience: A shipping bar provides clear information about shipping costs and incentives, reducing cart abandonment.
- 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.
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.
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!