How To Use & Setup Notification Bar For Magento 2?

You may have heard of web notifications. This type of notification, typically in the form of a popup, is sent to visitors via desktop or mobile web whenever they open their browser. Not necessarily on the website.

This marketing tactic can still be annoying to potential customers if they get too many messages in a very short time.

Web notification bars are the best option for most websites, and they work better than web push notifications. This post will describe the notification bar, its function, and how to set it up for Magento-based websites.

Let’s get started.

What are notification bars?

A notification bar, also known as a banner for promotion, is a page’s top or bottom.

Its purpose is to provide information to website visitors regarding a brief piece of information correctly:

For creating urgency, you might be able to get exclusive deals or promo codes.

Enjoy amazing discounts on new arrivals

An announcement about the Free Shipping Program

CTA banners improved navigation

Important changes include new hours of operation, updated shipping and purchase policies, and many other things.

Benefits of web notification bars to eStores

Merchants use a “notification bar” to notify visitors of their website that they have a message. These messages are often short and simple, with different marketing purposes.

This will help you to better see the placement of notification bars on websites.

The most popular digital marketing tool is the notification bar. It draws all visitors’ attention to the desired information, without getting in the way. It can be used as an opt-in reminder.

This is a more relaxed and friendly way to grab their attention throughout their entire web surfing experience

Visitors can click on the notification bar to access your news.

Magento 2: How to set up and add a notification bar

Magento does not include the notification bar in its “built-in” feature set by default. It would be helpful if an extension was available to assist you in setting up and adding website notification bars.

Mageplaza, a well-known extension company in the market, has up to 232 extensions and over 85.000 customers worldwide. Mageplaza’s Promo Bar Extension is one of their special offers that aims to increase sales through notification bars.

Here is a step by step guide to creating and setting up a web notification panel with a Promo bar for Magento 2.

Step 1: Install the extension via Mageplaza’s official site

Simply visit Magepalza’s website and click the “Add To Cart” button.

You can choose to download the Promo Bar extension either for Magento Enterprise or the Magento Community.

This extension is available for those who wish to find out more. This webpage contains all the information a merchant requires, including a Demo and User Guide as well as reviews.

Step 2: Configure settings for the Display and General sections

After you’ve completed the installation log in to your Magento Admin account. Next, navigate to Marketing > Promo bars > Configuration. Follow the steps below to continue:

Enable = Yes. Activate the extension to make it available for configuration

Category Promotion:
- You can name the promotion here (Required).
- Action & Add: Click on the “Add” button to add or remove a promotion category.

Allow Customers to Close the Promo Bar = Yes/ No: You can set whether customers are allowed to close the notification bars

After you have entered the time, the system will automatically close this notification bar.

