Notification Bar for Magento 2

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.

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

Unlimited Bars with Stacking

• 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, custom with preset theme colors

Positioning

• 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

Rich Content & Styling

• 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)

CTA Buttons

• 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

Live Countdown Timers

• End-date countdown — renders a live days : hours : minutes : seconds counter
• 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

Targeting (Who Sees What)

• 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=xyz or any key=value is present
• Device targeting — show/hide on mobile or desktop independently
• Separate mobile content — shorter copy for small screens when needed

Scheduling

• 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, or none

Dismissal & Cookie Memory

• 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 + Luma Dual Support

• 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.start so the bar is painted before the header flicker

Performance & Quality

• 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.

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 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

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract the contents to app/code/Panth/NotificationBar/ in your Magento installation
3. Ensure Panth_Core is also installed (required dependency)
4. Run the same commands as above starting from bin/magento module:enable

Verify Installation

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

After 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.

Global Settings

Per-Bar Options (Summary)

• 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, or none, plus optional auto-close seconds
• Sort Order — priority for stacking / single-bar selection

1. Add a Bar

1. Go to Panth Infotech → Notification Bar → Manage Bars
2. Click Add New Bar
3. Enter an admin Name (internal reference) and toggle Is Active
4. Pick Bar Type (preset palette) and Position
5. Write the Content (HTML allowed) — add a Mobile Content override if desired
6. Style the bar — background type (color / gradient / image), text color, font size, height, padding, icon, optional custom CSS
7. (Optional) Enable CTA Button and set its label, URL, new-tab flag, and colors
8. (Optional) Enable Countdown and set the end datetime, prefix label, and expired-text fallback
9. (Optional) Set Active From / Active To dates for automatic scheduling
10. Set Targeting — store views, customer groups, page targeting mode (all / specific / exclude), target URLs, page types, countries, URL params
11. Set Device visibility — show on mobile, show on desktop
12. Set Dismissal — dismissible, cookie duration
13. Set Animation, optional Auto Close Seconds, and Sort Order
14. Click Save Bar

2. Preview

• 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.start before the header paints.

The four positions determine where a bar renders:

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:

1. Enable Countdown
2. Set the Countdown End Date (datetime, store timezone)
3. Optionally set a Countdown Label (e.g. "Flash sale ends in")
4. 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.

Schedule

• 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).

Audience

Page Rules

• Page Targeting — all, specific, or exclude
• 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=value pairs (e.g. utm_campaign=spring2026)

Device

• 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 — 0 means 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.

Enable Debug Mode in Panth Core Settings to get verbose logs in var/log/panth_notification_bar.log.

Can I run multiple bars at the same time?

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.

Does it work with Hyva Theme?

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.

Does it work with the default Luma theme?

Yes. A separate Luma template is included using plain vanilla JS. No jQuery plugins or external libraries are required.

Can I show a bar only to visitors from a specific country?

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).

Can I target a bar to a specific UTM campaign?

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

Can I schedule a flash sale bar that self-destructs?

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.

How do I stop a user from seeing the same bar forever?

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.

Can I show different content on mobile vs. desktop?

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.

Can I translate the bar content?

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.

Is it SEO / Core Web Vitals friendly?

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.

Do I need Panth Core?

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.

Response time: 1-2 business days.

Need Custom Magento Development?

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.

Quick Links

• 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