Productpagina's

Op productpagina's kun je informatie weergeven over de producten die je in je winkel verkoopt en waar je klanten de producten kunnen kopen.

Productpagina's hebben standaard een sectie Productgegevens en een sectie Gerelateerde producten in de themabewerker.

De sectie Productgegevens

In de sectie Productgegevens wordt informatie over je producten weergegeven, zoals de titel, de beschrijving, de prijs en afbeeldingen.

Instellingen sectie Productgegevens

De instellingen voor de sectie Productgegevens
InstellingenBeschrijving
Sticky content op desktop inschakelenWanneer je door een pagina naar beneden scrolt, begint de kolom met productinformatie pas met scrollen wanneer alle afbeeldingen zijn doorgescrold.
KleurschemaEen set kleuren die je kunt toepassen op deze sectie. Hier vind je meer informatie over kleurenschema's.
Media op desktopbreedteStel de breedte van je productmedia op de productpagina voor desktopcomputers in. Je kunt kiezen uit Klein, Gemiddeld of Groot.
Media beperken tot schermhoogteMet deze optie stel je een maximumhoogte voor media in op basis van de hoogte van het browservenster op elk gewenst apparaat.
Media passenSelecteer Origineel voor de oorspronkelijke beeldverhouding of Opvullen om de media passend te maken op de container.
Opmaak bureaublad Stel de opmaak van je productmedia in op desktopcomputers. Kies uit de volgende opties:
  • Gestapeld: geeft de media van je product verticaal gestapeld op de pagina weer. Wanneer je op een gestapeld mediatype klikt, open je een pop-upvenster met een grotere weergave van de geselecteerde media.
  • 2 kolommen: geeft je productmedia weer als gestapeld, maar in twee kolommen.
  • Miniaturen: als een product meer dan één afbeelding of een ander mediatype heeft, worden de resterende media als miniaturen onder de hoofdproductmedia weergegeven. De klant kan op een miniatuur klikken om deze weer te geven als de hoofdproductmedia.
  • Carrousel van miniaturen: als een product meer dan één afbeelding of een ander mediatype heeft, worden de resterende media als miniaturen in een carrousel onder de hoofdproductmedia weergegeven. De klant kan op een miniatuur klikken om deze weer te geven als de hoofdproductmedia of de pijlen voor de carrouselnavigatie gebruiken om andere media weer te geven.
Positie van media voor desktopcomputerSelecteer of de productmedia aan de linkerkant of aan de rechterkant van de pagina moeten worden weergegeven op desktopcomputers.
Inzoomen op afbeeldingKies hoe op een desktop wordt in- en uitgezoomd op de afbeelding:
  • Lightbox openen: de klant kan klikken om een grotere versie van de afbeelding weer te geven. Dit is de standaardfunctionaliteit voor productmedia die op mobiele apparaten worden weergegeven.
  • Klikken en aanwijzen: de klant kan klikken om in te zoomen op de afbeelding, daarna met de cursor erover gaan om verschillende delen ingezoomd te bekijken. Zoomen bij aanwijzen wordt gedeactiveerd wanneer je opnieuw op de vergrote afbeelding klikt of wanneer je met de cursor weggaat van de afbeelding. Als deze instelling is geactiveerd, wordt de afbeelding, nadat erop is geklikt, op een mobiel apparaat standaard geopend in een modaal (lightbox).
  • Geen zoom: met deze optie wordt het inzoomen op afbeeldingen gedeactiveerd. Het is een goede oplossing voor afbeeldingen die geen hoge resolutie hebben en niet goed worden weergegeven als je erop inzoomt.
Opmaak voor mobielStel de opmaak van je productmedia in op mobiele apparaten. Kies uit de volgende opties:
  • 2 kolommen: geeft twee productmedia naast elkaar weer, met carrouselfunctionaliteit om naar andere productmedia te scrollen.
  • Miniaturen weergeven: geeft één hoofdmedium voor het product weer, met carrouselfunctionaliteit om naar andere miniaturen te scrollen.
  • Miniaturen verbergen: geeft één hoofdmedium voor het product weer met carrouselfunctionaliteit om te scrollen, maar de miniaturen worden niet weergegeven.
