Magento 2 Free Shipping Bar allows to create and display free shipping bar to increase average cart value and drive more purchases from users to avail free shipping.
Table of Content
- Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
- Login to your SSH and run below commands step by step:
- 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
- That’s it.
- Configuration
For configuring the extension, log in to Magento 2, move to Stores > Configuration > Free Shipping Bar where you can find various settings to enable the extension.
- Free Shipping Bar: Enable Free Shipping Bar extension from here.
- Free Shipping Threshold: Select the customer group to enable the free shipping bar for, set the threshold value and notification text to show in the bar.
Example: If you have set customer group as “Not logged in”, threshold value= 150 and notification text as “Add more {leftvalue} to be eligible for Free Shipping”, when users visit your site without logging in, they will notified with “Add more $150 to be eligible for Free Shipping” message in the bar.
- Free Shipping Availability Success Message: Enter the free shipping availability success message. It will be shown when an order qualifies with the threshold value and eligible for free shipping.
- Bar Position: Select the bar position from the drop-down menu.
- Stick Shipping Bar: Enable from the dropdown menu to stick the shipping bar on the top or bottom of the page.
- Close button: Set “YES” to allow users to close the bar from the frontend.
- Calculate Subtotal: Select how you want to calculate subtotal.
- Display bar In: Select where you want to show free shipping bar from the desktop, mobile or both.
- Display on pages: Select pages to display free shipping bar on.
- Shipping Bar Design Settings
Configure the following settings for Shipping Bar Design.
- Bar Size: Select one of the three bar sizes from the dropdown menu.
- Bar Load Delay Time: Set bar load delay time in seconds, the shipping bar will load after the delay time added here.
- Auto Hide Bar After: Enter time in seconds to auto-hide shipping bar.
- Font Family: Select the font family of the notification text.
- Text Align: Select text alignment.
- Font Color: Select color for the font.
- Shipping Value Color: Select color for the shipping value displayed in free shipping bar.
- Close Button Color: Select color for the close button.
- Bar Background Color: Select color for the bar background.
- Animation Effect: Select button animation effect from the drop-down menu for the bar display.
- Custom CSS: Add custom CSS if required.
- Free Shipping Bar in Frontend
Once you configure the above settings, the Free Shipping Bar will be enabled in the frontend as shown below. The message will be displayed that states the items worth what amount to be added to the cart to avail free shipping. If the bar is not useful to the visitor, it can be closed too.
- Free Shipping Availability Success Message
The free shipping availability success message will be displayed in the bar once the cart is eligible for free shipping. An example is shown in the image below: