PrestaShop aankondigingsbalk: een melding bovenaan elke pagina van je webshop

Waar is een meldingsbalk bovenaan de pagina voor?

Voor één stuk informatie dat de beslissing van een klant verandert voordat hij een product gaat zoeken. De klant ziet de balk op de homepage, in een categorie, op de productpagina en in de winkelwagen, dus hij hoeft niet op een bepaalde pagina te belanden om iets te weten te komen.

Typische meldingen in de balk:

• de drempel voor gratis verzending (“Gratis verzending vanaf € 49”),
• het tijdstip voor verzending (“Voor 14:00 besteld, vandaag verzonden”),
• een pauze in de verzending (“Bestellingen van het lange weekend versturen we op dinsdag”),
• de laatste dag om te bestellen voor de feestdagen.

De bedragen en tijden in deze voorbeelden zijn ter illustratie. Zet in de balk alleen wat echt in de webshop is ingesteld. Belooft de balk gratis verzending vanaf € 49 en geeft de vervoerder in de winkelwagen die pas vanaf € 60, dan voelt de klant zich bij de laatste stap bedrogen. Hoe je de drempel zelf instelt, beschrijven we in ons bericht over gratis verzending vanaf een bedrag.

Drie manieren om een aankondigingsbalk toe te voegen in PrestaShop

Kies een methode op basis van hoe vaak je de tekst wijzigt en welk thema je hebt.

PrestaShop heeft bovenaan de pagina een plek die voor banners is bedoeld. De ontwikkelaarsdocumentatie beschrijft die bij de hook displayBanner als “helemaal bovenaan elke pagina”. Balkmodules haken daar meestal in. Welke modules in je webshop op die plek zitten, zie je bij Uiterlijk → Posities, uitgelegd in de handleiding over moduleposities.

Een toevoeging aan een sjabloon hoort in een child theme, niet in het hoofdthema. Voeg je de balk toe aan de bestanden van het hoofdthema, dan haalt de volgende thema-update hem weg. De PrestaShop-documentatie over child themes beschrijft hoe een child theme is opgebouwd. Wat er na een update met wijzigingen gebeurt, leggen we uit in ons bericht over hoe een thema-update mijn wijzigingen wiste.

Hoe voeg je de balk stap voor stap toe in het sjabloon?

Voor deze route heb je toegang tot de themabestanden nodig. Werk je niet dagelijks met bestanden, doe het dan met iemand die dat wel doet, of met de chat.

1. Controleer of de webshop een child theme heeft. Zo niet, maak er een aan voordat je het eerste bestand wijzigt.
2. Maak een kopie van het headerbestand van het thema (in Classic het sjabloon van de paginaheader).
3. Voeg boven de header één blok toe met de tekst van de melding en een eigen class, bijvoorbeeld top-info-bar.
4. Stel in het bestand custom.css van het child theme de achtergrondkleur, tekstkleur, een kleine lettergrootte en centrering in.
5. Voeg een regel toe voor smalle schermen, zodat de tekst afbreekt in plaats van van het scherm af te lopen.
6. Leeg de cache in Geavanceerde parameters → Prestaties.
7. Open de webshop in een privévenster en op een telefoon. Controleer de homepage, een categorie, een productpagina en de winkelwagen.

In een webshop met meerdere talen toont tekst die vast in het sjabloon staat bij iedereen in één taal. Dan is een module met een veld per taal handiger, of tekst via de themavertalingen.

Hoe moet de balk eruitzien op een telefoon?

Op een telefoon neemt de balk waardevolle ruimte boven het product in, dus hij moet laag zijn. Twee regels is de grens. Drie regels duwen de productnaam en prijs naar beneden.

Waar je op let:

• Contrast. Witte tekst op een lichte achtergrond, zoals geel, is in zonlicht slecht leesbaar. Kies een donkere achtergrond met lichte tekst, of andersom.
• Lettergrootte. Te kleine tekst zoomen klanten in met twee vingers. Klein, maar niet kleiner dan de rest van de kleine lettertjes in de webshop.
• Geen lopende tekst. Bewegende tekst is slecht leesbaar en vermoeiend voor de ogen.
• Alleen een sluitknop met geheugen. Kan de balk worden gesloten, dan moet hij op de volgende pagina’s gesloten blijven. Anders sluit de klant hem op elke pagina opnieuw.
• Een aparte regel voor smalle schermen. Verklein op een telefoon de ruimte eromheen en laat de tekst afbreken. Die regel zet je in een blok dat alleen onder een gekozen schermbreedte geldt, beschreven in de MDN-handleiding over media queries.

Hoe onderhoud je de balk als hij er eenmaal staat?

Een balk waar niemand naar kijkt, gaat al snel onwaarheden vertellen. De actie is voorbij, de verzenddrempel is veranderd, en de oude tekst hangt nog bovenaan de webshop. Klanten lezen het als een belofte.

Drie eenvoudige regels:

• controleer bij elke wijziging van verzendprijzen of verzendtijden ook de balk,
• haal een seizoensmelding weg of vervang hem op de dag dat de campagne eindigt, niet een week later,
• is er geen melding, laat dan geen lege gekleurde strook staan; verberg de balk helemaal.

Ziet de balk er op een telefoon verkeerd uit, dan bespreken we de oplossing apart in ons bericht over de mobiele weergave van PrestaShop. De kleuren van knoppen en andere elementen wijzig je met ons bericht over een knopkleur wijzigen.

Hoe voeg je een aankondigingsbalk toe met de chat?

Je schrijft welke melding je wilt en hoe die eruit moet zien. Je chat (Claude of ChatGPT) controleert het thema, zoekt uit of er een child theme is en of er al een module met een vergelijkbare balk bovenaan de pagina draait. Daarna toont hij de wijziging in de bestanden voor het opslaan.