De media van andere varianten verbergen na selectie van een variantWanneer een variant is geselecteerd, worden de afbeeldingen van andere varianten verborgen. Deze afbeeldingen komen na deselectie van de variant weer in beeld.
Video-looping inschakelenAls je video's in je productmedia hebt, speelt deze instelling ze in een lus af, zodat ze automatisch worden herhaald als ze klaar zijn.
Opvulling bovenStel de hoeveelheid witruimte aan de bovenkant van de sectie in.
Opvulling onderStel de hoeveelheid witruimte aan de onderkant van de sectie in.

Naast de instellingen voor de sectie Productgegevens kun je ook enkele Thema-instellingen voor productbadges aanpassen en je eigen sectiespecifieke Aangepaste CSS toevoegen.

Blokken met productgegevens

Je kunt de volgende blokken gebruiken in de sectie Productgegevens:

Tekstblok

Je kunt het blok Tekst gebruiken om statische tekst weer te geven, of variabele gegevens met dynamische bronnen. Je kunt bijvoorbeeld marketingtekst toevoegen, zoals Gratis verzending bij bestellingen boven € 100,-, die dan op elk product wordt weergegeven. Je kunt ook een dynamische bron toevoegen, zoals het veld Verkoper van het product, dat kan veranderen, afhankelijk van welk product wordt bekeken.

De instellingen voor het tekstblok in de sectie Productgegevens
InstellingenBeschrijving
TekstEen tekstveld om extra informatie aan de productpagina toe te voegen.
Tekststijl Wijzig de stijl van de tekst. Kies uit de volgende opties:
  • Tekst - Wijzigt de tekst in de tekst in de stijl van de alinea.
  • Ondertitel - Wijzigt de tekst in ondertiteling, die iets groter is dan tekst in alineastijl.
  • Hoofdletters: maakt de tekst kleiner dan alineatekst en zet deze om in hoofdletters.

Titelblok

In het blok Titel wordt de titel weergegeven van het product dat wordt bekeken. Dit blok heeft geen aanpasbare instellingen.

Prijsblok

In het blok Prijs wordt de prijsinformatie weergegeven van het product dat wordt bekeken, zoals de prijs en de prijsvergelijking. Dit blok heeft geen aanpasbare instellingen.

Blok voor variantkiezer

In het blok Variantkiezer worden eventuele keuzevarianten weergegeven voor het product dat wordt bekeken. De variantkiezer wordt alleen weergegeven voor producten met keuzevarianten. Als je dit blok verwijdert en producten met keuzevarianten hebt, kunnen je klanten de gewenste keuzevariant niet kiezen of kopen.

De instellingen voor het blok Variantkiezer in de sectie Productgegevens
InstellingenBeschrijving
Stijl Je kunt kiezen hoe je productvarianten aan klanten worden weergegeven. Kies uit de volgende opties:
  • Vervolgkeuzelijst: geeft de keuzevarianten weer in vervolgkeuzelijsten. Deze kunnen alleen als staal of tekst worden weergegeven.
  • Keuzeopties: geeft de keuzevarianten weer als knoppen die je kunt selecteren. Deze kunnen alleen als staal of tekst worden weergegeven.
Staal Je kunt kiezen hoe je kleurstalen aan klanten worden weergegeven. Kies uit de volgende opties:
  • Cirkel: geeft de kleurstaal weer als een cirkel die je kunt selecteren.
  • Vierkant: geeft de kleurstaal weer als een vierkant dat je kunt selecteren.
  • Geen: er worden geen kleurstalen weergegeven.

Blok voor hoeveelheidskiezer

In het blok Hoeveelheidskiezer wordt een klikbaar en bewerkbaar getalveld weergegeven waarmee klanten kunnen aangeven hoeveel eenheden zij van een product willen kopen. Dit blok heeft geen aanpasbare instellingen.

Blok voor koopknoppen

In het blok Koopknoppen worden de knop Toevoegen aan winkelwagen en informatie voor afhalen in de winkel weergegeven. Hiermee kunnen ook dynamische checkoutknoppen worden weergegeven die je in je winkel hebt.

