Bezoekers op je winkelpagina vinden al je uitgelichte productafbeeldingen uitgestald in een raster. De winkelpagina toont tot 200 producten. Als er meer dan 200 producten zijn, kunnen klanten op Volgende klikken om meer producten te bekijken.

Om het winkelpaginagedeelte te stijlen:

1. Open de winkelpagina die je wilt bewerken.
2. Klik op Bewerken.
3. Klik op Gedeelte bewerken in het winkelgedeelte. Je kunt de onderstaande details aanpassen. Wijzigingen gelden alleen voor dit gedeelte van de winkel.

Op het tabblad elementen kun je het volgende aanpassen:

• Winkeltitel: Toon de paginatitel bovenaan het gedeelte.
• Broodkruimels: Toon het navigatiepad dat bezoekers volgden voordat ze op hun huidige pagina terechtkwamen, met uitsluiting van gerelateerde producten en gefilterde categoriepagina's.
• Categorieënlabel: Toon het label "Categorieën" in het categorieënmenu.
• Filterlabel: Toon het label "Filters" in het filtermenu.
• Filters: Voeg filters toe om klanten te helpen je producten te vinden via tags.
• Productbeschrijving: Toon of verberg de productbeschrijving wanneer je de lijstlay-out gebruikt.
• Prijs: Toon of verberg de prijs op de miniatuur van het product.
• Knop Toevoegen aan winkelwagentje: wordt weergegeven onder productminiaturen op de winkelpagina en op productdetailpagina's.

In het tabblad Ontwerp kun je het volgende aanpassen:

• Lay-out: Toon productminiaturen in een raster of lijst. In de lijstlay-out kun je een voorvertoning van je productomschrijvingen weergeven.
• Titeluitlijning: stel de tekstuitlijning in voor de titel van je winkel.
• Menuplaatsing: Toon categorienavigatie bovenaan het gedeelte of als zijbalk.
• Categoriestijl: Stijl je categoriemenu als een uitklapmenu, subnavigatie of knoppen.
• Aantal kolommen in de rasterlay-out (minimaal twee)
• Afstand tussen kolommen en rijen
• Achtergrond: Toon of verberg een achtergrond om je productminiatuur te omringen, vergelijkbaar met een passe-partout. Stel de achtergrondkleur in, rond de hoeken af en kies het lijntype, de kleur en de dikte.
• Stijl en uitlijning van de knop
• Beeldverhouding en tekstspatiëring
• Hoeken: De miniatuurachtergrond en productafbeeldingen kunnen vierkante of gebogen hoeken hebben.
• Breedte van gedeelte en verticale opvulling.
• Verdeler: Laat een scheidingslijn zien tussen je gedeelte van de winkel en andere gedeelten op de pagina. Kies het masker, het lijntype, de kleur en de dikte.

In het tabblad Kleuren:

• Kies een thema voor je winkelgedeelte.
• Klik op het potloodpictogram op een thema om het aan te passen. Wijzigingen hebben invloed op alle gedeelten die het thema gebruiken.

Filters voor winkelpagina's

Maak productfilters om je klanten te helpen de producten en diensten te vinden die voor hen het meest interessant zijn. Filters vertrouwen op producttags om een selectie producten op je winkelpagina weer te geven.

Je kunt filters toevoegen aan winkelpagina's met 200 of minder producten. De filterknop volgt je primaire knopstijlen.

Welke stijlopties beschikbaar zijn, hangt af van de sjabloonreeks van je site en het type winkelpagina.

Opmerking: Galapagos en Supply volgen verschillende stijlaanpassingen. Raadpleeg je sjabloongids voor informatie over stijlproducten.

Om winkelpagina's te stylen:

1. Open de winkelpagina die je wilt bewerken.
2. Ga terug naar het Website-paneel.
3. Klik op Ontwerp.
4. Klik op Sitestijlen.
5. Gebruik de aanpassingen in de gedeelten Producten om de stijl van de landingspagina te veranderen.
6. Voor aanpassingen die specifiek zijn voor individuele productdetailpagina's, sluit je sitestijlen af, open je een product en voer je vervolgens sitestijlen opnieuw in.

Tip:

• Klik op een willekeurig gebied van de pagina in de voorbeeldweergave om alleen de stijlaanpassingen voor dat gebied weer te geven en de rest te verbergen.
• Als je meerdere winkelpagina's hebt, worden stijlwijzigingen toegepast op alle winkelpagina's op de hele site om een consistente uitstraling te creëren.
• Je sjabloon kan functies bevatten, zoals bannerafbeeldingen of paginaheaders, die van invloed zijn op hoe de winkelpagina eruitziet.

Lay-out winkelpagina

Bezoekers van je winkelpagina vinden al je uitgelichte afbeeldingen van productelementen uitgestald in een raster. Je kunt het raster met deze aanpassingen vormgeven onder het gedeelte sitestijlen Product: lay-out (geavanceerde winkelpagina's) of het gedeelte sitestijlen Producten (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Het aantal items per rij aanpassen
  • Geavanceerd: items per rij
  • Klassiek: producten per rij
• Wijzig de afstand tussen elk item in de rij.
  • Geavanceerd: afstand tussen items
• Verander het Masker van de afbeelding. Afbeeldingen worden bijgesneden om te passen.
  • Geavanceerd: afstand tussen items
• Stel het Masker van de afbeeldingscontainer in.
  • Klassiek: grootte productelement
• Kies of je de afbeelding wilt bijsnijden om de container te vullen
  • Klassiek: productafbeelding automatisch bijsnijden
• Wijzig de kleur die wordt weergegeven achter afbeeldingen die niet zijn bijgesneden tot de containergrootte
  • Klassiek: achtergrondkleur van het product

Productinformatie op de winkelpagina

Selecteer mobiele aanpassingen voor geavanceerde winkelpagina's om mobiele aanpassingen weer te geven Positie: overlay. Je kunt productinformatie met deze aanpassingen vormgeven onder het gedeelte sitestijlen Product: details (geavanceerde winkelpagina's) of het gedeelte sitestijlen Producten (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Stel in of de titel en prijs onder de afbeelding worden weergegeven of alleen bij zweven
  • Geavanceerd: positie: onder, overlay
  • Klassiek: productlijsttitels: onder, overlay
• Tekst uitlijnen wanneer Productlijsttitels: onder is ingeschakeld
  • Klassiek: uitlijning van productlijst: midden, links
• Stel de kleur in van de overlay bij zweven wanneer Productlijsttitels: overlay is geselecteerd. Pas de schuifregelaar aan om de transparantie in te stellen
  • Klassiek: productoverlaykleur
• Kies waar de tekst te zien is in mobiele browsers.
  • Geavanceerd: positie (mobiel): onder, overlay
• Kies hoe de tekst uitgelijnd moet worden.
  • Geavanceerd: uitlijning
• Stel de kleur van de overlay bij zweven in wanneer Positie: overlay is geselecteerd. Verplaats de schuifregelaar om de transparantie in te stellen
  • Geavanceerd: kleur overlay
• Pas de uitlijning van de tekst verder aan wanneer deze is ingesteld op weergeven bij zweven
  • Geavanceerd: overlay-opvulling
• Verander de afstand onder elke rij
  • Geavanceerd: afstand
• Vink uit om de titels van de items te verbergen
  • Geavanceerd: titel weergeven
• Stel het lettertype van de titel in.
  • Geavanceerd: lettertype titel
• Titelkleur instellen
  • Geavanceerd: kleur titel
• Stel de titelkleur in op mobiel
  • Geavanceerd: kleur titel (mobiel)
• Stel de ruimte tussen tekst en afbeelding in wanneer dit is ingesteld op Positie: onder
  • Geavanceerd: afstand tussen titels
• Uitvinken om prijzen te verbergen
  • Geavanceerd: prijs weergeven
  • Klassiek: productprijs weergeven
• Stel het lettertype van de prijs in
  • Geavanceerd: lettertype prijs
• Stel de prijskleur in op de computer.
  • Geavanceerd: kleur prijs
• Stel de prijskleur in op mobiel
  • Geavanceerd: kleur prijs (mobiel)
• Stel de kleur van de verkoopprijs in op de computer.
  • Geavanceerd: kleur verkoopprijs
• Stel de kleur van de verkoopprijs in op je mobiel.
  • Geavanceerd: kleur verkoopprijs (mobiel)
• Zet een spatie tussen de prijs en de titel.
  • Geavanceerd: afstand prijs

Wijzigingen gelden voor alle productdetailpagina's op dezelfde winkelpagina. Om de detailpagina vorm te geven:

1. Open de productdetailpagina die je wilt bewerken.
2. Klik op Bewerken en vervolgens op Gedeelte bewerken.

Kies in het tabblad Opmaken uit de volgende lay-outopties:

• Eenvoudig: De productafbeelding en beschrijving worden naast elkaar weergegeven, omringd door witruimte.
• Omloop: De productafbeeldingen worden om de beschrijving heen geplaatst. Afbeeldingen zijn altijd naar links uitgelijnd.
• Half: De productafbeelding splitst de pagina met de beschrijving. De afbeelding is altijd links uitgelijnd.
• Volledig: Productafbeeldingen worden weergegeven in een schermbrede carrousel boven de beschrijving.

Als je de eenvoudige lay-out selecteert, kun je deze opties aanpassen:

• Inhoudbreedte.
• Beeldontwerp en -afstand: Kies uit diavoorstelling, gestapeld of carrousel als je product meerdere afbeeldingen bevat. Als het ontwerp een diavoorstelling is, worden miniaturen van de andere productafbeeldingen weergegeven.
• variantweergave.
• Tekstuitlijning.
• Inhoudsuitlijning: Kies uit boven of midden. De uitlijning boven kan opvulling weergeven tussen de bovenkant van de productafbeelding en de tekst. Inhoudsuitlijning is beschikbaar voor diavoorstellingen en carrousels, niet voor gestapelde ontwerpen.
• Formulierbreedte.
• Navigatiestijl van producten.
• Positie beschrijving: Waar de productbeschrijving wordt weergegeven.
• Knop 'Toevoegen aan winkelwagentje': De optie In-line plaatst de knop naast het veld aantal.
• Galeriebeeldverhouding (alleen voor diavoorstelling en carrousel): Bij een carrouselontwerp bepaalt de beeldverhouding de verhoudingen van de afbeeldingscontainer, maar je afbeelding wordt mogelijk niet bijgesneden om deze volledig te vullen. We raden aan afbeeldingen toe te voegen met dezelfde beeldverhouding als die je in je instellingen hebt gekozen.
• Plaatsing en breedte van de galerie.
• Plaatsing van miniatuurafbeeldingen in de galerie: Hiermee worden de uitgelichte productafbeeldingen gepositioneerd wanneer het ontwerp een diavoorstelling is.
• Grootte van de carrouselpijl (alleen voor diavoorstelling en carrouselontwerpen).
• Klikactie: Kies uit geen actie, inzoomen of lichtbak, afhankelijk van het ontwerp.
• Zweefactie.

In het tabblad Kleuren:

• Kies een thema voor je winkelgedeelte.
• Klik op het potloodpictogram op een thema om het aan te passen. Houd er rekening mee dat dit invloed heeft op alle gedeelten die het thema gebruiken.

Weergave van productvarianten aanpassen

In de eenvoudige lay-out kun je varianten weergeven als knoppen of in een uitklapmenu. Alle andere lay-outs tonen varianten in uitklapmenu's.

• Variantknoppen: Volg de vormstijlen van je site. Open Sitestijlen, klik vervolgens op > naast Formulieren. Klik op Selectieopties en vervolgens op Keuzerondje.
• Variant-uitklapmenu: gebruikt hetzelfde lettertype als de variantvelden , en de kleur ervan is afhankelijk van het kleurenschema van het gedeelte.

Opmerking: De optie om je aan te melden voor een wachtlijst voor producten verschijnt alleen wanneer varianten worden weergegeven in de uitklapmenu's.

Stijl van de knoppen Toevoegen aan winkelwagentje en Kassa op de winkelpagina

De knop Toevoegen aan winkelwagentje kan worden weergegeven onder productminiaturen op de winkelpagina en op afzonderlijke productdetailpagina's.

Om de vormgeving van je productdetailpagina's te behouden, hebben aanpassingen aan de horizontale opvulling geen invloed op de knoppen 'Toevoegen aan winkelwagentje'. Als een product is uitverkocht, wordt de knop 'Toevoegen aan winkelwagentje' gedimd weergegeven.

Op winkelpagina's volgen de kleuren van de knoppen de producttekst en achtergrondkleuren. De knop 'Toevoegen aan winkelwagentje' op productdetailpagina's en de knop Kassa op de winkelwagenpagina volgen beide jouw Primaire knopstijlaanpassingen en de kleurinstellingen van je site.

De kleuren van de miniwinkelwagentjes beheren

Het miniwagentje gebruikt de kleurenschema's van je gedeelte om ervoor te zorgen dat het zichtbaar is. De kleur van het miniwagentje contrasteert automatisch met de achtergrond van je gedeelte. Om de kleur van het miniwagentje te wijzigen, pas je de achtergrondkleur van het gedeelte aan of bewerk je de kleurenschema's van je site.

Kan ik de knop 'Toevoegen aan winkelwagentje' verbergen op mijn winkelpagina?

Je kunt de knop 'Toevoegen aan winkelwagentje' niet verbergen zonder aangepaste code te gebruiken. Dit onderwerp is ter sprake gekomen in het Squarespace Forum, maar valt buiten het bereik van onze ondersteuning.

Om je producten te promoten zonder de optie om ze te kopen, kun je ze op je site weergeven met behulp van een lay-outpagina met afbeeldings- en tekstblokken.

Wanneer verschijnt het aantalveld op mijn winkelpagina?

Het aantalveld wordt weergegeven op de productdetailpagina in de volgende gevallen:

• Het voorraadniveau van je product is groter dan één.
• Het heeft varianten, ongeacht de voorraadniveaus van de individuele varianten.

Om het huidige voorraadniveau van elke variant op de detailpagina weer te geven, zet je labels met beperkte beschikbaarheid aan. Dit voorkomt dat klanten meer dan één product aan hun winkelwagentje proberen toe te voegen wanneer het voorraadniveau één is.

Je kunt de grootte van het aantalveld niet wijzigen. Je kunt het aantalveld voor fysieke producten en dienstenproducten verbergen in je kassa-instellingen.

Gerelateerde producten aanpassen

Het gedeelte met gerelateerde producten op productdetailpagina's volgt de aanpassingen in de stijlen van het winkelgedeelte en je aangepaste lettertypen op de hele site.

Als je abonnementsproducten verkoopt, kun je de kleuren aanpassen van het gedeelte abonnementsfrequentie van de productdetailpagina. Open de kleurenthema's van je site en wijzig de kleuren onder Productdetailpagina: abonnementen.

Welke stijlopties beschikbaar zijn, hangt af van de sjabloonreeks van je site en het type winkelpagina.

Opmerking: Galapagos en Supply volgen verschillende stijlaanpassingen. Raadpleeg je sjabloongids voor informatie over stijlproducten.

Lay-out voor productdetailpagina

Je kunt de lay-out vormgeven onder het gedeelte sitestijlen Product: lay-out (geavanceerde winkelpagina's) of het gedeelte sitestijlen Producten (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Verander de itemafstand
  • Geavanceerd: afstand
• Voeg lege ruimte toe aan de bovenkant van de pagina
  • Geavanceerd: opvulling boven
• Je kunt de paginering aanpassen
  • Geavanceerd: navigatieweergave: alleen broodkruimel, alleen paginering, broodkruimel en paginering, geen
  • Klassiek: navigatie productelement weergeven
• Wijzig de paginatietekst.
  • Geavanceerd: stijl paginering: vorige/volgende, titels
• Wijzig de paginatietekst.
  • Geavanceerd: uitlijning navigatie: links, midden, rechts, gesplitst
• Wijzig het lettertype voor paginering
  • Geavanceerd: lettertype navigatie
• Pagineringskleur wijzigen
  • Geavanceerd: kleur navigatie
• Verander de kleur van de pijl tussen paginatitels in de navigatie.
  • Geavanceerd: kleur scheidingsteken navigatie

Opmerking:

• De volgorde van de producten wordt bepaald door waar de producten op de winkelpagina's worden weergegeven. Ze zijn van links naar rechts gerangschikt.
• Paginering geeft alle producten weer. Je kunt het niet tot een specifieke categorie beperken.

Afbeeldingen voor productdetailpagina's

Bij het bekijken van een individueel item zien klanten de productafbeeldingen. Je kunt afbeeldingen vormgeven onder het gedeelte sitestijlen Product: galerie (geavanceerde winkelpagina's) of het gedeelte sitestijlen Producten (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Uitlijning afbeelding wijzigen
  • Geavanceerd: positie: links, rechts
• Verander de stijl van je galerie
  • Geavanceerd: ontwerp: diavoorstelling, gestapeld
• Wijdte van afbeelding wijzigen
  • Geavanceerd: breedte
• Stel het Masker van de afbeelding in
  • Geavanceerd: beeldverhouding
  • Klassiek: grootte productgalerij
• Kies of de productafbeelding wordt bijgesneden om de afbeeldingscontainer te vullen. Zo niet, dan zal de productachtergrondkleur achter de afbeelding worden weergegeven.
  • Klassiek: productgalerij automatisch bijsnijden
• Thumbnail tweaks beïnvloeden de navigatieminiaturen die onder de afbeelding worden weergegeven wanneer Design: diavoorstelling is geselecteerd.
  • Geavanceerd: miniatuuruitlijning: links, midden, rechts
• Wijzig de breedte van de miniatuur
  • Geavanceerd: miniatuurbreedte
• Miniatuurafstanden wijzigen
  • Geavanceerd: afstand tussen miniaturen
• Verander de ruimte tussen afbeeldingen wanneer Design: stacked is geselecteerd.
  • Geavanceerd: afstand

Productinformatie op productdetailpagina

Je kunt de productinformatie vormgeven onder het gedeelte sitestijlen Producten: details (geavanceerde winkelpagina's) of het gedeelte sitestijlen Producten (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Wijzig de positie van de details op de pagina.
  • Geavanceerd: uitlijning: links, midden, rechts
• Pas de regelafstand aan
  • Geavanceerd: regelhoogte. De aanpassing van de regelhoogte in het gedeelte Hoofdtekst: lettertype heeft hier ook invloed op de regelhoogte
• Letterafstand wijzigen
  • Geavanceerd: afstand
• Producttitel weergeven of verbergen
  • Geavanceerd: titel weergeven
• Lettertype producttitel wijzigen
  • Geavanceerd: lettertype titel
• Wijzig de kleur van de producttitel.
  • Geavanceerd: kleur titel
• Laat je de prijs zien of verberg je hem
  • Geavanceerd: prijs weergeven
• Lettertype voor prijs wijzigen
  • Geavanceerd: lettertype prijs
• Prijskleur wijzigen
  • Geavanceerd: kleur prijs
• Verander de kleur voor verkoopitems
  • Geavanceerd: kleur verkoopprijs
• Selecteer waar de productbeschrijving wordt weergegeven
  • Geavanceerd: positie uittreksel: boven prijs, onder prijs, onder knop Toevoegen aan winkelwagentje
• Lettertype productomschrijving wijzigen
  • Geavanceerd: lettertype uittreksel
• Verander de kleur van de productbeschrijving.
  • Geavanceerd: kleur uittreksel
• Linkkleur productbeschrijving wijzigen
  • Geavanceerd: linkkleur uittreksel
• De deelknoppen verbergen of weergeven
  • Geavanceerd: deelknoppen weergeven
  • Klassiek: producten delen op sociale media
• Gebruik de aanpassingen in het gedeelte Deelknoppen
  • Geavanceerd: stijl deelknoppen
  • Klassiek: stijl deelknoppen

Productdetailpagina, aantallen en varianten

Je kunt aantal en varianten vormgeven onder het gedeelte sitestijlen Product: galerie (geavanceerde winkelpagina's) of het gedeelte sitestijlen Hoofdcontent (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Varianten weergeven of verbergen
  • Geavanceerd: varianten weergeven
• Aantal weergeven of verbergen. De hoeveelheid wordt alleen weergegeven als er meerdere items beschikbaar zijn.
  • Geavanceerd: aantal weergeven
• Verander de aantalweergave
  • Geavanceerd: stijl: alleen tekst, vierkant, afgerond, pilvormig
• Voeg een randkleur toe aan de weergave van het aantal.
  • Geavanceerd: kleur rand
• Voeg een achtergrondkleur toe aan de hoeveelheidsweergave.
  • Geavanceerd: achtergrondkleur
• Het lettertype van de hoeveelheidsweergave wijzigen
  • Geavanceerd: lettertype label
• Wijzig de kleur van de hoeveelheidsweergave.
  • Geavanceerd: kleur label
• Stel je hoeveelheid en lettertype voor de varianten in
  • Geavanceerd: lettertype
  • Klassiek: volgt aanpassingen aan de header of kop 1 voor de hele site.
• Stel de hoeveelheid en de tekstkleur van de varianten in
  • Geavanceerd: tekstkleur
• Wijzig het lettertype van de variantweergave. Het is niet mogelijk om het lettertype van het menu-item te wijzigen.
  • Geavanceerd: lettertype

Wanneer verschijnt het aantalveld op de productdetailpagina?

Het hoeveelheidsveld wordt weergegeven op de detailpagina als:

• Het voorraadniveau van je product is groter dan één.
• Het heeft varianten, ongeacht de voorraadniveaus van de individuele varianten.

Tip: Schakel labels voor beperkte beschikbaarheid in om het huidige voorraadniveau van elke variant op de productdetailpagina weer te geven. Dit voorkomt dat klanten meer dan één product aan hun winkelwagentje proberen toe te voegen wanneer het voorraadniveau één is.

Kan ik het uitklapmenu voor het aantal verbergen?

Je kunt het productaantal verbergen in versie 7.0, als het sjabloon van je site deel uitmaakt van de families Brine, Farro, Skye, Tremont of York. In deze sjablonen kun je het aantal-uitklapmenu op de itempagina's als volgt verbergen:

1. Ga naar je winkelpagina.
2. Open het individuele item.
3. Ga terug naar het website -paneel, klik op Ontwerp en vervolgens op sitestijlen.
4. Scrol naar het Producten: Opties gedeelte.
5. Haal het vinkje weg bij Toon aantal.

Tip: De optie 'aantal' wordt nog steeds weergegeven bij de kassa. Je kunt dit uitschakelen voor service-items in alle sjablonen.

De knop 'Toevoegen aan winkelwagentje' op de detailpagina

Je kunt aantal en varianten vormgeven onder het gedeelte sitestijlen Knoppen weergeven (geavanceerde winkelpagina's) of het gedeelte sitestijlen Knoppen (klassieke winkelpagina's), indien van toepassing.

Beschrijving van de stijl

• Verberg de knop
  • Geavanceerd: Knop weergeven uitvinken
• Verander de stijl van je knop
  • Geavanceerd: stijl: effen, omlijning, verhoogd
  • Klassiek: stijl: standaard, effen, omlijning, verhoogd
• Verander de Masker van de knop
  • Geavanceerd: vorm: vierkant, afgerond, pilvormig
  • Klassiek: vorm: vierkant, rond, pilvormig
• Opvulling rond de knop toevoegen of verwijderen
  • Geavanceerd: opvulling: klein, middelgroot, groot
• Verander de kleur van je knop
  • Geavanceerd: kleur
  • Klassiek: knopkleur
• Verander de knoptekstkleur
  • Geavanceerd: tekstkleur
  • Klassiek: tekstkleur
• Lettertype knop wijzigen
  • Geavanceerd: lettertype
  • Klassiek: lettertype

Let op: Als een product is uitverkocht, wordt de knop Toevoegen aan winkelwagentje gedimd weergegeven.

Kassa-knop op productdetailpagina

De Kassa-knop die op de pagina voor je winkelwagentje wordt weergegeven, volgt de kleurinstellingen van je site. Je kunt de vorm of het lettertype ervan niet aanpassen.

Gerelateerde producten op de productdetailpagina

Gerelateerde producten worden in een raster onderaan de pagina weergegeven.