Een pop-up aan je productpagina's toevoegen met metavelden
Met metavelden kun je de functionaliteit en het uiterlijk van je Shopify-winkel aanpassen door gespecialiseerde informatie op te slaan die normaal gesproken niet wordt vastgelegd in het Shopify-beheercentrum. Je kunt metavelden intern gebruiken in het Shopify-beheercentrum en je kunt er ook voor kiezen om ze weer te geven in de webshop.
Met metavelden kun je een paginareferentie toevoegen aan een pop-upblok met een link op je productpagina's. Wanneer er op de link wordt geklikt, verschijnt een pop-up die de content van je pagina laat zien. Je kunt afbeeldingen en andere media toevoegen met behulp van de RTF-editor voor je pagina's.
Hieronder zie je enkele voorbeelden van pop-upinformatie die je aan je productpagina's kunt toevoegen:
- Maattabellen
- Verzorgingsinstructies
- Montage-instructies
- Productspecificaties
- Veelgestelde vragen
Dit is een 4-stapstutorial die metavelden voor paginareferentie introduceert, een productmetaveld maakt voor een paginareferentie, een productpaginatemplate maakt voor je webshop, een nieuwe pagina toevoegt, in specifieke producten naar de pagina verwijst, en de productpaginatemplate op specifieke producten toevoegt.
Als je een Online Store 2.0-thema hebt, kun je de meeste metavelden met de themabewerker aan je thema koppelen. Als je een vintage thema gebruikt of als je metaveldtypen wilt toevoegen die niet worden ondersteund door het thema, kun je de themacode bewerken of een Shopify-partner inhuren om je te helpen.
Op deze pagina
Stap 1: Een productmetaveld aanmaken voor een pagina
Maak eerst een metavelddefinitie voor de paginareferentie voor je productpagina's. Het productmetaveld heeft een link naar een specifieke pagina en kan voor elk product worden aangepast. Als je geen paginareferentie toevoegt aan een product dat dezelfde template gebruikt, wordt de tekst van de pop-uplink nog steeds weergegeven alsof er content is. Om de pop-uplink alleen voor specifieke producten weer te geven, kun je een producttemplate aanmaken en die alleen toepassen op relevante producten.
Met de metavelden paginareferentie kun je verschillende productgegevens weergeven door verschillende pagina's voor verschillende soorten producten te maken. Je kunt bijvoorbeeld twee verschillende maattabelpagina's maken voor twee verschillende leeftijdsgroepen, zoals een maattabel voor peuters en een maattabel voor baby's, en vervolgens kun je de paginareferentie voor peutermaten alleen toevoegen aan producten die bestemd zijn voor peuters.
Je moet een metavelddefinitie maken voor een paginareferentie om deze te verbinden met het pop-upblok in je themabewerker. Webshoptoegang is standaard geselecteerd als je je metavelddefinitie aanmaakt.
Stappen:
- Ga vanuit het Shopify-beheercentrum naar Instellingen > Aangepaste gegevens.
- Klik in de sectie Metavelddefinities op Producten.
- Klik op Definitie toevoegen.
- Geef de metavelddefinitie in het veld Naam een naam. Als je bijvoorbeeld een maattabel maakt, kun je de definitie de naam Maattabel geven.
- Klik op ⊕ Type selecteren.
- Selecteer Pagina in het vervolgkeuzemenu. Eén pagina is standaard geselecteerd.
- Klik op Opslaan.
- Tik in de Shopify-app op ... > Instellingen.
- Tik op Aangepaste gegevens.
- Tik in de sectie Metavelddefinities op Producten.
- Tik op +.
- Geef de definitie een naam. Als je bijvoorbeeld een maattabel maakt, kun je de definitie de naam Maattabel geven.
- Tik op + Type selecteren.
- Tik om Pagina te selecteren in de vervolgkeuzelijst. Eén pagina is standaard geselecteerd.
- Tik op Opslaan.
- Tik in de Shopify-app op ☰ > Instellingen.
- Tik op Aangepaste gegevens.
- Tik in de sectie Metavelddefinities op Producten.
- Tik op +.
- Geef de definitie een naam. Als je bijvoorbeeld een maattabel maakt, kun je de definitie de naam Maattabel geven.
- Tik op + Type selecteren.
- Tik om Pagina te selecteren in de vervolgkeuzelijst. Eén pagina is standaard geselecteerd.
- Tik op ✓ om op te slaan.
Stap 2: Een template aanmaken voor je productpagina
Als je een thema Onlinewinkel 2.0 hebt, kun je de paginareferentie verbinden met je thema met behulp van de themabewerker. Als je een thema voor metavelden gebruikt of als je metaveldtypen wilt toevoegen die je thema niet ondersteunt, 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 van de dynamische bron te klikken:
Maak een nieuwe template voor de productpagina als je het pop-upblok niet aan al je producten wil toevoegen. In de stappen maak je een nieuwe template voor de productpagina, maar je kunt ook een bestaande template voor de productpagina kiezen om in plaats daarvan aan te passen.
Stappen:
- Ga in het Shopify-beheercentrum naar Webshop > Thema's.
- Klik op Aanpassen naast het thema dat je wilt aanpassen.
- Klik in de vervolgkeuzelijst Homepage bovenaan de editor op Producten en dan op ⊕ Template aanmaken om een nieuwe template aan te maken en aan te passen.
- Ga in de navigatiezijbalk Secties naar de blokken Template > Productgegevens en klik dan op ⊕ Blok toevoegen
- Klik op Pop-up.
- Voer een Link-label in. Dit is de tekst die laat zien waar een klant op klikt voor de pop-uppagina-content. Als de pop-uppagina bijvoorbeeld een maattabel is, is het misschien handig om van het link-label Maattabel te maken.
- Klik naast Pagina op het pictogram voor dynamische bron en klik vervolgens om het metaveld paginareferentie dat je hebt gemaakt te selecteren.
- Klik op Opslaan.
- Tik in de Shopify-app op ... > Webshop.
- Tik op Alle thema's beheren.
- Tik op Aanpassen naast het thema dat je wil aanpassen.
- Tik in het vervolgkeuzelijst Homepage bovenaan de editor op Producten en vervolgens op ⊕ Template aanmaken om een nieuwe template te maken en aan te passen.
- Ga in de navigatiezijbalk Secties naar de blokken Template > Productgegevens en tik dan op ⊕ Blok toevoegen
- Tik op Pop-up.
- Voer een Link-label in. Dit is de tekst die laat zien waar een klant op klikt voor de pop-uppagina-content. Als de pop-uppagina bijvoorbeeld een maattabel is, is het misschien handig om van het link-label Maattabel te maken.
- Tik naast Pagina op het pictogram voor dynamische bron, en tik vervolgens om het metaveld paginareferentie dat je hebt aangemaakt te selecteren.
- Tik op Opslaan.
- Tik in de Shopify-app op ☰ > Webshop.
- Tik op Alle thema's beheren.
- Tik op Aanpassen naast het thema dat je wil aanpassen.
- Tik in het vervolgkeuzelijst Homepage bovenaan de editor op Producten en vervolgens op ⊕ Template aanmaken om een nieuwe template te maken en aan te passen.
- Ga in de navigatiezijbalk Secties naar de blokken Template > Productgegevens en tik dan op ⊕ Blok toevoegen
- Tik op Pop-up.
- Voer een Link-label in. Dit is de tekst die laat zien waar een klant op klikt voor de pop-uppagina-content. Als de pop-uppagina bijvoorbeeld een maattabel is, is het misschien handig om van het link-label Maattabel te maken.
- Tik naast Pagina op het pictogram voor dynamische bron, en tik vervolgens om het metaveld paginareferentie dat je hebt aangemaakt te selecteren.
- Tik op ✓ om je thema op te slaan.
Stap 3: Een pagina toevoegen met je productgegevens
Maak een pagina aan met content die door het metaveld wordt gebruikt. Als je al een pagina hebt gemaakt, kun je verder met stap 4.
Stappen:
- Ga in het Shopify-beheercentrum naar Webshop > Pagina's.
- Klik op Pagina toevoegen.
- Geef je pagina een naam en maak de content die je wil weergeven aan in een pop-up op je productpagina.
- Stel in de sectie Zichtbaarheid de pagina in als Zichtbaar.
- Klik op Opslaan.
- Tik in de Shopify-app op ... > Webshop.
- Tik op Pagina's.
- Tik op Pagina toevoegen.
- Geef je pagina een naam en maak de content die je wil weergeven aan in een pop-up op je productpagina.
- Stel in de sectie Zichtbaarheid de pagina in als Zichtbaar.
- Tik op Opslaan.
- Tik in de Shopify-app op ☰ > Webshop.
- Tik op Pagina's.
- Tik op Pagina toevoegen.
- Geef je pagina een naam en maak de content die je wil weergeven aan in een pop-up op je productpagina.
- Stel in de sectie Zichtbaarheid de pagina in als Zichtbaar.
- Tik op ✓ om op te slaan.
Je kunt in het metaveld zoveel pagina's maken als je nodig hebt om naar te verwijzen. Je kunt echter maar één link naar de pagina in het productmetaveld zetten.
Stap 4: De pagina refereren en de producttemplate toepassen op specifieke producten
Wanneer je een paginareferentie aan een specifiek product toevoegt, wordt de informatie op die pagina alleen met dat product weergegeven. Als je de paginareferentie leeg laat voor een product dat die producttemplate gebruikt, wordt de linktekst nog steeds als een link weergegeven. De pop-up is echter leeg en heeft geen paginareferentie, wat verwarring kan veroorzaken voor je klanten. In dit geval kun je een andere productpaginatemplate gebruiken voor specifieke producttypen. Je kunt bijvoorbeeld een producttemplate voor kleding maken met de pagina maattabel in je pop-upblok, en vervolgens kun je een producttemplate maken voor tassen waarbij je het pop-upblok niet hoeft toe te voegen.
Meer informatie over templates.
Stappen:
- Ga vanaf je Shopify-beheercentrum naar Producten.
- Klik op het product waar je een paginareferentie aan toe wil voegen.
- Klik in de sectie Productmetavelden op het metaveld paginareferentie dat je hebt aangemaakt, en dan op Pagina's selecteren.
- Selecteer de pagina die je hebt aangemaakt in het vervolgkeuzemenu.
- Selecteer in de sectie Thema-template de template voor de productpagina die je in stap 2 hebt aangemaakt.
- Klik op Opslaan.
- Ga vanuit de Shopify-app naar Producten > Alle producten.
- Tik op het product waar je een paginareferentie aan toe wil voegen.
- Tik in de sectie Metavelden op Alles bekijken.
- Tik op het metaveld paginareferentie dat je hebt aangemaakt en tik vervolgens om de pagina te selecteren die je hebt aangemaakt.
- Selecteer in de sectie Thema-template de template voor de productpagina die je in stap 2 hebt aangemaakt.
- Tik op Opslaan.
- Ga vanuit de Shopify-app naar Producten > Alle producten.
- Tik op het product waar je een paginareferentie aan toe wil voegen.
- Tik in de sectie Metavelden op Alles bekijken.
- Tik op het metaveld paginareferentie dat je hebt aangemaakt en tik vervolgens om de pagina te selecteren die je hebt aangemaakt.
- Selecteer in de sectie Thema-template de template voor de productpagina die je in stap 2 hebt aangemaakt.
- Tik op ✓ om op te slaan.
Je kunt deze stappen voor zoveel producten herhalen als je nodig hebt.