Product pagina

Productpagina

Met het productpagina-sjabloon kun je de pagina aanpassen zodat die goed past bij jouw winkel en producten. Vanuit hier kun je de plaatsing, de lay-out en de inhoud wijzigen.

Productafbeelding

Bovenaan de productpagina staat meestal een gedeelte met de productafbeelding. Dit heet de "Productafbeeldingssectie". In deze sectie zit een blok dat automatisch de juiste foto's van elk product laat zien. 

Productafbeeldingsectie

Binnen de productafbeeldingsectie zijn er verschillende mogelijkheden om deze te bewerken. 

Algemene instellingen
Bij de algemene instellingen van de sectie kun je zaken als de achtergrondkleur, zichtbaarheid en breedte aanpassen. Als je bijvoorbeeld de achtergrondkleur van de sectie wijzigt, verandert dit de kleur die achter de productafbeelding zelf staat.

Onder geavanceerde instellingen vind je de opties voor kolombreedte. Alle ontwerpen zijn opgebouwd uit 8 kolommen. Door te wijzigen hoeveel kolommen een sectie moet beslaan, kun je de breedte op de pagina aanpassen. Als de productafbeeldingsectie is ingesteld op 4 kolommen, betekent dit dat deze de helft van de productpagina beslaat. Het aantal kolommen kan worden gewijzigd voor alle apparaattypen (pc, tablet en mobiel).

Marge (Afstand)
Marge stelt je in staat de afstand tussen secties aan te passen. Als je bijvoorbeeld een marge van 20px aan de onderkant instelt, betekent dit dat er 20px "lucht" zit tussen deze en de volgende sectie.

Opvulling
Opvulling creëert lucht/padding aan de binnenkant van de sectie, in tegenstelling tot marge, die de afstand aan de buitenkant van de sectie bepaalt.

Video
Deze instellingen zijn van toepassing bij het gebruik van een productvideo en beïnvloeden hoe een video verschijnt wanneer je deze op de productpagina opent.

Instellingen van het productafbeeldingblok

Het productafbeeldingblok regelt de foto's zelf, niet alleen de opmaak. 

Wat kun je instellen?

• Slideshow: Indien actief, kun je op de productafbeelding klikken om deze in een pop-up/slideshow te bekijken.
• Afbeeldingsbreedte: Pas de breedte van de productafbeelding aan. Voor het beste resultaat wordt aanbevolen deze instelling zo nauwkeurig mogelijk in te stellen om te voorkomen dat de browser een veel grotere afbeelding laadt dan nodig is.
• Pijlen in afbeeldingscarrousel tonen: Indien actief, krijg je knoppen met pijlen boven de productafbeelding waarmee je heen en weer kunt klikken tussen de afbeeldingen. De kleur, achtergrondkleur, afgeronde hoeken en grootte van de pijlen stellen je in staat het uiterlijk aan te passen.
• Pijlen op miniaturen tonen: Vergelijkbaar met de bovenstaande instelling, toont dit pijlen op de miniaturen zodat je eenvoudig tussen afbeeldingen kunt scrollen.
• Automatisch afspelen instellen: Indien actief, veranderen de productafbeeldingen automatisch na x aantal seconden.
• "Lazy Load" voor afbeeldingen inschakelen: De instelling zorgt ervoor dat afbeeldingen pas worden geladen wanneer de sectie aan bezoekers wordt getoond. Als de sectie helemaal bovenaan staat, wordt aanbevolen deze instelling uit te schakelen zodat de productafbeeldingen worden geladen wanneer de productpagina wordt geladen.

Product kopen (aankoopsectie)

Dit is de belangrijkste sectie van de productpagina. Hierin staan de volgende blokken: 

• Titel: naam van het product
• Korte beschrijving
• Prijs
• Beschrijving
• Varianten
• Aankoopknop 

Beschikbare blokken

De productaankoop sectie heeft dus verschillende opties om de nodige informatie aan de klant te tonen. Je kunt kiezen welke blokken je laat zien en in welke volgorde. Versleep ze om ze anders te zetten.

Naast de kant-en-klare blokken voor prijs etc., is er ook een tekst blok dat kan worden gebruikt voor vrije tekst en aangepaste HTML.