Categorie Banners
🧩 Categorie Banners toont een afbeeldingsbanner bovenaan categoriepagina's in Lightspeed, inclusief een titel, beschrijvende tekst en een "Lees meer" knop.
De banner wordt automatisch boven de productenlijst geplaatst en verbergt de standaard paginatitel van het thema, zodat er geen dubbele koppen zichtbaar zijn.
⚙️ Algemene werking
De add-on haalt de bannerinhoud op uit de categorie-omschrijving in Lightspeed. Er zijn geen aanpassingen aan het thema vereist.
Ondersteund:
Afbeeldingsbanner met overlay
Titel, beschrijvende tekst en "Lees meer" knop
Automatische verwijdering van de thema-paginatitel
Compatibiliteit met Perfect Filter (via MutationObserver)
Aparte instellingen voor desktop en mobiel
⚙️ Positie-instellingen
📍 CSS selector voor banner positie
Geef hier de CSS selector op van het element waar de banner boven geplaatst moet worden.
Voorbeeld: .products
Laat leeg om de automatische detectie te gebruiken.
🔗 CSS selector voor scroll doel
Geef hier de CSS selector op van het element waar de pagina naartoe scrollt wanneer de bezoeker op "Lees meer" klikt.
Voorbeeld: .collection-content
Laat leeg om de ankerpositie (direct onder de banner) te gebruiken.
📐 Afmeting-instellingen
↕️ Hoogte banner desktop
Stel de hoogte van de banner in voor desktop.
Standaard: 400px
↕️ Hoogte banner mobiel
Stel de hoogte van de banner in voor mobiele apparaten.
Standaard: 200px
⬇️ Witruimte onder de banner (desktop)
Bepaal de marge tussen de banner en de productenlijst op desktop.
Standaard: 15px
⬇️ Witruimte onder de banner (mobiel)
Bepaal de marge tussen de banner en de productenlijst op mobiele apparaten.
Standaard: 15px
🔤 Tekst-instellingen
📝 "Lees meer" knoptekst
Stel hier de tekst in die op de "Lees meer" knop wordt weergegeven.
De tekst is per taal instelbaar.
Voorbeeld:
🇳🇱 Lees meer
🇬🇧 Read more
🇩🇪 Mehr lesen
🎨 Design-instellingen
🖼️ Overlay kleur
Kies een achtergrondkleur voor de overlay die over de bannerafbeelding wordt gelegd.
Dit verbetert de leesbaarheid van de tekst op de afbeelding.
👻 Doorzichtigheid overlay (desktop)
Bepaal hoe sterk de overlay zichtbaar is op desktop:
0 = volledig transparant (geen overlay)
100 = volledig dekkend
👻 Doorzichtigheid overlay (mobiel)
Zelfde instelling als hierboven, maar specifiek voor mobiele apparaten.
🎨 Tekstkleur op overlay (desktop)
Kies de kleur van de titel en tekst wanneer de banner een overlay heeft op desktop.
🎨 Tekstkleur op overlay (mobiel)
Kies de kleur van de titel en tekst wanneer de banner een overlay heeft op mobiele apparaten.
📏 Scroll-offset
⬆️ Scroll-offset (desktop)
Wanneer een bezoeker op "Lees meer" klikt, scrollt de pagina naar het opgegeven doel. Met deze instelling kun je de scrollpositie iets omhoog bijstellen, zodat er voldoende ruimte boven de content zichtbaar blijft.
Voorbeeld: stel 80 in om 80px minder ver te scrollen dan het doelement.
⬆️ Scroll-offset (mobiel)
Zelfde instelling als hierboven, maar specifiek voor mobiele apparaten.
💡 Tips
De bannerafbeelding en tekst worden ingesteld via de categorie-omschrijving in het Lightspeed-dashboard.
Werkt de banner niet goed samen met Perfect Filter? Dit is normaal gedrag — de add-on lost dit automatisch op via een ingebouwde MutationObserver die wacht tot de filter zijn content heeft geladen.
Gebruik de scroll-offset om te voorkomen dat de pagina te ver scrollt wanneer de bezoeker op "Lees meer" klikt, bijvoorbeeld door de hoogte van een sticky header mee te rekenen.