How to add free shipping bar in top mini-cart

How to add free shipping bar in top mini-cart

Steps to create free shipping bar

  • Create & register the module
  • Extend default.xml layout and define a block
  • Create block class & related template file (.phtml file)
  • Define jsLayout component in <block> element in default.xml layout
  • Create jsLayout component(.js file) & template(.html file) file at a location which is defined in default.xml layout file
  • Calculate percentage and binding it with shipping progress bar using knockout js.
  • Create a configuration menu to set the maximum price for free shipping bar at admin panel
  • Get maximum price config value for shipping bar which is set from the admin panel, and bind it to the shipping progress bar.


  1. Create Module for Free Shipping Bar

Let’s create the separate module to add free shipping bar in top mini-cart.

You have to create vendor directory under app/code directory. Not only this, you will also have to create a module directory under newly created vendor directory.

Create Vendor & Module directory as follow :


  1. Create registration.php file

Create a registration.php file on the root folder of your module for module registration and add the following content:

  1. Create module.xml file

For our module instruction, create a new directory “etc” on root directory. Also, create a module.xml file under “etc” directory and add the following content.

In <sequence> element add those Magento core modules that you want to load before the current module.

Run the following command using the command line interface from Magento root directory to enable the module.

$ php ./bin/magento setup:upgrade

  1. Extend default.xml layout to add shipping bar block

To add a new block for shipping bar in the minicart section, we need to extend layout from Magento checkout core module.

For extending layout, we need to create a default.xml layout at the following location :


Add following content in the default.xml file to create the new block for shipping bar.

  1. Create block class and template file for block

Create block class for newly added block at the location below :

We will use this class to set dynamic configuration for maximum price of free shipping bar in future.


Add following content in Sidebar.php file,

Create template to render the content of knockout js template file at the following location with given content:


Make sure that in the data-bind attribute, the scope name should be the name of our jsLayout component that we had defined in the default.xml file.

  1. Create jsLayout component & template file

Now, we have to create jsLayout component file as well as related template file as per defined in the default.xml file.

  • Create a component file at the following location :


  • Create a component template file at the following location :


Add following content in template file content.html

Add following content in component file minicartaddons.js

  1. Create less file for the progress bar

Create miniprogress.less file for applying css of progress bar at the following location  with the code given below:


Include miniprogress.less file in <head> element before the <body> element at default.xml layout file by adding the following content.

Free Shipping Bar has been added in mini-cart and you can see that in the screenshot below:

Shipping Bar

  1. Create system.xml file to add configuration menu at admin panel

Now, we are going to add configuration menu for free shipping bar in the store config menu at admin side.

Create system.xml to add a new tab and section for the configuration of shipping bar under store > configuration menu at the following location by adding the code snippet given below:


  1. Create config.xml file to define a default value

Create config.xml file to set a default value of shipping bar maximum price at the following location by adding the code given below:


By making the above changes in the file, you will see that the configuration menu will appear at the store > configuration menu.
Shipping Bar Configuration

Now, we are going to fetch default value of max price which is set at admin panel and will reflect it in the shipping bar.

  1. Create helper to get config value of shipping bar

To get the configuration value of max price for shipping bar we need to create helper at the following location with below content.


  1. Use helper to assign config value of shipping bar to the block

Now, we can use the above helper’s function using dependency injection concepts.

Replace the content of app/code/Kiwicommerce/Shippingbar/Block/Cart/Sidebar.php file with the code snippet given below:

  1. Assign shipping bar config value to the jsLayout component

Add the following code in app/code/Kiwicommerce/Shippingbar/view/frontend/template/cart/minicart.phtml file to assign the config value to the javascript variable.

Now, your current file will look like this,

Modify your js component file with the following content,


Replace the following line of code,
var maxPrice = 100;

With the code given below:
var maxPrice = maxpriceShipping;

Happy coding! 🙂

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *