Promo Bar
Announce a sale, free shipping or news in a slim bar above the header.
Check it fits your store
Questions about compatibility? Contact us.
Details
Magento Promo Bar adds a slim announcement bar above your store's header. Use this Magento 2 extension to announce a sale, share free shipping information or display store news with an optional link.
Configure Magento Promo Bar for each storefront
Manage the bar in Stores › Configuration › Techimprovement › Promo Bar. You can set:
- Message: Enter the announcement shoppers will see.
- Optional link: Add a link after the message using a store path, such as sale, or a full URL.
- Colors: Choose background and text colors with color pickers.
- Homepage Only: Limit the bar to the CMS home page.
- Dismissible: Add a close button so shoppers can hide the bar.
Set every option per website and per store view, including messages in each store view's language. Saving settings automatically cleans the block and full page caches.
Display, dismissal and keyboard access
The bar sits above the header and scrolls away with the page. A sticky header does not pin it to the screen.
When a shopper closes the bar, their browser remembers the choice across pages until you change the message. The updated message makes the bar appear again for everyone. A dismissed bar stays hidden before the page is drawn, preventing a layout jump.
The Skip to Content link remains the first element keyboard users reach. The bar is a labeled region, and the close button has an accessible name.
Compatibility and technical details
- Platform: Magento Open Source or Adobe Commerce 2.4.7–2.4.9; PHP 8.2–8.5.
- Luma and Luma-based themes: Styles load with the theme's stylesheet, and the close button uses RequireJS.
- Hyvä themes: Supports Hyvä Theme 1.3 or later with Hyva/default or a child theme. The bar loads its own small stylesheet only on pages that show it, and the close button works without RequireJS. No Tailwind build is needed.
Adjust text size and content width through CSS custom properties. The extension is full page cache safe and CSP friendly: it delivers colors as CSS custom properties without inline style attributes.
Uninstalling with --remove-data removes the saved settings.
Edition options and included download
Choose the Community, Enterprise or Magento Cloud edition. This digital product includes the Promo Bar — Version 1.1.0 download.
Change Log
Version 1.1.0 – October 30, 2026
New
- Hyvä theme support (Hyvä Theme 1.3+, Hyva/default or a child theme, no Tailwind rebuild): on Hyvä store views view/frontend/layout/hyva_default.xml swaps in the template hyva/promo-bar.phtml, which links the plain stylesheet view/frontend/web/css/promo-bar-hyva.css right before the bar (only when the bar renders) and loads the close-button script as a deferred plain script. Every setting works as on Luma: text, link, colours, homepage only and the dismissal remembered in the browser, hidden before first paint (no layout shift).
- CSS custom properties --ti-promo-font-size and --ti-promo-max-width for restyling on Hyvä.
- ViewModel\PromoBar::getDismissConfig(), the options of the close-button script for both themes.
Improved
- js/dismiss.js is dependency-free UMD: an AMD module for RequireJS (Luma, unchanged), or a plain script that starts every [data-ti-promo-bar] element (Hyvä).
Earlier versions (1)
Version 1.0.0 – October 21, 2026
New
- Admin section Stores › Configuration › Techimprovement › Promo Bar (enable, text, link text, link URL, background colour, text colour, homepage only, dismissible) with defaults, scope support and *Use system value*.
- Hex colour fields with a native colour picker synced through a CSP-safe inline script.
- Block ti.promo.bar in global.notices (before the header, after the moved "Skip to Content" link), template Techimprovement_PromoBar::promo-bar.phtml, ViewModel\PromoBar.
- Colours delivered as --ti-promo-bg / --ti-promo-text through (no inline style attribute, CSP safe).
- Optional close button: Techimprovement_PromoBar/js/dismiss remembers the dismissed message in localStorage (ti-promo-dismissed, SHA-1 of the text); pages stay full-page-cache safe.
- LESS .ti-promo-bar (13 px on phones, link may wrap) with theme-token fallbacks for plain Luma.
- Automatic block_html / full_page cache cleaning when the section is saved; Setup\Uninstall.
- Unit tests for Model\Config and ViewModel\PromoBar.
Compatibility
- Magento Open Source / Adobe Commerce 2.4.7 – 2.4.9 (verified on 2.4.9), PHP 8.2 – 8.5.
Reviews
Be the first to review Promo Bar
Reviews are written by customers with an account. Sign in to tell others how it works on your store.
