PrestaShop announcement bar: a message at the top of every store page

What is a message bar at the top of the page for?

For one piece of information that changes a customer's decision before they start looking for a product. The customer sees the bar on the home page, in a category, on the product page and in the cart, so they don't have to land on a specific page to find something out.

Typical bar messages:

• the free delivery threshold (“Free delivery on orders over €49”),
• the shipping cut-off (“Orders placed by 14:00 ship the same day”),
• a break in shipping (“Orders from the long weekend ship on Tuesday”),
• the last day to order before the holidays.

The amounts and times in these examples are illustrative. Only put in the bar what's actually set up in the store. When the bar promises free delivery over €49 and the carrier in the cart only gives it from €60, the customer feels cheated at the last step. We describe how to set the threshold itself in our post on free shipping over a set amount.

Three ways to add an announcement bar in PrestaShop

Choose a method based on how often you change the text and which theme you have.

PrestaShop has a spot at the top of the page meant for banners. The developer documentation describes it under the displayBanner hook as “the very top of every page”. Bar modules usually hook in there. You can see which modules sit in that spot in your store under Design → Positions, explained in the guide to module positions.

A template entry goes in a child theme, not the main theme. If you add the bar to the main theme's files, the next theme update will remove it. The PrestaShop documentation on child themes describes how a child theme is built. We explain what happens to changes after an update in our post on how a theme update wiped my changes.

How to add the bar in the template step by step

This route needs access to the theme files. If you don't work with files day to day, do it with someone who does, or with the chat.

1. Check whether the store has a child theme. If not, create one before you change the first file.
2. Make a copy of the theme's header file (in Classic, the page header template).
3. Add one block above the header with the message text and your own class, for example top-info-bar.
4. In the child theme's custom.css file, set the background colour, text colour, a small font size and centring.
5. Add a rule for narrow screens so the text wraps instead of running off the screen.
6. Clear the cache in Advanced Parameters → Performance.
7. Open the store in a private window and on a phone. Check the home page, a category, a product page and the cart.

In a store with several languages, text hard-coded into the template shows in one language to everyone. In that case a module with a field for each language, or text through the theme translations, is more convenient.

What should the bar look like on a phone?

On a phone the bar takes valuable space above the product, so it has to be low. Two lines is the limit. Three lines push the product name and price down the screen.

What to pay attention to:

• Contrast. White text on a light background, such as yellow, is hard to read in sunlight. Choose a dark background with light text, or the other way round.
• Font size. Customers pinch to zoom text that's too small. Small, but no smaller than the rest of the fine print in the store.
• No scrolling text. Moving text is hard to read and tiring on the eyes.
• A close button only with memory. If the bar can be closed, it should stay closed on the following pages. Otherwise the customer closes it again on every page.
• A separate rule for narrow screens. On a phone, reduce the spacing and let the text wrap. You put that rule in a block that only applies below a chosen screen width, described in MDN's guide to media queries.

How to look after the bar once it's added

A bar nobody watches soon starts telling lies. The promotion has ended, the delivery threshold has changed, and the old text is still hanging at the top of the store. Customers read it as a promise.

Three simple rules:

• whenever you change delivery prices or shipping times, check the bar too,
• remove or replace a seasonal message on the day the campaign ends, not a week later,
• when there's no message, don't leave an empty coloured strip; hide the bar completely.

If the bar looks wrong on a phone, we cover the fix separately in our post on the PrestaShop mobile view. You can change the colours of buttons and other elements by following our post on changing a button colour.

How to add an announcement bar with the chat

You write what message you want and how it should look. Your chat (Claude or ChatGPT) checks the theme, works out whether there's a child theme and whether a module with a similar bar is already running in the top spot of the page. Then it shows the change to the files before saving.