Een pop-up-maattabel toevoegen aan je productpagina's

Met metavelden kun je de functionaliteit en het uiterlijk van je Shopify-winkel aanpassen door je de mogelijkheid te geven gespecialiseerde informatie op te slaan die gewoonlijk niet in het Shopify-beheercentrum wordt vastgelegd. Metavelden kunnen intern in je Shopify-beheercentrum worden gebruikt, maar je kunt er ook voor kiezen om ze in je webshop weer te geven.

Met metavelden kun je een paginaverwijzing toevoegen aan een pop-upblok dat een link op je productpagina's weergeeft. Wanneer op de link wordt geklikt, wordt een pop-up geopend waarin de content van je pagina wordt weergegeven. Je kunt afbeeldingen en andere media toevoegen met de rich text-editor voor je pagina's.

Hieronder volgen enkele voorbeelden van pop-upinformatie die je aan je productpagina's kunt toevoegen:

  • Maattabellen
  • Onderhoudsinstructies
  • Montage-instructies
  • Productspecificaties
  • Veelgestelde vragen

Dit is een tutorial in 4 stappen waarin paginaverwijzingsmetavelden worden geïntroduceerd, en je leert hoe je een productmetaveld voor een paginaverwijzing aanmaakt, een productpaginatemplate voor je webshop aanmaakt, een nieuwe pagina toevoegt, naar de pagina in specifieke producten verwijst en de productpaginatemplate op specifieke producten toepast. Je kunt deze tutorial gebruiken om elke gewenste content in de pop-up aan te maken. In deze tutorial wordt de maattabel als doorlopend voorbeeld gebruikt.

Voor deze tutorial is een thema dat dynamische bronnen ondersteunt vereist. Als je een klassiek thema gebruikt of als je metaveldtypen wilt toevoegen die je thema niet ondersteunt, dan kun je je themacode bewerken of een Shopify Partner inhuren.

Stap 1: Een productmetaveld voor een pagina aanmaken

Om te beginnen, moet je een metavelddefinitie voor een paginaverwijzing voor je productpagina's aanmaken. Het productmetaveld linkt naar een specifieke pagina en kan voor elk product worden aangepast. Als je geen paginaverwijzing toevoegt aan een product dat dezelfde template gebruikt, wordt de linktekst van je pop-up nog steeds weergegeven alsof er content is. Om de pop-uplink alleen op specifieke producten weer te geven, kun je een producttemplate aanmaken en die alleen toepassen op relevante producten.

Met paginaverwijzingsmetavelden kun je verschillende productinformatie weergeven door verschillende pagina's aan te maken voor verschillende soorten producten. Je kunt bijvoorbeeld twee verschillende maattabelpagina's aanmaken voor twee verschillende leeftijdsgroepen, zoals een maattabel voor peuters en een maattabel voor baby's, en vervolgens kun je de paginaverwijzing voor peutermaten alleen toevoegen aan producten die voor peuters zijn.

Je moet een metavelddefinitie voor een paginaverwijzing aanmaken om deze te koppelen aan het pop-upblok in je themabewerker. Toegang tot webshop is standaard geselecteerd wanneer je je metavelddefinitie aanmaakt.

Stappen:

Desktop
  1. Ga in het Shopify-beheercentrum naar Instellingen > Metavelden en metaobjecten.

  2. Klik in de sectie Metavelddefinities op Producten.

  3. Klik op Definitie toevoegen.

  4. Voer in het veld Naam Maattabel in.

  5. Klik op ⊕ Type selecteren.

  6. Selecteer Pagina in de vervolgkeuzelijst. Eén pagina is standaard geselecteerd.

  7. Klik op Opslaan.

Mobiel
  1. Tik in de Shopify app op Menu en tik vervolgens op Settings Instellingen.

  2. Tik in het gedeelte Winkelinstellingen op Metavelden en metaobjecten.

  3. Tik in de sectie Metavelddefinities op Producten.

  4. Tik op +.

  5. Voer in het veld Naam Maattabel in.

  6. Tik op + Type selecteren.

  7. Tik om Pagina te selecteren in de vervolgkeuzelijst. Eén pagina is standaard geselecteerd.

  8. Tik op Opslaan of .

Stap 2: Je productpaginatemplate aanmaken

Voor deze tutorial is een thema dat dynamische bronnen ondersteunt vereist. Als je een klassiek thema gebruikt of als je metaveldtypen wilt toevoegen die je thema niet ondersteunt, dan kun je je themacode bewerken of een Shopify Partner inhuren.

Nadat je een sectie of blok hebt toegevoegd, kun je een metaveld selecteren door op het pictogram voor dynamische bronnen te klikken:

Pictogram voor het koppelen van dynamische bron

Als je de pop-uplink voor de maattabel niet aan al je producten wilt toevoegen, moet je een nieuwe productpaginatemplate aanmaken. In de stappen maak je een nieuwe productpaginatemplate aan, maar je kunt in plaats daarvan ook een bestaande productpaginatemplate aanpassen.