De instellingen voor het blok Koopknoppen in de sectie Productgegevens
InstellingenBeschrijving
Dynamische checkout-knoppen weergevenToont alle dynamische checkout-opties die je in de instellingen voor Betalingen hebt geactiveerd.
Formulier voor gegevens van ontvanger weergeven voor cadeaubonnenToont een optioneel selectievakje op cadeaubonproducten als je die hebt, zodat klanten een cadeaubon naar een ontvanger kunnen verzenden en plannen, samen met een persoonlijk bericht.

Beschrijving blok

In het blok Beschrijving wordt de beschrijving weergegeven van het product dat wordt bekeken. Dit blok heeft geen aanpasbare instellingen.

Blok voor delen

Het blok Delen bevat een klikbare link waarmee klanten het product op hun social media kunnen delen.

De instellingen voor het blok Delen in de sectie Productgegevens
InstellingenBeschrijving
TekstDe tekst waar klanten op klikken om het product met hun social media te delen.

SKU-blok

In het blok SKU wordt, waar dat relevant is, de SKU (Stock Keeping Unit) weergegeven die aan het product gekoppeld is. Lees meer over het toevoegen van SKU-nummers aan je productvarianten.

De instellingen voor het SKU-blok in de sectie Productgegevens
InstellingenBeschrijving
Tekststijl Wijzig de stijl van de tekst. Kies uit de volgende opties:
  • Tekst - Wijzigt de tekst in de tekst in de stijl van de alinea.
  • Ondertitel - Wijzigt de tekst in ondertiteling, die iets groter is dan tekst in alineastijl.
  • Hoofdletters: maakt de tekst kleiner dan alineatekst en zet deze om in hoofdletters.

Voorraadstatusblok

In het blok Voorraadstatus wordt de voorraadstatus van het product weergegeven. Je kunt de voorraadstatus en de restvoorraad permanent weergeven, of alleen nadat de productvoorraad een drempel heeft bereikt die jij instelt. De voorraadstatus wordt alleen weergegeven voor producten waarvoor voorraadtracking is geactiveerd.

De instellingen voor het blok Voorraadstatus in de sectie Productgegevens
InstellingenBeschrijving
Tekststijl Wijzig de stijl van de tekst. Kies uit de volgende opties:
  • Tekst - Wijzigt de tekst in de tekst in de stijl van de alinea.
  • Ondertitel - Wijzigt de tekst in ondertiteling, die iets groter is dan tekst in alineastijl.
  • Hoofdletters: maakt de tekst kleiner dan alineatekst en zet deze om in hoofdletters.
Drempelwaarde lage voorraadMet de schuifregelaar kun je een drempel instellen voor wanneer je producten worden weergegeven met de aanduiding Voorraad laag. Kies een getal tussen 0 en 100. Als je de schuifregelaar op 0 zet, wordt Op voorraad weergegeven totdat het product helemaal op is.
Voorraadhoeveelheid weergevenSelecteer deze optie wanneer je de inventarisering voor producten op voorraad wil weergeven.

Blok Aangepaste Liquid

In het blok Aangepaste Liquid wordt aangepaste Liquid- of HTML-code weergegeven die je aan het blok toevoegt.

De instellingen voor het blok Aangepaste Liquid in de sectie Productgegevens
InstellingenBeschrijving
Liquid-codeGeeft de content weer die wordt gerenderd door de Liquid- of HTML-code die jij invoert.

Inklapbaar rijenblok

In het blok Samenvouwbare rij wordt een uitvouwbare en samenvouwbare rij met een titel weergegeven. Wanneer een klant op het pictogram, de titel of de pijl-omlaag klikt, wordt de rij uitgevouwen en extra content weergegeven.

De instellingen voor het blok Inklapbare rij in de sectie Productgegevens
InstellingenBeschrijving
OpschriftDe titel van de rij. Deze wordt weergegeven, ongeacht of de rij samengevouwen of uitgevouwen is.
PictogramSelecteer een pictogram dat je bij de samenvouwbare rij wil weergeven of selecteer Geen om alleen de titel van de rij weer te geven.
RijcontentVoer de content voor de rij met de RTF-editor in. De content wordt alleen weergegeven wanneer de rij uitgevouwen is.
Rijcontent vanaf paginaVoeg content van een pagina aan de rij toe. Hiermee wordt alleen de content weergegeven die je aan een pagina toevoegt in de sectie Webshop > Pagina's van het Shopify-beheercentrum. Er wordt geen content weergegeven die je in de template voor pagina's toevoegt in de themabewerker. Alle content die je in het veld Rij-content invoert, wordt boven de paginacontent die je toevoegt weergegeven.

Pop-upblok

In het blok Pop-up wordt klikbare tekst weergegeven waarmee na klikken een pop-upvenster wordt geopend.

De instellingen voor het blok Pop-up in de sectie Productgegevens
InstellingenBeschrijving
Link-labelDe klikbare tekst waar klanten op klikken om het pop-updialoogvenster weer te geven.
PaginaSelecteer de pagina waarvan je content wil weergeven in het pop-upvenster. Hiermee wordt alleen de content weergegeven die je aan een pagina toevoegt in de sectie Webshop > Pagina's van het Shopify-beheercentrum. Er wordt geen content weergegeven die je toevoegt in de template voor pagina's in de themabewerker.

Blok productbeoordeling

Het blok Productbeoordeling geeft de gemiddelde productbeoordeling in sterren weer, met het aantal recensies tussen haakjes, bijvoorbeeld: ★★★★★ (8).

Als je productbeoordelingen wil weergeven, gebruik dan een app voor productrecensies en metavelddefinities voor reviews.rating_count en reviews.rating.

Dit blok heeft geen aanpasbare instellingen.

Aanvullende productenblok

In het blok Aanvullende producten worden aanvullende producten weergegeven die je hebt ingesteld met de Shopify Search & Discovery-app.

De instellingen voor het blok Aanvullende producten in de sectie Productgegevens
InstellingenBeschrijving
Opschrift De titel van het blok.
Weergeven als inklapbare rij Wanneer de content is geselecteerd, wordt deze binnen een rij samengevouwen weergegeven. Wanneer een klant op een titel klikt, wordt de rij uitgevouwen om extra content weer te geven.
Pictogram Selecteer een pictogram dat je aan de koptekst wil koppelen wanneer aanvullende producten worden weergegeven als een samenvouwbare rij.
Maximum aantal producten om te tonen Selecteer het maximale aantal aanvullende producten dat je wil laten zien. Kies een getal tussen 1 en 10.
Aantal producten per pagina Selecteer met de schuifregelaar het aantal aanvullende producten dat je per pagina wil weergeven. Kies een getal tussen 1 en 4.
Pagineringsstijl Stel de stijl van de schuifnavigatie die onder de producten wordt weergegeven in. Kies uit Punten, Teller of Getallen.
Breedte-/hoogteverhouding van afbeeldingen Stel de beeldverhouding van de productkaartafbeeldingen in. Kies uit Staand of Vierkant.
Knop Snel toevoegen inschakelen Als je de knop Snel toevoegen activeert, kunnen je klanten met een van de volgende opties vanaf de productkaart een artikel aan hun winkelwagen toevoegen:
  • Aan winkelwagen toevoegen: voor producten met één variant. Wanneer een klant op deze knop klikt, wordt het product automatisch aan de winkelwagen toegevoegd.
  • Opties kiezen: voor producten met varianten. Wanneer een klant op deze knop klikt, wordt een pop-upvenster weergegeven waarin ze een variant kunnen selecteren. Daarna kunnen ze doorgaan met de aankoop.

Pictogram met tekstblok

Het blok Pictogram met tekst bevat maximaal drie pictogrammen met bijbehorende tekst. Kies uit een lijst met vooraf geïnstalleerde pictogrammen of gebruik een afbeelding die je zelf uploadt.

De instellingen voor het blok Pictogram met tekst in de sectie Productgegevens
InstellingenBeschrijving
OpmaakJe kunt kiezen tussen de opties Horizontaal of Verticaal als opmaak voor het blok.
Eerste pictogramSelecteer een pictogram dat je in het blok wil weergeven of selecteer Geen om alleen een titel weer te geven.
Eerste afbeeldingAls je geen pictogram wil gebruiken, kun je zelf een afbeelding kiezen.
Eerste opschriftVoeg een titel voor het eerste pictogram of de eerste afbeelding toe.
Tweede pictogramSelecteer een pictogram dat je in het blok wil weergeven of selecteer Geen om alleen een titel weer te geven.
Tweede afbeeldingAls je geen pictogram wil gebruiken, kun je zelf een afbeelding kiezen.
Tweede opschriftVoeg een titel voor het tweede pictogram of de tweede afbeelding toe.
Derde pictogramSelecteer een pictogram dat je in het blok wil weergeven of selecteer Geen om alleen een titel weer te geven.
Derde afbeeldingAls je geen pictogram wil gebruiken, kun je zelf een afbeelding kiezen.
Derde opschriftVoeg een titel voor je derde pictogram of afbeelding toe.

