Panth Notification Bar for Magento 2 — Promo Bars, Countdown Timers & Announcements (Hyva + Luma) | Panth Infotech
Turn every page into a conversion surface. Panth Notification Bar is a production-grade announcement bar for Magento 2 with unlimited stackable bars, live countdown timers, CTA buttons, full scheduling, granular targeting (page, customer group, country, device), and dismissible cookie memory — all with native Hyva + Luma rendering.
Panth Notification Bar gives Magento 2 merchants a complete announcement and promo bar solution without hard-coding banner HTML or relying on flimsy JS snippets. Run unlimited bars — each with its own position (top fixed, top static, bottom fixed, bottom floating), colors or gradient background, icon, CTA button, countdown timer, schedule, and audience — and they automatically stack in priority order with a single cap on the maximum visible at once. Every bar can be scoped to specific store views, customer groups, page types, URL patterns, URL parameters, countries, and devices, and remembers each visitor's dismissal via a configurable cookie window.
The module auto-detects whether your storefront is running Hyva (Alpine.js + Tailwind) or Luma and renders a matching lightweight template, so you get the best performance on either stack with zero manual configuration.
Get a free quote for your project in 24 hours — custom modules, Hyva themes, performance optimization, M1→M2 migrations, and Adobe Commerce Cloud.
|
Top Rated Plus on Upwork 100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist |
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
- Key Features
- Why Panth Notification Bar
- Compatibility
- Installation
- Configuration
- Creating Notification Bars
- Positions, Stacking & Priority
- Countdown Timers
- Targeting & Scheduling
- Dismissal & Cookie Memory
- CSS Theming
- Troubleshooting
- FAQ
- Support
- About Panth Infotech
- Create unlimited bars — each with its own content, position, style, and audience
- Automatic stacking — multiple bars stack vertically in priority order
- Max visible cap — global setting limits how many bars show at once per page
- Bar types —
info,warning,success,promo,urgent,customwith preset theme colors
- Top fixed — sticks to the top of the viewport as the user scrolls
- Top static — sits at the top of the page but scrolls away with content
- Bottom fixed — sticks to the bottom of the viewport
- Bottom floating — floating pill at the bottom for subtle announcements
- HTML content — full HTML / rich text per bar with mobile-specific override
- Solid color, gradient, or image background — every bar can be styled independently
- Text color, font size, height, padding — fine-tune every visual
- Icon support — drop in an icon name for an at-a-glance indicator
- Custom CSS — inject per-bar CSS for total design control
- Theme color presets — the module ships with 5 preset palettes (info, success, warning, promo, urgent)
- Optional CTA button per bar with label, URL, and background / text colors
- Open in new tab toggle
- Button styling inherits bar colors or can be fully overridden
- End-date countdown — renders a live
days : hours : minutes : secondscounter - Custom label — prefix the counter with any text (e.g. "Sale ends in")
- Expired text — a fallback message shown after the countdown hits zero
- Runs entirely client-side — no server polling, no extra requests
- Store views — scope bars to specific stores or all stores
- Customer groups — target logged-in groups, guests, or any subset
- Country targeting — geo-target by ISO country codes
- Page targeting — show on all pages, include specific URLs, or exclude specific URLs
- Page types — cms, category, product, cart, checkout, customer account, etc.
- URL patterns — wildcards supported (e.g.
/sale/*,/brand/nike*) - URL parameters — show only when
?utm_campaign=xyzor anykey=valueis present - Device targeting — show/hide on mobile or desktop independently
- Separate mobile content — shorter copy for small screens when needed
- Active-from / active-to dates — bars automatically appear and expire
- Auto-close seconds — dismiss the bar automatically after N seconds
- Animation in —
slide_down,fade_in, ornone
- Dismissible toggle per bar
- Cookie duration — remember a dismissal for N days (
0= session) - Dismissed bars stay hidden for the configured window even across pages
- Hyva template — Alpine.js only, zero jQuery, Tailwind-friendly classes
- Luma template — vanilla JS, no heavy libraries
- Automatic theme detection via
Panth\Core\Helper\Theme - Rendered in
after.body.startso the bar is painted before the header flicker
- MEQP compliant — passes Adobe's Extension Quality Program
- Ifconfig-gated — the block is not built at all when the module is disabled
- Single database table with indexed
is_active,position,date_from/to,bar_type,sort_order - Composer-installable — clean dependency resolution via Panth Core
- Multi-store & multi-language ready
Most Magento 2 notification / announcement bar modules ship a single bar with hard-coded colors, no scheduling, and no targeting — which is fine for one static "Free Shipping" strip, but useless for real marketing operations. Panth Notification Bar is built for merchants who actually run campaigns:
- Flash sales with live countdown timers and auto-expiry
- Segmented promos — VIP group gets one bar, guests get another
- Geo-targeted messaging — EU-only cookie notice, US-only free shipping threshold
- UTM-driven offers — show a matching bar only to visitors coming from a specific ad
- Progressive announcements — stack a top-fixed flash sale + a bottom-floating social proof
- Mobile-optimized copy — short headline on phones, full pitch on desktop
No third-party JS, no banner iframes, no layout shift — just a fast, targeted, schedulable bar that works on both Hyva and Luma out of the box.
| 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 — 2.4.8 |
| PHP | 8.1.x, 8.2.x, 8.3.x, 8.4.x |
| MySQL | 8.0+ |
| MariaDB | 10.4+ |
| Hyva Theme | 1.3+ (Alpine.js template) |
| Luma Theme | Native support |
| Required Dependency | mage2kishan/module-core |
Tested on:
- Magento 2.4.8-p4 with PHP 8.4 (Hyva 1.3.x)
- Magento 2.4.7 with PHP 8.3 (Luma)
- Magento 2.4.6 with PHP 8.2 (Hyva)
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- Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
- Extract the contents to
app/code/Panth/NotificationBar/in your Magento installation - Ensure
Panth_Coreis also installed (required dependency) - Run the same commands as above starting from
bin/magento module:enable
bin/magento module:status Panth_NotificationBar
# Expected output: Module is enabledAfter installation, navigate to:
Admin → Panth Infotech → Notification Bar → Manage Bars
Global settings live at Stores → Configuration → Panth Extensions → Notification Bar. Per-bar behavior is configured on each bar edit page.
| Section | Option | Default | Description |
|---|---|---|---|
| General | Enable Notification Bar | Yes | Master switch for the module |
| General | Max Visible Bars | 3 | Maximum bars rendered simultaneously per page |
| Display | Default Position | top_fixed | Fallback position for new bars |
| Display | Stack Multiple Bars | Yes | Stack bars vertically — if off, only the highest-priority bar is shown |
| Display | Default Animation | slide_down | slide_down, fade_in, or none |
| Display | Z-Index | 9999 | CSS stacking for the bar container |
- Content — HTML bar message (with optional separate mobile content)
- Position —
top_fixed,top_static,bottom_fixed,bottom_floating - Bar Type —
info,warning,success,promo,urgent,custom - Background — solid color, gradient CSS, or uploaded image
- Text color, font size, height, padding, icon, custom CSS
- CTA — enable/disable, label, URL, open-in-new-tab, button colors
- Countdown — enable, end datetime, label prefix, expired fallback text
- Schedule — active-from and active-to dates
- Targeting — stores, customer groups, page-targeting mode, target URLs / page types / countries / URL params
- Device — show on mobile, show on desktop, mobile-specific content
- Dismissal — dismissible toggle, cookie duration (days;
0= session) - Animation —
slide_down,fade_in, ornone, plus optional auto-close seconds - Sort Order — priority for stacking / single-bar selection
- Go to Panth Infotech → Notification Bar → Manage Bars
- Click Add New Bar
- Enter an admin Name (internal reference) and toggle Is Active
- Pick Bar Type (preset palette) and Position
- Write the Content (HTML allowed) — add a Mobile Content override if desired
- Style the bar — background type (color / gradient / image), text color, font size, height, padding, icon, optional custom CSS
- (Optional) Enable CTA Button and set its label, URL, new-tab flag, and colors
- (Optional) Enable Countdown and set the end datetime, prefix label, and expired-text fallback
- (Optional) Set Active From / Active To dates for automatic scheduling
- Set Targeting — store views, customer groups, page targeting mode (
all/specific/exclude), target URLs, page types, countries, URL params - Set Device visibility — show on mobile, show on desktop
- Set Dismissal — dismissible, cookie duration
- Set Animation, optional Auto Close Seconds, and Sort Order
- Click Save Bar
- Flush cache:
bin/magento cache:flush - Load any storefront page — bars matching the current visitor's audience, schedule, device, URL, and country will render in
after.body.startbefore the header paints.
The four positions determine where a bar renders:
| Position | Behavior | Best For |
|---|---|---|
| top_fixed | Sticky bar pinned to the top of the viewport | Flash sales, urgent announcements |
| top_static | Top of the page, scrolls away with content | Seasonal greetings, generic info |
| bottom_fixed | Sticky bar pinned to the bottom of the viewport | Free shipping threshold, live offers |
| bottom_floating | Floating pill at the bottom, rounded corners | Social proof, newsletter nudge |
Stacking — when Stack Multiple Bars is enabled, all qualifying bars render together in Sort Order ascending (lowest first). The global Max Visible Bars caps the total rendered. When stacking is disabled, only the single highest-priority qualifying bar is shown.
Any bar can show a live countdown timer:
- Enable Countdown
- Set the Countdown End Date (datetime, store timezone)
- Optionally set a Countdown Label (e.g. "Flash sale ends in")
- Optionally set Countdown Expired Text to display once the timer hits zero (e.g. "Sale has ended.")
The counter runs 100% client-side in Alpine (Hyva) or vanilla JS (Luma) — no server polling, no ticker AJAX. When the countdown expires, either the expired text is shown or the bar auto-removes itself if Auto Close Seconds is configured.
- Active From / Active To — bars are server-filtered by date range, so they do not render at all outside the window (no layout shift, no JS flash).
| Field | Accepted Value | Example |
|---|---|---|
| Store IDs | Comma-separated store IDs, 0 = all |
1,2 |
| Customer Groups | Comma-separated customer group IDs | 0,1,3 (guest + general + retailer) |
| Target Countries | Comma-separated ISO country codes | US,CA,GB |
- Page Targeting —
all,specific, orexclude - Target URL Patterns — comma-separated paths, wildcards with
*(e.g./sale/*,/brand/nike*) - Target Page Types —
cms,catalog_category,catalog_product,checkout_cart,checkout_onepage,customer_account, etc. - Target URL Params —
key=valuepairs (e.g.utm_campaign=spring2026)
- Show on Mobile — toggle
- Show on Desktop — toggle
- Mobile Content — optional separate content for small screens
When Is Dismissible is enabled, the bar shows a close (×) button. Once dismissed:
- Dismissal is written to a cookie
- Cookie Duration (days) controls how long the dismissal persists —
0means session-only (cleared when the browser closes) - Dismissed bars are not re-rendered on subsequent pages until the cookie expires or the bar's content changes
For transient bars (flash sale countdown), pair a short cookie duration (e.g. 1 day) with Auto Close Seconds so even undismissed bars hide after a moment.
Preset theme colors for each bar_type live in etc/theme-config.json:
{
"notification-bar-info-bg": "#1E40AF",
"notification-bar-info-text": "#FFFFFF",
"notification-bar-success-bg": "#065F46",
"notification-bar-success-text": "#FFFFFF",
"notification-bar-warning-bg": "#92400E",
"notification-bar-warning-text": "#FFFFFF",
"notification-bar-promo-bg": "#0D9488",
"notification-bar-promo-text": "#FFFFFF",
"notification-bar-urgent-bg": "#DC2626",
"notification-bar-urgent-text": "#FFFFFF"
}Override from your theme's CSS using the standard CSS custom properties:
:root {
--notification-bar-z-index: 9999;
--notification-bar-font-size: 14px;
--notification-bar-padding: 10px 20px;
--notification-bar-transition: 300ms ease-out;
--notification-bar-cta-radius: 4px;
}Per-bar Custom CSS (injected inline) is the quickest escape hatch for one-off designs without touching the theme.
| Issue | Cause | Resolution |
|---|---|---|
| Bar not rendering | Module disabled or global switch off | Verify Stores → Configuration → Panth Extensions → Notification Bar → Enabled = Yes |
| Bar not visible but in admin | Failed audience / schedule / page filter | Re-check store, customer group, country, page targeting, and from/to dates |
| Bar flashes then disappears | Conflicting bar on same position without stacking | Enable Stack Multiple Bars or lower Sort Order of the priority bar |
| Countdown stuck | End date in the past | Update the end datetime and flush cache |
| Dismissed bar never returns | Cookie still active | Lower Cookie Duration or clear cookies |
| Wrong layer order with fixed header | Theme's fixed header has a higher z-index | Increase Z-Index global setting (or per-bar custom CSS) |
| Old template after theme switch | Cached layout/view files | Run bin/magento cache:flush and redeploy static content |
| Bar appears on checkout when not wanted | Page targeting set to all |
Switch to exclude and add /checkout/*, /onestepcheckout/*, etc. |
Enable Debug Mode in Panth Core Settings to get verbose logs in var/log/panth_notification_bar.log.
Yes. Create as many bars as you need. When Stack Multiple Bars is enabled, all qualifying bars render together in priority (sort order) ascending, up to the global Max Visible Bars cap. When stacking is disabled, only the highest-priority qualifying bar is shown.
Yes. Panth Notification Bar ships a native Hyva template using Alpine.js — no jQuery, no RequireJS shim. The module auto-detects Hyva and swaps the template automatically.
Yes. A separate Luma template is included using plain vanilla JS. No jQuery plugins or external libraries are required.
Yes. Use Target Countries with a comma-separated list of ISO codes (e.g. US,CA,GB). Country detection relies on the store's standard geo-resolution (GeoIP / X-Forwarded-Country, depending on your infra).
Yes. Add the UTM parameter to Target URL Params as utm_campaign=spring2026. The bar will render only when that query parameter is present.
Yes. Set Active From and Active To so the bar enters and leaves server-side automatically, enable Countdown with the same end datetime as the sale, and optionally set Auto Close Seconds so the bar fades out on its own after N seconds.
Make the bar Dismissible and set a Cookie Duration (days). Once they click the × button, it stays hidden for the configured window. Set 0 for session-only dismissal.
Yes. Either use Show on Mobile / Show on Desktop toggles to render different bars per device, or set Mobile Content on the same bar for a shorter copy on small screens.
Yes. Bar content supports HTML — combine with Magento's standard __() helper in your theme overrides, or simply create one bar per store view and scope each one via Store IDs.
Yes. The bar block is ifconfig-gated, so when the module is disabled it is not built at all. On render, the bar is painted in after.body.start which avoids layout shift during the header paint. No external JS libraries are loaded.
Yes. mage2kishan/module-core is a required dependency and is installed automatically by Composer. It is free forever and provides the unified admin menu and shared utilities for all Panth extensions.
| Channel | Contact |
|---|---|
| kishansavaliyakb@gmail.com | |
| Website | kishansavaliya.com |
| +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.
Looking for custom Magento module development, Hyva theme customization, store migrations, or performance optimization? Get a free quote in 24 hours:
Specializations:
- 🛒 Magento 2 Module Development — custom extensions following MEQP standards
- 🎨 Hyva Theme Development — Alpine.js + Tailwind CSS, lightning-fast storefronts
- 🖌️ Luma Theme Customization — pixel-perfect designs, responsive layouts
- ⚡ Performance Optimization — Core Web Vitals, page speed, caching strategies
- 🔍 Magento SEO — structured data, hreflang, sitemaps, meta optimization
- 🛍️ Checkout Optimization — one-page checkout, conversion rate optimization
- 🚀 M1 to M2 Migrations — data migration, custom feature porting
- ☁️ Adobe Commerce Cloud — deployment, CI/CD, performance tuning
- 🔌 Third-party Integrations — payment gateways, ERP, CRM, marketing tools
Industries served: Fashion & Apparel, Electronics, Health & Beauty, Food & Beverage, Home & Garden, B2B Wholesale, Multi-vendor Marketplaces.
Panth Notification Bar is distributed under a proprietary license — see LICENSE.txt. One license covers a single Magento installation (production + staging + dev). Contact us for multi-store licensing.
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 specializing in high-quality, security-focused extensions and themes for both Hyva and Luma storefronts. Our extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management — over 34 modules built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.
Browse the full extension catalog on the Adobe Commerce Marketplace or Packagist.
- 🌐 Website: kishansavaliya.com
- 💬 Get a Quote: kishansavaliya.com/get-quote
- 👨💻 Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
- 🏢 Upwork Agency: upwork.com/agencies/1881421506131960778
- 📦 Packagist: packagist.org/packages/mage2kishan/module-notification-bar
- 🐙 GitHub: github.com/mage2sk/module-notification-bar
- 🛒 Adobe Marketplace: commercemarketplace.adobe.com
- 📧 Email: kishansavaliyakb@gmail.com
- 📱 WhatsApp: +91 84012 70422
Ready to upgrade your Magento 2 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 cookie notice bar, magento 2 urgent alert bar, magento 2 holiday banner, hyva notification bar, hyva announcement bar, luma notification bar, luma announcement bar, alpine js bar magento, magento 2.4.8 bar, magento 2.4.7 bar, panth notification bar, panth infotech, magento 2 top strip, magento 2 bottom floating bar, magento 2 geo targeted bar, magento 2 customer group bar, magento 2 utm targeted bar, magento 2 device targeted bar, magento 2 mobile bar, magento 2 cta bar, magento 2 bar scheduling, magento 2 bar dismissible cookie, magento 2 stacked bars, magento 2 promo strip, magento 2 marketing bar, mage2kishan, mage2sk, hire magento developer, top rated plus magento freelancer, kishan savaliya magento, magento 2 hyva development, magento 2 luma customization, magento 2 performance optimization, magento 2 SEO services, M1 to M2 migration, adobe commerce cloud expert