Stappen:

Desktop
  1. Ga in je Shopify-beheercentrum naar Onlinewinkel > Thema's.
  2. Klik op Thema bewerken naast het thema dat je wilt aanpassen.
  3. Klik in de vervolgkeuzelijst Startpagina bovenaan de editor op Producten en klik vervolgens op ⊕ Template aanmaken om een nieuwe template aan te maken en aan te passen.
  4. Ga in de navigatiezijbalk met secties naar de blokken Template > Productinformatie en klik vervolgens op ⊕ Blok toevoegen.
  5. Klik op Pop-up.
  6. Voer in het veld Linklabel Maattabel in. Dit is de tekst die wordt weergegeven waarop een klant klikt voor de content van de pop-uppagina.
  7. Klik naast Pagina op het pictogram voor dynamische bronnen en selecteer vervolgens het metaveld voor de paginareferentie dat je hebt aangemaakt.
  8. Klik op Opslaan.
Mobiel
  1. Tik in de Shopify app op het pictogram Menu.

  2. Tik in het gedeelte Verkoopkanalen op Webshop > Alle thema's beheren.

  3. Tik op Thema bewerken voor het thema dat je wilt aanpassen.

  4. Tik in de vervolgkeuzelijst Startpagina bovenaan de editor op Producten en tik vervolgens op ⊕ Template aanmaken om een nieuwe template aan te maken en aan te passen.

  5. Ga in de navigatiezijbalk met secties naar de blokken Template > Productinformatie en tik vervolgens op ⊕ Blok toevoegen.

  6. Tik op Pop-up.

  7. Voer in het veld Linklabel Maattabel in. Dit is de tekst die wordt weergegeven waarop een klant klikt voor de content van de pop-uppagina.

  8. Tik naast Pagina op het pictogram voor dynamische bronnen en selecteer vervolgens het metaveld voor de paginareferentie dat je hebt aangemaakt.

  9. Tik op Opslaan of .

Stap 3: Een pagina toevoegen met je maattabel

Je moet een pagina aanmaken met de maattabelcontent waarnaar het metaveld verwijst. Als je al een pagina hebt aangemaakt, kun je doorgaan naar stap 4.

Stappen:

Desktop
  1. Ga in je Shopify-beheercentrum naar Onlinewinkel > Pagina's.
  2. Klik op Pagina toevoegen.
  3. Voer in het veld Titel Maattabel in en voeg de informatie over de maattabel toe in Content.
  4. Stel in de sectie Zichtbaarheid de pagina in op Zichtbaar.
  5. Klik op Opslaan.
Mobiel
  1. Tik in de Shopify app op het pictogram Menu.

  2. Tik in het gedeelte Verkoopkanalen op Webshop > Pagina's.

  3. Tik op Pagina toevoegen.

  4. Voer in het veld Titel Maattabel in en voeg de informatie over de maattabel toe in Content.

  5. Stel in de sectie Zichtbaarheid de pagina in op Zichtbaar.

  6. Tik op Opslaan of .

Je kunt zoveel maattabelpagina's aanmaken als je nodig hebt om naar te verwijzen in het metaveld. Je kunt echter maar één pagina koppelen in het productmetaveld.

Stap 4: Naar de pagina verwijzen en de producttemplate toepassen op specifieke producten

Wanneer je een paginareferentie toevoegt aan een specifiek product, wordt de informatie van die pagina alleen bij dat product weergegeven. Als je de paginareferentie leeg laat voor een product dat die producttemplate gebruikt, wordt de linktekst nog steeds als link weergegeven. De pop-up is echter leeg, zonder paginareferentie, en kan verwarrend zijn voor je klanten. Je kunt een andere productpaginatemplate gebruiken voor specifieke producttypen met maattabellen, zoals kleding of schoenen, en een producttemplate voor andere producttypen, zoals kinderspeelgoed of sieraden en andere accessoires.

Meer informatie over templates.

Stappen:

Desktop
  1. Ga in je Shopify-beheercentrum naar Producten.
  2. Klik op het product waaraan je een paginareferentie wilt toevoegen.
  3. Klik in de sectie Productmetavelden op de paginareferentie Maattabel, klik vervolgens op Pagina's selecteren en selecteer de pagina Maattabel.
  4. Selecteer in de sectie Thematemplate de productpaginatemplate Maattabel die je hebt aangemaakt in stap 2.
  5. Klik op Opslaan.
Mobiel
  1. Tik in de Shopify-app op het pictogram Producten .
  2. Tik op het product waaraan je een paginareferentie wilt toevoegen.
  3. Tik in de sectie Productmetavelden op de paginareferentie Maattabel, tik vervolgens op Pagina's selecteren en selecteer de pagina Maattabel.
  4. Selecteer in de sectie Thematemplate de productpaginatemplate Maattabel die je hebt aangemaakt in stap 2.
  5. Tik op Opslaan of .

Je kunt deze stappen herhalen voor zoveel producten als je wilt.