De sectie Gerelateerde producten

De sectie Gerelateerde producten toont, op basis van het product dat wordt bekeken, vergelijkbare producten, producten met een vergelijkbare beschrijving of producten die vaak samen met het bekeken product worden gekocht. Je kunt je eigen producten handmatig aan de sectie Gerelateerde producten toevoegen. Gebruik hiervoor de Shopify Search & Discovery-app.

Zie Productaanbevelingen begrijpen voor meer informatie over productaanbevelingen.

Instellingen voor de sectie Gerelateerde producten

De instellingen voor de sectie Gerelateerde producten
InstellingenBeschrijving
OpschriftDe titel van de sectie.
Grootte hoofdtekstDe grootte van de titeltekst. Je kunt kiezen uit Klein, Gemiddeld, Groot, Extra groot of Extra extra groot.
Maximum aantal producten om te tonenStel in hoeveel gerelateerde producten je maximaal wil weergeven. Kies een getal tussen 2 en 10.
Aantal kolommen op desktopStel het aantal kolommen voor de producten in dat op desktopcomputers wordt weergegeven. Kies een getal tussen 1 en 6.
KleurschemaEen set kleuren die je kunt toepassen op deze sectie. Hier vind je meer informatie over kleurenschema's.
Breedte-/hoogteverhouding van afbeeldingenStel de beeldverhouding voor de uitgelichte afbeeldingen van de weergegeven gerelateerde producten in. Kies uit de volgende opties:
  • Aanpassen aan afbeeldingen: gebruikt de breedteverhouding van de afbeelding. Hiermee voorkom je dat de afbeelding wordt bijgesneden.
  • Portret: snijdt de afbeeldingen bij om een breedteverhouding van 2:3 te gebruiken.
  • Vierkant: snijdt de afbeeldingen bij om een breedteverhouding van 1:1 te gebruiken.
Vorm afbeeldingKies een van de volgende vormen voor de bijbehorende productafbeeldingen:
  • Standaard: verandert de productafbeelding in een rechthoekige vorm.
  • Boog: buigt de bovenkant van de productafbeelding om.
  • Blob: wijzigt de vorm van de productafbeelding in een van zes willekeurige blobvormen met een unieke animatie als je er met de muis over gaat.
  • Visgraat links: wijzigt de vorm van de productafbeelding in een visgraat met een scherpe bocht naar links.
  • Visgraat rechts: wijzigt de vorm van de productafbeelding in een visgraat met een scherpe bocht naar rechts.
  • Diamant: verandert de productafbeelding in een vierzijdige diamantvorm.
  • Parallelogram: wijzigt de vorm van de productafbeelding in een vorm met twee paar parallelle lijnen.
  • Rond: wijzigt de vorm van de productafbeelding in een cirkel of ovaal met een unieke animatie als je er met de muis over gaat.
Tweede afbeeldingen tonen als je de aanwijzer erboven houdtWanneer een klant op een desktopcomputer de cursor boven productafbeeldingen beweegt, wordt met deze optie de tweede productafbeelding weergegeven, als die er is.
Verkoper weergevenToont de verkoper voor elk product.
Geef productbeoordeling weerGeeft de gemiddelde productbeoordeling in sterren weer, met het aantal recensies tussen haakjes, bijvoorbeeld: ★★★★★ (8). Hiervoor zijn ook een productrecensie-app en metavelddefinities voor reviews.rating_count en reviews.rating nodig.
Aantal kolommen op mobielStel het aantal kolommen voor de producten in dat op mobiele apparaten wordt weergegeven. Je kunt één of twee kolommen kiezen.
Opvulling bovenStel de hoeveelheid witruimte aan de bovenkant van de sectie in.
Opvulling onderStel de hoeveelheid witruimte aan de onderkant van de sectie in.
Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.