How to Add & Setup Notification Bar for Magento 2?
You might have heard about web push notifications - A type of notification (typically in a form of a popup) is sent to a visitor via desktop or mobile web anytime they open their browser, not necessarily on the website.
Still, this marketing tactic carries the risk of annoying potential customers when spamming them with too many messages in a short period of time.
Unlike web push notifications, web notification bars come in as the best solution for websites in most cases. Therefore, this post will explain what the notification bar is, how it works, as well as how to set it up on Magento-based websites for the best result.
Let’s get started.
Table of contents
- What are notification bars?
- The benefits of web notification bars for eStores
- How to add & setup notification bar for Magento 2
- Step 1: Install the extension on Mageplaza’s official website
- Step 2: Configure the settings for the General and Display sections
- Step 3: Create a new notification bar
- Step 4: Set up the conditions, design, and display of the new promo bar
- Step 5: Set the triggers for the promo bar
- Step 6: Check results on the storefront
- Step 7: Manage all the created promo bars
- Examples of notification bars
- The bottom line!
What are notification bars?
Basically, a notification bar is also known as a promotional banner that typically sits on the top or the bottom of a webpage.
Its function is to inform website visitors about a short piece of information properly:
Exclusive deals or promo codes, possibly with a countdown timer for creating a sense of urgency
New arrivals with compelling discounts
CTA banners for improved navigation
Significant changes, for instance: new business hours, updates of shipping and purchase policy, and many more
The benefits of web notification bars for eStores
As in the name, merchants use a “notification” bar to intentionally notify people who visit their site a message throughout the website experience. These messages are usually short, straightforward, and come with different marketing purposes.
To help you better visualize the implementation of notification bars on a website. Have a look at the below example.
Notification bar becomes one of the favorite digital marketing tools to draw all web visitors’ attention to the wanted information without getting in the way of other content. It’s effective as an opt-in reminder that:
A much more comfortable and non-pushy way to get the attention of your site visitors during their whole web surfing experience
Give visitors an easy way to get to your news (for instance, direct to the discount campaign) by just clicking on the notification bar
How to add and setup notification bar for Magento 2
By default, the notification bar is not in the “built-in” feature list of Magento. Thus, it would help if you had an extension to help you set up and add website notification bars.
Mageplaza is a well-known extension provider in the marketplace with up to 232 extensions and 85.000 global customers. And Mageplaza’s Promo Bar extension is one of their offers specially designed to enhance sales power through notification bars.
Below is a step-by-step guide on how you create and set up a web notification bar with Promo Bar for Magento 2.
Step 1: Install the extension on Mageplaza’s official website
All you need to do is go to Magepalza’s official website, click on the “Add to Cart” button.
Here, you can choose whether to download the Promo Bar extension for the Magento Community or Magento Enterprise.
For those who want to gather more information on this extension. The webpage comes with detailed info a merchant needs, from Demo to User Guide and Reviews.
Step 2: Configure the settings for the General and Display sections
Once you have completed the installation, log into your Magento Admin account, then navigate to Marketing > Promo Bars > Configuration. Next, following the guides below:
Enable = Yes: Activate the extension and get it ready to configure
Category Name: Here, you can label the promotion (Required)
Action & Add: You can add a promotion category or delete a created one by click on the “Add” button or the trash icon
Allow Customer to Close Promo Bar = No/ Yes: Set whether or not customers are able to close the notification bar
Auto Close Promo Bar After: The system will automatically close the notification bar based on the time you set at this field
Auto-reopen schedule: Allow admin to schedule the auto-reopen feature to the promo bar (This feature is activated once customers click the close button)
Select Enable Multiple Promo Bars = Yes: Allow displaying multiple notification bars at the same time. For the No selection, the web will only display the notification bar with the highest priority
Number of Promo Bar = Separate/ Slider: Here, the admin can choose whether to display the notification bar separately or in the slider
Change Bar Time (Appear when Number of Promo Bar = Slider): Set the display time for each notification displayed on the slider
Step 3: Create a new notification bar
Navigate to Marketing > Manage Promo Bar > Add New Promo Bar button. Here, open the General section and enter the required setting information, including:
Name: Enter the notification bar’s title
Select Status = Enable: This will allow the promo bar to be displayed on the storefront
Store Views: Here, you need to select a store where to display a notification bar
Customer Groups: Select groups of customers who can view the notification bar
Promotion Category: Choose the promo category (created on the first step) to be applied to the notification bar
Start Date & End Date: Select the start date and end date of the promo bar display
Priority: Set the priority for this promo bar (The lower the number is, the higher the notification bar’s priority)
Step 4: Set up the conditions, design, and display of the new promo bar
Set the condition for the auto-show feature of the notification bar
This is one of the unique features of this Magento 2 Promo Bar extension. The system will display different notification bars based on the conditions you set at the backend.
For instance, if you set the shopping cart (with a specific category) as a display condition.
The condition: A customer’s shopping cart need to have an item in the selected category (for example, women sneaker)
The result: The notification bar with the content “Buy One, Get One 30% Off for Women Sneaker” will be displayed
This feature is extremely useful in implementing promotional campaigns for each period automatically by conditions. Thus, reduce the workload for the sellers.
Configure the design for the notification bar
Configure the notification bar’s appearance on the Design section:
Load Template: Choose your wanted promo bar template
Text Content: Enters content for the promo bar
URL Text: Here is where you insert the content that’s displayed for the value
URL: Where you assign the link to the URL Text. So when a customer clicks on the “text URL”, it will direct them to a new tab with the assigned link
Text Content Color, Background Color Select, URL Text Color & Background Color: Fill in your wanted value for each element of the notification bar
Preview Template: Here, you can see the Preview of the notification bar template with the selected value above
Set the position for the notification bar
Then, you can move to the next step of setting the notification bar’s display position on the Display section. Click on the Display Position field and choose one out of 4 options:
Top of the page
Top of the content
The fixed bar at the top of the page
The fixed bar at the bottom of the page
For the Custom file, the admin can choose any store location to display the Promo Bar. To do this, you need to copy and paste the above commands into the CMS page/ Static Block, template.phtml file, and store Layout file.
Set the locations for the notification bar
This is where you set the location the notification bar will be displayed. Mageplaza Promo Bar extension comes with 2 options:
All Pages: The system will display the notification bar on all webpages
Specific Page: You can decide whether to display the promo bar on a page (home page, checkout page, shopping cart page), category page, or specific product pages
Step 5: Set the triggers for the promo bar
Auto-close after: Choose the time to turn off the notification bar automatically. The system will apply the time you set in the Configuration section (step 2)
Auto-reopen schedule: Select the time to re-open the notification bar. The system will use the time you set in the Configuration section (step 2)
Step 6: Check results on the storefront
Till this step, your notification bar is ready to live on the store web. However, it’s crucial to have a quick check on your results afterward.
This makes sure that all your notification bars are working properly and seamlessly. Plus, you can also have instant actions when something goes wrong.
Step 7: Manage all the created promo bars
Along with your notification bars’ settings, those who use Mageplaza Promo Bar for Magento 2 can manage and view all the created Promo Bars systematically via a grid.
Here, you can check and view essential information of a promo bar, for instance:
ID, Content, Name, and Status
Promotion Category and Position
Start Time, End Time, Priority, and Action
Plus, you can also:
Edit: Change and update the information of any promo bar on the grid
Delete: To remove a promo bar out of the grid, click on your wanted promo bar, then choose Action > Delete
Change Status: Change the status (Enable or Disable) of any promo bar
Go to the settings of a new promo bar by clicking on the “Create New Promo Bar” at the top-right corner
Examples of notification bars
There are many ways you can use web promo or notification bars for better sales and marketing results. Below are some ideas of notification bars in practice to consider.
Shoe Carnival is an American retailer of family footwear. They use the promo bar to announce visitors their latest promotion campaigns in the slider, including:
Buy One, Pay Later
Join Shoe Perks Today. Earn points for shopping (Promotion for the brand’s reward loyalty program)
Limited Time offer. Shoe Perks members get free standard shipping on all orders
Helly Hasen is a manufacturer and retailer of clothing and sporting goods. As you can see on the image below, their notification bar of shipping free is displayed on the website’s top.
What’s unique about this promo bar is that the content will change based on the visitor’s IP (location). In other words, the system will calculate the required amount of order value a customer in that country needs to reach for free shipping.
Plus, unlike Shoes Carnival, Helly Hasen does display more than one banner on their website separately.
The bottom line!
There are many types of promotion campaigns you can implement creatively through web notification bars; just make sure that your banners are:
Eye-catchy from the first sight of web visitors
Notification bars should be placed somewhere spottable to users (Typically on the top of a website)
Able to navigate your visitors to a landing page
The content of the banner needs to be short, straightforward, and attractive to the users
Those tiny notification banners on your site might help you achieve unexpected results for your marketing plan.
& Maintenance Services
Make sure your M2 store is not only in good shape but also thriving with a professional team yet at an affordable price.Get Started