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
    • Condition section
    • Display section
  • 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
  • Shoe Carnival
  • Helly Hasen
• 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

• An announcement of Free shipping program

• 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

• Promotion Category:

  • 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

Condition section

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

Display section

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

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

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.