Schedule for auto-reopen: This allows admin to add the auto-reopen function to the promo bar. (This feature activates when customers click the close button.

Select Enable Multiple Promo bars = Yes: Allow multiple notification bars to be displayed at once. The web will display only the notification bar that has the highest priority for the No selection

Number of Promo Bars = Separate/ Slider. Here the administrator can choose to display the notification bars separately or in the slider.

Adjust the Time of the Bar (Appear when the Promo Bar = Slider): You can set the display time for each notification on the slider

Step 3: Create a brand new notification bar

Navigate to Marketing > Manage Promo Bar > Add New Promo Bar button. Open the General section, and then enter the necessary setting information.

Name: Type the title of the notification bar

Select Status = Enable: This will enable the promo bar to appear on the storefront

Store Views: Select a store to which you wish to show a notification bar

Customer Groups: Choose groups of customers that can see the notification bar

Promotion Category: Select the category you want to apply to the notification bar (created in the first step).

Start Date and End Date: Choose the start date or end date for the promotion bar display

Priority: Choose the priority of this notification bar. The lower the number, the more priority it has.

Section on Condition

You can set the conditions for the auto-show function of the notification bar

This extension for Magento 2 Promo Bar is unique. Based on the conditions set at the backend, the system will display different notification bars.

You can set the shopping cart with a particular category as a display condition.

The condition: Customers must have an item from the chosen category in their shopping cart (for example, women’s sneakers).

The result: A notification bar will appear with the text “Buy One, Get One 30% Discount for Women Sneakers”

This feature allows you to automatically implement promotional campaigns for each period by setting conditions. This will reduce the seller’s workload.

Design the notification bar

Configure the appearance of the notification bar in the Design section.

Load Template: Select your preferred promo bar template

Text Content: Submit content for the promo bar

URL Text: This is where you can insert the content to be displayed for the value

URL: This is where you add the URL Text to your URL. When a customer clicks the “text URL”, it will redirect them to a new tab with that link.

Choose the background color for text content, and URL text color. Fill in the desired value for each element on the notification bar.

Preview Template: You can view the preview of the template for the notification bar with the selected value by clicking here

Section to display

Position the notification bar.

Next, you can adjust the display position of the notification bar on the Display section. Select one of the four options available in the Display Position field.

Start of the page
Top of the content
The fixed bar at top of page
The fixed bar at bottom of page

The admin can select any store to display a Promo Bar. You will need to copy the following commands and paste them into the CMS page/ static block, template.phtml and store layout file.

Place the notification bars

Here you can set the location where the notification bar will appear. There are 2 options for Mageplaza Promo Bar Extension:

All Pages: All webpages will have the notification bar.

A Specific Page: The promo bar can be displayed on specific pages (home page checkout page shopping cart page), category pages or product pages.

Step 5: Determine the triggers to promote the bar

Auto-close after: Select the time at which you want the notification bar to be turned off automatically. The Configuration section (step 2) will determine the time that the system will use.

Auto-reopen schedule. Select the time when you want to reopen the notification bar. The Configuration section (step 2) will determine the time that the system uses.

Step 6: Review the results in the storefront

Your notification bar will not be live until this step. It is important to check your results immediately after.

This ensures that your notification bars work seamlessly and properly. You can also take immediate actions if something goes wrong.

Mageplaza Promo Bar Magento 2 users can view and manage all created Promo Bars from a grid.

All promo bars created can be managed

You can view and check the essential information about a promotion bar, such as:

ID, Content, Name and Status
Promotional Category and Position
Start Time, End time, Priority, Action

You can also:

Edit: Update and change the information for any promo bars on the grid

Delete: To delete a promo bar from the grid, click on it and then choose Action > Delete

Modify Status: You can change the status of any promo bar (Enable/Disable).

Click on the “Create New Promo Bar” button in the upper-right corner to access the settings for a new promo bar.

Examples of notification bars

There are many ways to use notification bars or web promo for better sales and marketing results . Here are some examples of notification bars that you might want to try.

Shoe Carnival

Shoe Carnival, an American family footwear retailer, is known as Shoe Carnival. The slider is used by Shoe Carnival to announce their latest promotions.

Buy One and Pay Later

Join Shoe Perks Today. Shop and earn points (Promotion to the brand’s loyalty program reward loyalty program).

This offer is only for a limited time. Shoe Perks members receive free standard shipping for all orders

Helly Hasen

Helly Hasen is a retailer and manufacturer of clothing and sporting goods. The website’s top display displays their notification bar stating that shipping is free, as you can see in the image below.

The unique thing about this promo bar is the fact that the content will be modified based on the IP (location) of the visitor. The system will calculate the order value that a customer must reach to receive free shipping.

Helly Hasen also displays more than one banner separately, which is a departure from Shoes Carnival.

Bottom line

You can create many different types of promotions using web notification bars. Just make sure your banners are:

Web visitors are immediately attracted to the eye-catchy images

Notification bars should always be visible to users (typically at the top of a site).

You can guide your visitors to a landing site

The banner content should be concise, simple, and appealing to users

These tiny banners could help you get unexpected results from your marketing plan.

About

Work

Featured Work

Services

Insights