Notification Bar Pro for Magento 2

Notification Bar Pro

Introduction

Notification Bar Pro is a perfect solution for marketing promotions, allowing displaying clean notification bar on selected pages of your store and keep your visitors, customers informed about latest news, announcements, promotions, subscription, new offers, discount, deals and much more. The extension enables to create unlimited notification bar, with the image (file upload and URL), countdown and HTML content, notifications can be grouped and placed throughout any page and position of the store. Notification Bar Pro extension provides store administrator with the Click Through Rate (CTR) statistics per the notification, allowing to identify the promotional offers visitors and customers are interested in the most and adjusting the marketing policy accordingly. Also, the extension is fully responsive for mobile devices, and come with multiple customization options in the admin panel, to style the notification bar as per your needs.

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Managing Groups

Groups are composed of different Notifications and represent a block of notifications at the home, product, category, CMS and additional pages. To check or modify groups, go to MARKETING ⟶ Notification Bar by Ulmod ⟶ Groups.

Note: during the initial setup this grid contains a Sample Group created during the installation, to get you started.

The store administrator can manage all the groups from the grid. To create a Group click "Create New Group" button. The Group contains four settings sections: General, Position, Slider, Notifications.

General

In the General section the following settings are available :

Enable Group - allows enabling or disabling the Group.

Name - enter the name of the Group for internal identification purposes.

Position

In the Position section, it's possible to set up the following :

Display On  enables to choose the type of pages to display the Group:

  • Home Page - the Group, is displayed on the home page;
  • Product Page - if selected, store administrator can specify a set of product attributes that define a target product page;
  • Category Page - if selected, store administrator can specify a set of categories the Group should be displayed at;
  • Custom Page (via Widget) - if selected, store administrator can create a widget and select appropriate Group to be displayed within.

Layout Position enables to choose the position of the group at the target page; store administrator can choose from Menu Top, Menu Bottom, Content top, Page bottom, Sticky Top, Sticky Bottom.

Slider

In the Slider section, the following settings are available :

Animation Effect - choose the notification animation on change. You can choose from Slide, Fade Out/In, or Scale;

Pause Time Between Transitions (in ms) - defines the interval between switching slides automatically. Set 0 to disables automatic rotation;

Notification Transition Speed (in ms) - defines the speed to switch notifications;

Stop Animation On Mouse Hover the Group - defines if the slide switching should stop upon the mouse hover;

Display Notifications Bar in Random Order - defines if the slides should be displayed randomly.

Display Navigation Arrows - enables or disables navigation arrows at the slider;

Display Navigation Dots - enables or disables navigation dots (pagination) at the slider;

Notifications

Here store administrator is suggested specifying notifications that will be in the Group.

Please use the same resolution images and the same notification content type (Eg. Image, Image, and Countdown, HTML or HTML and Countdown) per group for the best results.

Managing Notifications

To check or modify notifications, go to MARKETING ⟶ Notification Bar by Ulmod ⟶ Notifications

To create a Notification click "Create New Notification" button. 3 setting blocks represent the New Notification screen: General, Content, URL Options.

General

In this General section the following settings are available:

Name - defines the name of the Notification for internal identification purposes;

Enable Notification - allows enabling or disabling the Notification;

Assign to Group(s) - allows assigning the Notification to a particular group;

Customer Groups - select the customer groups the Notification will be displayed;

Store View - select store views the Notification will be displayed at;

Display From/To - allows Notification scheduling.

Content

In this section, the store administrator can choose the Content-Type to display the notification:

  • Image - if selected, the store administrator can specify the image type (file or URL), image title and image alt to be displayed;
  • Image and Countdown - if selected, store administrator can specify the image type (file or URL), image title, image alt, countdown position (left or right) and the end date of the countdown to be displayed. In the "" field, enter the date in the following format 'YYYY/MM/DD';
  • HTML - if selected, store administrator can define the HTML content to be displayed. The WYSIWYG editor allows to define any content, insert widget, image or variable;
  • HTML and Countdown - if selected, store administrator can define the HTML content, countdown position (left or right) and the end date of the countdown to be displayed. In the "" field, enter the date in the following format 'YYYY/MM/DD';

URL Options

In this section it's possible to set up the following:

URL - allows defining a destination URL;

Open URL in New Window - defines if the destination URL should be opened in a new browser window;

Add 'No follow' to URL - defines if rel="no follow" should be added to the destination URL.

Managing Statistics

Once the Groups and Notifications are set up and running, the store administrator can estimate the performance of each notification. To check the statistics, go to MARKETING ⟶ Notification Bar Pro by Ulmod ⟶ Statistics

Under these settings, the store administrator can filter existing Notification by the Group they are assigned to, define the target clicks, loads, CTR, or find a particular Notification by its name.

This section is useful for identifying the promotional offers shoppers are interested in the most and adjusting the marketing policy accordingly.

Frontend View

Once the notifications are created and assigned to a specified group, they will display in the storefront as follow

Category Page

Example of two notifications with type "Image", displaying in the "Content Top" of the page

Product Page

Example of one notification with type "HTML and Countdown", displaying in the "Content Top" of the page

Custom Page (added via widget)

Example of one notification with type "Image and Countdown", displaying in the "Content Top" of the page

Customization (Adjust Colors)

To adjust/changes the colors, please add this following CSS codes at your custom theme

Choose your color picker from this guide and make sure to prefix each color with "#". eg #FFFFF

Slider Navigation arrows and pagination dots:

 .uk-slidenav-contrast { color: #333; } .uk-dotnav-contrast>.uk-active>* { background: #333; } 

Content Type: Image and countdown:

 .um-image-countdown { font-size: 12px; background-color: #f0f0f0; color: #333; } .um-image-countdown .um-countdown-timer .timer-clock { background-color: #f0f0f0; border-color: #333; color: #333; } 

Content Type: HTML and countdown:

 .um-html-countdown .um-countdown-timer .timer-clock, .um-html-countdown .um-html { background-color: #f0f0f0; } .um-html-countdown { font-size: 12px; color: #333; } .um-html-countdown .um-countdown-timer .timer-clock { border-color: #333; color: #333; } 

Content Type: HTML :

 .um-html-countdown { background-color: #f0f0f0; } .um-notifbar-block.um-html-content{ height: auto; font-size: 13px; background-color: #f0f0f0; color: #333; } 

In case you can not achieve it by yourself, please contact our support team at [email protected], we will help out with that

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page