How to Add a Free Shipping Bar in Magento 2 Store?

Magento is a vast e-commerce platform that offers you a variety of features. These features make it a top choice for any e-commerce business. However, this industry is continuously evolving and you need to pace yourself so that you are updated with the current marketing standards. You can add new features for the same using third party extensions. One such feature is a free shipping bar that displays various promotions related to shipping. Offering free shipping is a great marketing technique to attract more customers and increase conversions. We bring you one of the best extensions that adds a free shipping bar in the Magento 2 store allowing you to set up various promotions. 

Importance of Free Shipping For Marketing  

More often than not high shipping charges can become a deal-breaker for customers. You may have come across stores offering free shipping in promotions. Well, it makes up for a great marketing strategy. People are more likely to buy products with free shipping on them. Sometimes even if they are not interested, free shipping can push them over the edge in making a decision of purchasing a product. You don’t have to go overboard in giving free shipping on all products, instead, you can set conditions such as for specific locations, or if the cart total exceeds a certain amount. Magento 2 has no such feature as of yet. Magento 2 free shipping bar extension can integrate this feature in your stores with only a few clicks.      

Adding a Free Shipping Bar Step By Step

Step 1:- Login to your Magento 2 admin panel. Now go to Stores>Configuration>Scommerce Configuration>Free shipping bar rule. Enable your extension and enter a valid license key. 

Step 2:- Go to Marketing>All free shipping bar rules. Now click on the Add Free Shipping Bar Rule button. 

Step 3:-  From the left menu click on General Settings. Enter the Bar Name and set Bar Status to enabled. 

Step 5:- In the Cart, Subtotal Source select either out of the box Free shipping configuration or specify manually. It will decide the cart subtotal price upon which the free shipping will be eligible.Free shipping bar

Step 6:- Next, select the shipping bar validity dates i.e to and from. Set the priority and then select whether the rule should apply on cart Grand Total or Subtotal. 

Free shipping bar validity

Step 7:- From the left menu click on Websites & Customer Groups now select store view and customer groups as per your requirement. 

Free shipping bar store view

Step 8:- Select shipping countries from the left menu and select all the countries where the shipping bar rule should be eligible. 

Free shipping bar countries

Step 9:- Move on to Display Options. In the Bar Position option select where you want the shipping bar to appear on your store for eg:- Page Top Fixed. 

Free shipping bar display options

Step 10:- In the Pages option select one or more pages where you want the free shipping bar to appear. Select whether you want the add a link (to terms and conditions) to the free shipping bar or not. 

Free shipping bar pages

Step 11:- You can also add a close button as well as an icon with the shipping bar. 

Free shipping bar close button

Step 12:- Select Content from the left menu, enter the Initial Message that would appear on the pages of your store(add the subtotal goal in the message by using variable {{balance}}). You can add the cart subtotal goal with this message by adding a variable in between {{shipping_threshold}}. Please refer to the image below:-

Free shipping bar initial message

Step 13:-  Enter the message In Progress that would appear while the customer adds products to the basket. Next, enter the message once the customer qualifies for free shipping and also customize the free shipping bar terms text.

Free shipping bar messages

Step 14:- Lastly move to the Design section from the left menu and customize the style using the options provided below or add your custom CSS styles. Save the rule and clear the caches. 

New Free shipping bar Design


Once you have completed the setup, visit your store. The free shipping bar should appear as you can see in the image below.

Free shipping bar home page

Start adding products to the cart and you will see that the shipping bar test changes.

Free shipping bar in progress

After adding enough products to the cart the free shipping message is displayed on the bar.

Free shipping bar success

Customers will sure think to purchase products that help them avail the free shipping benefit thus increasing your sales. It is quite an easy extension to use that helps you market your products and increase conversions rapidly. You can get a demo for yourself by clicking on the below links.

Frontend Demo

Backend Demo