README

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.

🚀 Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours — custom modules, Hyva themes, performance optimization, M1→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

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

Key Features

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

Why Panth Notification Bar

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.

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

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 ZIP from Packagist or the Adobe Commerce Marketplace
Extract the contents to app/code/Panth/NotificationBar/ in your Magento installation
Ensure Panth_Core is also installed (required dependency)
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

Configuration

Global settings live at Stores → Configuration → Panth Extensions → Notification Bar. Per-bar behavior is configured on each bar edit page.

Global Settings

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

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

Creating Notification Bars

1. Add a Bar

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

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.

Positions, Stacking & Priority

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.

Countdown Timers

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.

Targeting & Scheduling

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

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

Dismissal & Cookie Memory

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.

CSS Theming

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.

Troubleshooting

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.

FAQ

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.

Support

Channel	Contact
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 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.

License

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.

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

mage2kishan / module-notification-bar

Maintainers

Package info

Statistics

Security

README

Panth Notification Bar for Magento 2 — Promo Bars, Countdown Timers & Announcements (Hyva + Luma) | Panth Infotech

🚀 Need Custom Magento 2 Development?

🏆 Kishan Savaliya

🏢 Panth Infotech Agency

Table of Contents

Key Features

Unlimited Bars with Stacking

Positioning

Rich Content & Styling

CTA Buttons

Live Countdown Timers

Targeting (Who Sees What)

Scheduling

Dismissal & Cookie Memory

Hyva + Luma Dual Support

Performance & Quality

Why Panth Notification Bar

Compatibility

Installation

Composer Installation (Recommended)

Manual Installation via ZIP

Verify Installation

Configuration

Global Settings

Per-Bar Options (Summary)

Creating Notification Bars

1. Add a Bar

2. Preview

Positions, Stacking & Priority

Countdown Timers

Targeting & Scheduling

Schedule

Audience

Page Rules

Device

Dismissal & Cookie Memory

CSS Theming

Troubleshooting

FAQ

Can I run multiple bars at the same time?

Does it work with Hyva Theme?

Does it work with the default Luma theme?

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

Can I target a bar to a specific UTM campaign?

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

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

Can I show different content on mobile vs. desktop?

Can I translate the bar content?

Is it SEO / Core Web Vitals friendly?

Do I need Panth Core?

Support

💼 Need Custom Magento Development?

License

About Panth Infotech

Quick Links