README

Magento 2 Notification Bar Extension: Promo Bars, Countdown Timers, Targeting and Scheduling (Hyva + Luma)

Show targeted announcement bars anywhere on your Magento 2 store. Panth Notification Bar lets you create unlimited stackable bars with countdown timers, CTA buttons, scheduling, page targeting, customer group targeting, geo-targeting, device rules, and cookie-based dismissal. Native templates for Hyva (Alpine.js) and Luma are both included.

Product page: kishansavaliya.com/magento-2-notification-bar.html

Quick Answer

What is Panth Notification Bar? It is a Magento 2 announcement bar extension that lets you create unlimited notification bars with full scheduling, targeting, and styling options so you can show the right message to the right visitor on the right page.

What does it add to my store?

Unlimited bars that stack vertically in priority order, each with its own position, colors, and content.
Live countdown timers that run client-side for flash sales and limited-time offers.
CTA buttons per bar with custom label, URL, and colors.
Granular targeting by store view, customer group, country, page type, URL pattern, URL parameter, and device.
Scheduling with active-from and active-to dates so bars appear and expire automatically.
Dismissible bars that remember each visitor's choice via a configurable cookie window.

Which themes are supported? Both Hyva (Alpine.js, no jQuery) and Luma. The right template is picked automatically based on the active theme.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Kishan Savaliya

Top Rated Plus on Upwork

100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

Panth Infotech Agency

Magento Development Team

Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud

Visit our website: kishansavaliya.com | Get a quote: kishansavaliya.com/get-quote

Who Is It For
Key Features
Compatibility
Installation
Configuration
How It Works
FAQ
Support
About Panth Infotech
Quick Links

Who Is It For

Merchants running time-sensitive promotions who need flash sale bars with live countdown timers that expire automatically.
Stores with multiple customer segments who want to show different messages to guests, VIP groups, or specific countries.
Hyva storefronts that need a notification bar built with Alpine.js and no jQuery added back in.
Marketing teams who manage seasonal campaigns across many pages and need scheduling so bars go live and expire without a developer.
Stores selling to multiple regions who want geo-targeted messaging, such as a free shipping threshold for the US and a separate notice for the EU.

Key Features

Unlimited Bars with Stacking

Create unlimited bars, each with its own content, position, style, and audience.
Automatic stacking so multiple bars render vertically in sort order when enabled.
Max visible cap in global settings limits how many bars appear at once per page.
Six bar types with preset color palettes: info, warning, success, promo, urgent, custom.

Positioning

Top fixed sticks to the top of the viewport as the user scrolls.
Top static sits at the top of the page and scrolls away with content.
Bottom fixed sticks to the bottom of the viewport.
Bottom floating shows as a rounded pill at the bottom for subtle announcements.

Rich Content and Styling

HTML content per bar with an optional separate mobile-specific override.
Solid color, gradient CSS, or image background, styled independently per bar.
Text color, font size, bar height, padding, and icon controls per bar.
Custom CSS injected inline per bar for one-off design changes without touching the theme.
Five preset color palettes ship with the module for info, success, warning, promo, and urgent bar types.

CTA Buttons

Optional CTA button per bar with label, URL, and background and text colors.
Open in new tab toggle per button.
Button colors inherit from the bar or can be fully overridden.

Live Countdown Timers

End-date countdown renders a live days, hours, minutes, and seconds counter.
Custom label lets you prefix the counter with any text, for example "Sale ends in".
Expired text shows a fallback message after the countdown hits zero.
Runs entirely client-side with no server polling or extra requests.

Targeting

