How to Add a Free Shipping Bar to Magento 2

The word FREE has a positive impact on customers’ shopping behaviour. Offering free shipping to customers can be an effective marketing strategy for your brand. Read this blog post to learn how to add a free shipping bar to Magento 2.

The product priced at $110 with free shipping looks like a better deal than the one at $100 + $10 shipping.  Data also suggest that high additional costs, such as shipping and taxes, are customers’ main reasons for abandoning carts. Highlighting the free shipping bar on your site can be profitable.

Furthermore, adding cart value thresholds, i.e. free shipping above a certain cart value, can boost the average order value.

In this blog post, I will share the complete method to implement such free shipping bar functionality in Magento 2.

• Method to Add a Free Shipping Bar to Magento 2
  • Step 1: Install Magento 2 Free Shipping Bar Extension
  • Step 2: Configure General Settings
  • Step 3: Customize the Shipping Bar Design
• Conclusion

Let’s begin..!

Method to Add a Free Shipping Bar to Magento 2

By default, the Magento platform provides no functionality to add a free shipping bar. Therefore, you may need to create a custom module to implement such features, which can consume time and resources. We have an alternate and easy-to-follow way for you!

Magento 2 Free Shipping Bar extension is the best method to add a free shipping bar in Magento 2. The reason? It’s the easiest way…

Just follow these steps to add a free shipping bar in Magento 2:

Step 1: Install Magento 2 Free Shipping Bar Extension

Download the Magento 2 Free Shipping Bar extension zip file, and extract it to the root of your Magento directory.

Now, run the following commands:

• php bin/magento setup:upgrade
• For Magento version 2.0.x to 2.1.x – php bin/magento setup:static-content:deploy
• For Magento version 2.2.x & above – php bin/magento setup:static-content:deploy –f
• php bin/magento cache:flush

This will install the Magento 2 extension on your store.

Step 2: Configure General Settings

Log into your Magento admin panel and click Stores > Configuration in the left menu. Click the Free Shipping Bar under Meetanshi, and configure the following settings:

• Free Shipping Bar: Enable the extension to add the free shipping bar on the front end.
• Free Shipping Threshold: Enter the threshold value for different customer groups and notification text, which will be shown to the customers. You can use the variable leftValue for the amount remaining to make the order eligible for free shipping.

Now, scroll down a bit and configure the following settings:

• Free Shipping Availability Success Message: Enter the message that will be shown to the customers on successfully meeting the free shipping criteria.
• Bar Position: You can choose the position of the free shipping bar in Magento 2 from the following:
  • Content Top
  • Content Bottom
  • Page Top
• Stick Shipping Bar: Enable this option if you want to stick the bar to the page, i.e. even after the page scrolls.
• Close Button: Enable this option to provide a button to close the bar for the customers.
• Calculate Subtotal: You can set the free shipping eligibility criteria based on the amount, including or excluding tax.
• Display Bar In: Display the bar only on mobile or desktop devices. You can also choose to show it on both.
• Display On Pages: Select the pages where you want to show the free shipping bar in Magento 2.
  

Step 3: Customize the Shipping Bar Design

Meetanshi’s Magento 2 Free Shipping Bar extension also allows you to customize the look and feel of the bar. Expand the Shipping Bar Design Settings section and configure the following settings:

• Bar Size: Choose the bar size from Small, Medium, and Large.
• Bar Load Delay Time: Enter the time (in seconds) after the page load to show the bar.
• Auto Hide Bar After: Enter the time (in seconds) to auto-hide the bar after the page load.
• Font Family: Select fonts from the following eight available options.
• Text Align: Set the text alignment from Left, Center, and Right.
• Colour Options: Set the colour of text,  shipping value, close button, and bar background.
• Animation Effect: Choose from over 20 animation effects for the bar.
• Custom CSS: Add custom styling to the free shipping bar in Magento 2.

Woohoo!! You’re ready to go now.

Hit the Save button, and the stunning free shipping bar is ready on the front end.

Looks good!! Isn’t it? 😀

Conclusion

Adding a free shipping bar in Magento 2 can benefit your business in multiple ways. It can make the free shipping offer more visible to the customers and encourage conversions. Meetanshi’s Magento 2 Free Shipping Bar is the best extension for that!

I hope the above tutorial has helped you add a free shipping Bar to Magento 2. In case you still have any doubts or queries, feel free to comment. I’d be happy to help you.

~~ Thanks for reading ~~ Happy Selling ~~