How To Add Free Shipping Bar To Magento 2

The ‘Free’ word always works! It certainly impacts the shopping behavior of customers. Many eCommerce platform owners are using free shipping as an effective marketing tactic, these days, to boost their sales. If you also own an eCommerce site and looking to add a free shipping bar to the same, we’ve got you covered.

However, this comprehensive guide is all set for only those who are making use of Magento 2. So, what are you waiting for? Walk through the steps given in the guide and learn how to add Magento 2 free shipping bar to escalate your sales. Stick to reading!

Quick Tip: Know that a product listed with the price tag of 500 INR with free shipping appeals more to the customers than one showing 500 INR + 50 INR shipping price.

Research suggests that additional costs like taxes and shipping are the major concerns why customers abandon their carts without making a purchase. Hence, highlighting the free shipping bar can do wonders for you when it comes to boosting sales.

Without any further delay, let’s get back to the topic and help you learn about adding a free shipping bar to Magento 2.

Table of Contents

Method to Add Magento 2 Free Shipping Bar

In Magento, no functionality has been offered by default to add a free shipping bar. So, eCommerce owners need to create a custom module for adding the feature. For non-techies, it can be a cumbersome task as well as time-consuming. Well, worry not! The below-given easy-to-follow guide will make things possible for you.

All you need to do is: install and activate the Magento 2 Free Shipping Bar extension. Here’s how:

Step 1 – Search and Install Magento 2 Free Shipping Bar Extension

Locate the extension and download it in the form of a zip file. Once done, you need to extract the file by heading toward the Magento Directory section. As soon as you complete the above steps, there is a need to run certain commands like:

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 is how you can install the Magento 2 Free Shipping Bar extension on your eCommerce store.

Step 2 – Complete Configuration Process

For configuring the setting, you first need to log into your Magento panel and access the ‘Configuration’ option under the ‘Stores’ option. By clicking the ‘Free Shipping Bar’, you will be able to configure various settings like:

Free shipping bar extension will be enabled and added to the front end of your eCommerce portal.
Enter the notification text that will be displayed to consumers together with the threshold value for the various customer segments. For the amount that needs to be left for the order to qualify for free shipping, make use of the variable ‘leftValue’.
Thereafter, configure the ‘Free Shipping Availability Success’ message by typing the message you want to show to your customers. This will reveal as soon as your customers will fulfill the free shipping criteria.
You can also select the position of the shipping bar by choosing any of these options: Content Top, Content Bottom, and Page Top.
Enable the ‘Close’ button if you want to allow your customers to close the bar.
By enabling the ‘Stick Shipping Bar’ option, you can stick the shipping bar to your eCommerce page, no matter if a user is scrolling the page or not.
You need to configure the ‘Calculate Subtotal’ option if you want to support the free shipping eligibility requirements on the total, with or without tax.
Another configuration that you can do is to activate the ‘Display Bar In’. This will help you show the bar on the device of your choice whether mobile or desktop. Both options can also be selected to display Magento 2 shipping bar. In the same manner, you can select pages on which you want to show the display bar.

This is how you can configure the general settings of the free shipping bar.

Step 3: Change the Layout

After configuring the bar, you can also change the look and feel of it as per your needs by doing the following settings:

Make a selection between the sizes of the bar. You can choose between Small, Medium, and Large.
Delay the time of the bar loading as per your needs. You need to select it in seconds.
Set the time to auto-hide the bar after the loading of the page.
Choose the font of your choice for the Magento 2 Free Shipping Bar.
Align the text to either left, center, or right.
Choose a color for the text, close button, background of the shipping bar, and shipping value.
In Magento 2, you can also give the free shipping bar personalized styling.

At last, don’t forget to hit the ‘Save’ button and you are good to go. Magento 2 Free Shipping Bar will show at the front end of your eCommerce platform.