Store views let you scope a bar to specific stores or all stores.
Customer groups target logged-in groups, guests, or any subset.
Country targeting by ISO country code list.
Page targeting set to all, include specific URLs, or exclude specific URLs.
Page types filter by cms, category, product, cart, checkout, customer account, and more.
URL patterns support wildcards, for example /sale/* or /brand/nike*.
URL parameters show a bar only when a specific query parameter is present, for example utm_campaign=spring2026.
Device targeting shows or hides a bar on mobile or desktop independently.
Separate mobile content for shorter copy on small screens.

Scheduling

Active-from and active-to dates let bars appear and expire automatically, server-side, with no layout shift.
Auto-close seconds dismiss the bar automatically after N seconds on any page.
Animation options: slide_down, fade_in, or none.

Dismissal and Cookie Memory

Dismissible toggle per bar adds a close button.
Cookie duration in days controls how long the dismissal persists. Zero means session-only.
Dismissed bars stay hidden for the configured window even as the visitor navigates between pages.

Hyva and Luma Ready

Native Hyva template built on Alpine.js with no jQuery, RequireJS, or Knockout.
Native Luma template using plain vanilla JavaScript.
Automatic theme detection via Panth\Core\Helper\Theme.
Rendered in after.body.start so the bar is painted before the header, avoiding flicker.

Built to Last

MEQP-style code with constructor dependency injection only.
ifconfig-gated block so nothing is built when the module is disabled.
Single indexed database table (panth_notification_bar) with indexes on is_active, sort_order, position, date_from, date_to, and bar_type.
Translation ready, every label uses Magento's __() function.
Multi-store and multi-language ready out of the box.

Compatibility

Requirement	Versions Supported
Magento Open Source	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud	2.4.4 to 2.4.8
PHP	8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme	1.3+ (native Alpine.js support)
Luma Theme	Native support
Required Dependency	`mage2kishan/module-core` (free)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-notification-bar
bin/magento module:enable Panth_Core Panth_NotificationBar
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

Download the latest release from Packagist or from the product page.
Extract it to app/code/Panth/NotificationBar/ in your Magento install.
Make sure Panth_Core is installed too (required dependency).
Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_NotificationBar
# Expected: Module is enabled

After install, open:

Admin → Panth Infotech → Notification Bar → Manage Bars

Configuration

Go to Stores → Configuration → Panth Extensions → Notification Bar.

Setting	Group	Default	Description
Enable Notification Bar	General Settings	Yes	Master toggle. Disabling this removes all bars from the storefront.
Max Visible Bars	General Settings	3	Maximum bars rendered on any page at one time.
Default Position	Display Settings	top_fixed	Fallback position applied to new bars.
Stack Multiple Bars	Display Settings	Yes	When enabled, qualifying bars stack vertically. When disabled, only the top-priority bar shows.
Default Animation	Display Settings	slide_down	Animation applied to new bars: `slide_down`, `fade_in`, or `none`.
Z-Index	Display Settings	9999	CSS z-index for the bar container. Raise this if a theme header overlaps the bar.

Per-bar options (content, colors, countdown, targeting, scheduling, dismissal) are set on each bar's edit page under Panth Infotech → Notification Bar → Manage Bars.

How It Works

The block is placed in after.body.start through layout XML so it renders before the header.
On each page load, the module queries panth_notification_bar for active bars that match the current store, customer group, country, page type, URL, URL parameters, device, and schedule.
Qualifying bars are sorted by sort_order ascending. The global Max Visible Bars cap is applied.
Each bar renders as a fixed or static container at the configured position.
If Stack Multiple Bars is off, only the first qualifying bar is rendered.
Countdown timers run in Alpine.js (Hyva) or plain JavaScript (Luma) with no server calls after the initial page render.
When a visitor dismisses a bar, a cookie is written. On subsequent page loads, the module reads that cookie in JavaScript and hides the bar client-side without re-querying the server.

FAQ

Does the notification bar work on Hyva themes?

Yes. Panth Notification Bar ships a native Hyva template using Alpine.js, with no jQuery, Knockout, or RequireJS. The module detects the active theme through Panth_Core and serves the correct template automatically.

Can I run more than one bar at a time?

Yes. Create as many bars as you need. When Stack Multiple Bars is enabled, all qualifying bars render together in sort order up to the Max Visible Bars cap. When stacking is off, only the highest-priority qualifying bar shows.

Can I target a bar to visitors from a specific country?

Yes. Enter a comma-separated list of ISO country codes in the Target Countries field, for example US,CA,GB. Country detection uses the store's standard geo-resolution.

Can I show a bar only to visitors coming from a UTM campaign?

Yes. Add the parameter to Target URL Params as utm_campaign=spring2026. The bar renders only when that query parameter is present in the URL.

Can I schedule a bar to go live and expire automatically?

Yes. Set Active From and Active To dates. The bar is server-filtered by date range so it does not render outside that window. No cache flush is needed when a bar expires.

How do I stop the bar from appearing on the checkout page?

Set Page Targeting to exclude and add /checkout/* (and /onestepcheckout/* if you use a custom checkout) to the target URL patterns.

Can I show a different message to mobile visitors?

Yes. Either use the Show on Mobile and Show on Desktop toggles to create separate bars per device, or set Mobile Content on the same bar for shorter copy on small screens.

Once a visitor closes a bar, will it come back?

Only after the cookie expires. Set Cookie Duration (days) to control the window. Set it to 0 for session-only dismissal, so the bar returns when the visitor opens a new browser session.

Does it work on multi-store setups?

Yes. Store view targeting, customer group rules, and configuration settings all respect Magento's scope order of default, website, and store view.

Support

Channel	Contact
Product Page	kishansavaliya.com/magento-2-notification-bar.html
Email	kishansavaliyakb@gmail.com
Website	kishansavaliya.com
WhatsApp	+91 84012 70422
GitHub Issues	github.com/mage2sk/module-notification-bar/issues
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:

About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Resource	Link
Product Page	magento-2-notification-bar.html
Packagist	mage2kishan/module-notification-bar
GitHub	mage2sk/module-notification-bar
Website	kishansavaliya.com
Free Quote	kishansavaliya.com/get-quote
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech
Email	kishansavaliyakb@gmail.com
WhatsApp	+91 84012 70422

Ready to add targeted announcement bars to your store?

SEO Keywords: magento 2 notification bar, magento 2 announcement bar, magento 2 promo bar, magento 2 top bar, magento 2 bottom bar, magento 2 sticky bar, magento 2 countdown bar, magento 2 flash sale bar, magento 2 free shipping bar, magento 2 countdown timer extension, magento 2 dismissible bar, magento 2 geo targeted bar, magento 2 customer group bar, magento 2 utm targeted bar, magento 2 device targeted bar, magento 2 mobile announcement bar, magento 2 stacked bars, magento 2 bar scheduling, magento 2 cta bar, hyva notification bar, hyva announcement bar, alpine js bar magento, luma notification bar, magento 2.4.8 notification bar, magento 2.4.7 notification bar, panth notification bar, mage2kishan notification bar, panth infotech, hire magento developer, top rated plus magento freelancer, kishan savaliya magento, custom magento 2 module development, magento 2 hyva development, magento 2 extension developer

mage2kishan / module-notification-bar

Maintainers

Package info

Statistics

Security