Een mooie afbeelding trekt direct de aandacht van je bezoekers. In deze stap-voor-stap handleiding leggen we uit hoe je afbeeldingen toevoegt of vervangt binnen twee veelgebruikte visuele elementen in de Webshop Studio: de Hero Slider (een slideshow met wisselende beelden) en de Hero Banner (een grote sfeerimpressie met een achtergrondafbeelding).
De algemene logica van de Webshop Studio
Voordat we inzoomen op de elementen, is het handig om de vaste indeling van de Webshop Studio te begrijpen:
Links (Algemeen Menu): Hier zie je de lijst met alle actieve elementen op de pagina. Je klikt hier op het element dat je wilt aanpassen.
Rechts (Instellingenvenster): Zodra je links op een element klikt, verschijnen rechts alle specifieke instellingen en opties voor dat gekozen element.
Deel 1: Afbeeldingen beheren in de Hero Slider (Slideshow)
De Hero Slider is uitermate geschikt om meerdere wisselende slides (slideshow) achter elkaar te tonen.
Stap 1: Selecteer de Hero Slider
Klik in het linkermenu van de Webshop Studio op het element Hero Slider of klik op het zwart blok met de tekst ‘+blok’ en voeg een Hero slider blok toe aan je pagina.
Als er nog geen slides zijn aangemaakt, zie je de melding "Nog geen slides en nog geen foto's".
Stap 2: Algemene instellingen & Stijl bepalen
Voordat je afbeeldingen uploadt, kun je de weergave van de slider instellen in het rechtermenu:
Uitlijning: Kies bijvoorbeeld tussen Center (gecentreerd) of Left Anchored (links uitgelijnd).
Breedte: Kies voor Gecentreerd (het element neemt niet de volledige breedte in) of Volledige breedte.
Wisseltijd: Bepaal na hoeveel seconden de slides moeten wisselen (bijvoorbeeld elke 5 seconden).
Hoogte van de afbeelding: Stel de gewenste hoogte in op Compact, Gemiddeld of Hoog.
Minimale hoogte: Pas de witruimte aan tussen de Hero Slider en het element dat erboven staat.
Donkere waas (Overlay) toevoegen: Heb je een hele lichte afbeelding waardoor je witte teksten slecht leesbaar zijn? Schakel dan de Overlay in. Dit legt een transparante, zwarte beschermlaag over je afbeelding. Je kunt de sterkte van deze donkere waas instellen tot maximaal 80%.
Kleuren: Kies de kleur van de kop, tekst en knoppen. Je kunt de vooraf ingestelde branding-kleuren uit je backoffice gebruiken of handmatig een specifieke hexcode invoeren.
Stap 3: Afbeelding uploaden en selecteren
Scroll in het instellingenmenu naar beneden naar de sectie om een slide of slideshow toe te voegen.
Klik op de knop Afbeelding kiezen.
Het Media Beheer van je webshop opent.
Klik op Bestanden uploaden en selecteer de gewenste afbeelding vanaf je computer.
Zodra de afbeelding is geüpload, klik je erop om deze te selecteren. Er verschijnt een geel vinkje op de afbeelding.
Klik op de bevestigingsknop om de afbeelding definitief aan de slide toe te voegen.
Stap 4: Teksten en Knoppen toevoegen
Een slide is pas compleet met een heldere boodschap:
Vul de tekstvelden in:
Bovenschrift: Een kleine regel tekst boven de hoofdkop.
Kop: De opvallende hoofdtitel.
Bijschrift: Een extra toelichtende subregel onder de kop.
Knop (Call-to-Action): Vul de gewenste Knoptekst in (bijvoorbeeld "Shop nu") en koppel hier een Knop URL aan (bijvoorbeeld /shop/kleding of de volledige URL) om bezoekers direct naar de juiste pagina te sturen.
Stap 5: Opslaan en Publiceren
Let op: Dit is de meest gemaakte fout!
Scroll omlaag en klik op de Opslaan-knop die direct ónder de slideshow-instellingen staat. Gebruik dus niet direct de algemene opslaan-knop helemaal rechtsonder in de hoek van je scherm (tenzij er geen specifieke knop onder de slideshow staat).
Klik daarna pas op Publiceren om de afbeelding en teksten live op je webshop te tonen.
Deel 2: Afbeelding vervangen in de Hero Banner
Een Hero Banner is een statisch element met één vaste achtergrondafbeelding (geen wisselende slideshow). De stappen om de afbeelding te vervangen zijn grotendeels gelijk.
Stap 1: Selecteer de Hero Banner
Klik in het linkermenu van de Webshop Studio op het element Hero Banner of voeg het element toe door op de knop +blok links onderin je scherm te klikken.
Stap 2: Teksten en Knoppen configureren
Vul aan de rechterkant de gewenste teksten in:
Bovenregel: Tekst die boven de hoofdtitel verschijnt.
Kop: De hoofdtitel van je banner.
Subregel: De ondersteunende tekst.
Voeg een knop toe door de Tekstknop (bijv. "Bekijk collectie") en de bijbehorende Knop URL in te vullen.
Stap 3: Achtergrondafbeelding kiezen
Zoek rechts naar de optie Achtergrondafbeelding.
Klik op Afbeelding kiezen.
Upload een nieuwe afbeelding via de Media Beheer of selecteer een reeds geüploade afbeelding uit de lijst.
Bevestig je keuze om de achtergrondafbeelding toe te passen.
Optioneel: Onder het kopje Stijl kun je de specifieke kleuren voor de knop, de knopachtergrond en de knoptekst nauwkeurig afstemmen op je afbeelding.
Stap 4: Opslaan en Publiceren
Net als bij de Hero Slider is het correct opslaan hier essentieel om te voorkomen dat je wijzigingen verliest:
Scroll in het rechtermenu helemaal naar beneden naar de onderkant van de instellingen.
Klik op de Opslaan-knop die direct boven de rode 'Gevarenzone' (Danger Zone) staat.
Klik aansluitend op Publiceren om de nieuwe achtergrondafbeelding live te zetten.
We hopen dat dit duidelijk is. Heb je nog vragen of loop je ergens tegenaan? Neem dan gerust contact met ons op via cs@storekeeper.nl of bel ons op 085 016 8008.