PS PrestaShop Beginner

Announcement Bar & Countdown (dfannouncebar)

Install and configure the announcement bar: message rotation, {countdown} timer, language/country/group targeting and scheduling.

Updated Module version 1.0.0

Overview

The dfannouncebar module adds a smart announcement bar to your PrestaShop 8 or 9 store: several messages rotating in the same bar, a live countdown, targeting by language, country and customer group, date scheduling and a cookie-remembered close button. Three placements are available: top of page, sticky top and sticky bottom.

Installation

  1. In the back office, open Modules → Module Manager → Upload a module.
  2. Upload the dfannouncebar.zip file and click Install.
  3. Click Configure to open the module page.

At install time the module creates an inactive sample bar with a multilingual message (HELLO10 code and a countdown set 7 days ahead): enable it to see the rendering immediately, then adapt or delete it.

No dependencies: no Composer, no jQuery. The module’s front JS and CSS are only loaded when at least one bar is active.

General configuration

The configuration page holds one global setting: the display hook for the “top of page” placement.

  • displayBanner (default): the standard position above the header on the Classic theme.
  • displayTop: fallback if your theme does not declare displayBanner.

An internal guard prevents any duplicate rendering if your theme runs both hooks. The fixed placements (sticky top and sticky bottom) do not depend on this setting.

Creating a bar

From the configuration page, click Manage bars. Each bar has:

  • Placement: top of page, sticky top (follows the scroll) or sticky bottom. The module automatically compensates the page padding for fixed positions.
  • Priority: if several bars target the same placement, only the one with the lowest priority value is displayed.
  • Colors: background and text, applied through CSS variables.
  • Rotation: interval in seconds between two messages. Rotation pauses on hover.
  • Dismissal: optional close button; the cookie lifetime (in hours) defines when the bar shows up again.
  • Scheduling: start and end dates in YYYY-MM-DD format, auto-completed to 00:00:00 and 23:59:59.
  • Shop: in multistore setups, a bar can be global or restricted to one shop.

Messages and countdown

From the bar list, the Messages action opens the bar’s messages. Every message is multilingual and includes:

  • Text: the displayed content. Insert the {countdown} placeholder where the timer should appear.
  • Deadline: the countdown target, rendered as Xd HH:MM:SS and updated every second (the day label is translatable).
  • Hide when expired: the message automatically disappears at the deadline, both in the browser and on the server (no dead HTML is ever served).
  • Call to action: optional label and URL, rendered as a pill button.
  • Order: the message’s position in the rotation.

Example: “Summer sale: 20% off with code HELLO10 — ends in {countdown}”. If all messages of a bar expire, the bar removes itself.

Targeting

Each bar can be restricted by:

  • Languages: the bar only shows for the selected languages.
  • Countries: based on the PrestaShop context country; accuracy improves when IP geolocation is enabled under International → Localization.
  • Customer groups: visitors, guests, customers or any custom group (VIP, B2B…).

An empty field means “everyone”. The three criteria combine.

Troubleshooting

  • The bar does not show at the top of the page: your theme probably does not declare displayBanner; switch the display hook to displayTop in the configuration.
  • The bar does not show at all: check that it is active, that the schedule covers today’s date, that the targeting matches your test profile, and that no lower-priority bar occupies the same placement. Also think of the dismissal cookie: open a private browsing window.
  • The countdown does not appear: make sure the message contains {countdown} and that a future deadline is set.
  • Two bars appear at the top: the display hook may have been changed while a page cache was serving the old version; clear the PrestaShop cache.
Was this page helpful?

Still stuck? Contact support