PrestaShop banner wijzigen op de homepage: de slider, een seizoensbanner en terug naar de oude
Hoe je een banner in PrestaShop wijzigt, hangt af van waar de banner vandaan komt. In het thema Classic is de slider op de homepage de module Afbeeldingslider (ps_imageslider), waarin je de afbeelding, titel en link van een slide vervangt. Een losse banner is een aparte module. In gekochte thema’s kan de banner in een template staan of in de paginabouwer van de themamaker.
Auteur: Het TellMyShop-team. Een gids voor eigenaren van PrestaShop-winkels: de oorzaak, de oplossing met de hand en hetzelfde werk in een gesprek met de chat.
Laatst bijgewerkt: · 5 min lezen
Waar komt de banner op de homepage vandaan?
Uit een module of uit het thematemplate, en dat bepaalt waar je hem wijzigt. Kijk voordat je gaat zoeken in Uiterlijk → Posities. Onder de hook van de homepage (displayHome) zie je de modules die hem opbouwen.
| Bron van de banner | Hoe je het herkent | Waar je het wijzigt |
|---|---|---|
| Module Afbeeldingslider | meerdere slides die wisselen | Modules → Modulebeheer → Afbeeldingslider → Configureren |
| Module Banner | één afbeelding tussen secties van de pagina | Modules → Modulebeheer → Banner → Configureren |
| Thematemplate | een banner zonder instellingen in de backoffice | het templatebestand van de homepage in het thema |
| Paginabouwer van het thema | een editor met slepen en neerzetten | de module van de themamaker |
Webwinkeliers vragen al jaren naar het wijzigen van de banner op het PrestaShop-forum (in het Pools). Het antwoord begint bijna altijd met een vraag over het thema. De code van de slider in het thema Classic vind je in de repository van de module ps_imageslider.
Zo vervang je stap voor stap een slide in de slider
In de slidermodule doe je dit zonder bestanden aan te raken.
- Ga naar Modules → Modulebeheer en zoek op “slider”.
- Klik naast de module Afbeeldingslider op Configureren.
- Voeg een nieuwe slide toe of bewerk een bestaande.
- Upload een afbeelding met dezelfde afmetingen als de huidige slides.
- Vul de titel, de doel-URL en het bijschrift in. Het bijschrift komt ook in de alt tekst van de afbeelding.
- Herhaal dit voor elke taal van de webshop.
- Zet de slide op ingeschakeld en sleep hem bovenaan de lijst.
- Schakel de oude slide uit in plaats van hem te verwijderen.
Open tot slot de homepage in een privévenster. Is er niets veranderd, lees dan waarom wijzigingen niet zichtbaar zijn in PrestaShop.
Zo plan je een seizoensbanner
Maak hem samen met de actie klaar, niet op de dag van de lancering. Woensdag, 20:15, morgen begint de herfstuitverkoop. De afbeelding is klaar, maar de slider heeft drie talen, en elke slide heeft een eigen afbeelding en link nodig. Onderweg blijkt dat de slidetitel een paginakop is en dat de afbeeldingen geen alt tekst hebben.
Een paar regels helpen:
- De banner leidt naar één specifieke categorie of actiepagina, niet naar de homepage.
- Elke taal heeft een eigen afbeelding en een eigen alt tekst.
- De alt tekst zegt wat er op de banner staat, niet “banner1”. Google beschrijft de regels voor alt tekst in zijn handleiding over afbeeldingen.
- De oude banner wordt uitgeschakeld, niet verwijderd.
- Je noteert in de actiekalender de datum waarop de banner uit moet.
Een slider of één banner voor een actie?
Voor een actie is één slide met één boodschap meestal genoeg. Een slider wisselt meerdere afbeeldingen af, en niet elke klant wacht op de derde. Is de uitverkoop deze week het belangrijkste, zet hem dan op de eerste slide, of maak er de enige slide van.
| Situatie | Betere keuze | Waarom |
|---|---|---|
| Eén actie, een korte deadline | één slide of een banner | één boodschap, één link |
| Meerdere even belangrijke categorieën | een slider met 2 of 3 slides | elke categorie krijgt een plek |
| Informatie over levering of een deadline | een tekstbalk boven de banner | ook leesbaar op een telefoon |
Controleer de banner ook op een telefoon. Tekst die in de afbeelding zit, is op een klein scherm vaak onleesbaar. Een kort bijschrift en een grote knop in de afbeelding werken beter dan een lange zin. Als het thema het toelaat, maak dan een aparte versie van de afbeelding voor telefoons.
Wat als de slider in het template moet worden gewijzigd?
Wijzig de kopie van het template in het thema, niet het bestand van de module. PrestaShop laat je het template van een module naar het thema kopiëren en gebruikt dan die kopie. Een update van de module overschrijft hem niet. Dit staat in de documentatie over het overschrijven van modules.
Zo verbeter je bijvoorbeeld slidetitels die het thema als paginakoppen toont. De homepage hoort één hoofdkop te hebben, en slidetitels kunnen gewone tekst zijn.
Zo wijzig je de banner met de chat
Je beschrijft de actie, en je chat (Claude of ChatGPT) zoekt uit waar de banner vandaan komt en stelt een wijziging voor met een voorbeeld.
Jij: Voor de herfstuitverkoop wil ik een banner die naar de categorie Lantaarns linkt. De afbeelding herfst.jpg is al geüpload. Voeg alt tekst toe in het Nederlands en het Frans.
Je chat: De banner op de homepage komt uit het thematemplate, niet uit een module. Ik stel een wijziging in het bestand voor, met een back-up:
Na het opslaan leeg ik de cache en controleer ik de homepage. Na de actie kun je de oude banner uit de back-up terugzetten.
Status van de kaart: wacht op jouw “ja”oude versie: <img src="zomer.jpg" alt="banner1">
nieuwe versie: <img src="herfst.jpg" alt="Herfstuitverkoop lantaarns">
oude versie: link: /zomeraanbiedingen
nieuwe versie: link: /lantaarns
Een nieuwe seizoensbanner is één verzoek en één voorbeeld. Elk bestand krijgt voor het opslaan een back-up. Na de actie zet je de vorige versie uit de back-up terug, ook met een voorbeeld.
Wijzigingen in het uiterlijk werken in TellMyShop Pro, zodra je de schakelaar Thema aanzet. De schakelaar werkt 24 uur en vereist een databaseback-up van dezelfde dag. Afbeeldingen upload je zelf, en de inhoud van slides wijzig je in de configuratie van de slidermodule. In de gratis TellMyShop Free controleert de chat de koppen op de homepage en wijst hij de modules aan die hem opbouwen.
De twee meest voorkomende taken staan in de use cases een seizoensbanner op de homepage en koppen en alt tekst van afbeeldingen in de slider. Verander je samen met de banner ook de volgorde van secties, lees dan over de indeling van de homepage.
Vragen en antwoorden
Hoe groot moet een slider-afbeelding zijn?
Even groot als de huidige slides in je thema. Elk thema heeft een andere breedte van de homepage, en de slider rekt afbeeldingen met andere verhoudingen uit of snijdt ze bij. Kijk naar de afmetingen van de huidige slide-afbeelding en maak de nieuwe op hetzelfde formaat. Sla hem op als JPG of WebP, zodat de pagina snel laadt.
Waarom verschijnt de nieuwe banner niet op de pagina?
Meestal door de cache of een uitgeschakelde slide. Controleer of de slide is ingeschakeld en een afbeelding heeft in de taal die je bekijkt. Leeg daarna de cache in Geavanceerde parameters → Prestaties en ververs de pagina in een privévenster. In een webshop met meerdere talen heeft elke taal een eigen afbeelding.
Telt de sliderbanner mee voor Google?
Ja, al is het maar een beetje. De alt tekst van een afbeelding helpt Google en schermlezers te begrijpen wat erop staat. Iets anders is vaak belangrijker. In sommige thema’s zijn de titels van slides paginakoppen, waardoor de homepage er meerdere heeft. Dat is de moeite waard om te controleren en in het slidertemplate te verbeteren.
Hoe ga ik na een actie terug naar de oude banner?
Het eenvoudigst is de oude slide niet te verwijderen, maar hem tijdens de actie uit te schakelen. Na de actie schakel je de oude in en de seizoensslide uit. Heeft de chat de banner in een template gewijzigd, dan staat de vorige versie van het bestand in een back-up, en die zet je met één opdracht terug, met een voorbeeld van de verschillen.
Uploadt de chat de bannerafbeelding?
Nee. De afbeelding upload je zelf, in de configuratie van de slidermodule of in bestandsbeheer. De chat wijzigt een banner die in het thematemplate staat, links, de alt tekst van afbeeldingen en het uiterlijk van de slider via een kopie van het template in het thema. Dat werkt in TellMyShop Pro met de schakelaar Thema aan.
PrestaShop is een geregistreerd handelsmerk van PrestaShop SA. Claude is een handelsmerk van Anthropic PBC. ChatGPT en OpenAI zijn handelsmerken van OpenAI. TellMyShop is niet gelieerd aan deze bedrijven.