Een WordPress-koopgids bouwen met Shopify-producten

Misschien heb je al een WordPress-artikel dat lezers helpt kiezen. Staan de producten in je Shopify-winkel, dan kan elke aanbeveling de lezer op zoek sturen naar het juiste product. Je kunt de pagina ook andersom opbouwen: schrijf de beslissing in WordPress, houd producten, prijzen en afrekenen in Shopify, en laat een Fy2Press-component de gekozen producten uit je gesynchroniseerde catalogus tonen. Je typt geen prijzen over en onderhoudt geen tweede catalogus.

Voordat je begint, heb je een bestaande Shopify-winkel nodig (het abonnement daarvan staat los van Fy2Press), de plugin geïnstalleerd en verbonden, en een eerste synchronisatie. Deze pagina is gepubliceerd door Pagup, de uitgever van Fy2Press. Het planningssjabloon werkt met elke integratie; de namen van de componenten gelden voor Fy2Press 1.0.0. Heb je alleen één koopknop in één artikel nodig, dan kan een lichtere aanpak volstaan: zie onze gids over kiezen tussen een koopknop, een plugin en een catalogus.

Wat laat de afgeronde demogids zien?

De pagina hierboven komt uit onze Morrowfield-demonstratie. Ze heeft een titel die de situatie van de lezer benoemt, twee korte secties die uitleggen wat telt, en één shortcode die de producten van de collectie Travel essentials toont (hier alleen met het essentiële attribuut):

[fy2press_products_loop collection="travel-essentials"]

Elke kaart toont een afbeelding, een titel, een prijs en een knop View Product die de WordPress-pagina van het product opent, waar de variantkeuze en de koopacties verschijnen. De demo heeft ook grenzen: de producten zijn rechtstreeks in een lokale WordPress-testsite geschreven, niet vanuit Shopify gesynchroniseerd, dus er wordt geen winkelverbinding, winkelwagen of betaling gedemonstreerd. Op een echte site vindt de betaling altijd plaats bij Shopify.

Welke koopvraag moet de gids beantwoorden?

Begin bij de beslissing, niet bij de catalogus. Schrijf één zin die de lezer noemt en de keuze die die lezer aan het eind van de gids moet kunnen maken. “Ik pendel meerdere dagen per week met een laptop: wat moet ik meenemen?” is een beslissing. “Onze reisproducten” is een lijst.

Schrijf daarna twee tot vier criteria die het antwoord echt veranderen, zoals capaciteit, soort gebruik of prijsklasse, en benoem de behoeften die je gids niet behandelt. Elk criterium moet controleerbaar zijn in je productinformatie. Kan een aanbeveling alleen worden onderbouwd met “geweldige kwaliteit”, dan is de gids nog niet klaar.

Hoe kies je producten zonder een tweede catalogus te bouwen?

Houd alleen de producten over die een criterium beantwoorden. Elk product heeft een reden nodig om erbij te staan, en een geval waarin de lezer beter iets anders kiest.

Zorg er daarna voor dat de selectie in Shopify bestaat, waar je producten al staan. Een collectie waaraan je producten met de hand toevoegt, geeft de gids een stabiele lijst die je samen met de rest van je catalogus beheert (Shopify Helpcentrum: Collections). Controleer of de collectie en haar producten beschikbaar zijn voor het verkoopkanaal Headless dat Fy2Press leest, zoals ingesteld in Shopify veilig verbinden.

Twee feiten over Fy2Press bepalen deze stap:

• In FREE start je elke synchronisatie handmatig, en die gebeurt niet onmiddellijk. Een product dat je in Shopify aan de collectie toevoegt, kan pas na de volgende synchronisatie in de gids verschijnen.
• Nieuwe productpagina’s worden direct gepubliceerd wanneer ze worden gesynchroniseerd. Bepaal hun zichtbaarheid en voorkeursadres in Google en SEO vóór de eerste run.

Hoe deel je de secties in?

Geef elk deel van de pagina één taak:

1. Opening: de situatie van de lezer en een kort antwoord.
2. Eén sectie per behoefte: het criterium, waarom het telt, en dan het product dat het beantwoordt.
3. Vergelijking, als dat nuttig is: een korte tabel met criteria in woorden, niet in prijzen.
4. Volgende actie: waar de lezer heen kan als geen van de opties past.

De belangrijkste regel: de tekst draagt de redenering, de componenten dragen de commerciële gegevens. Prijzen, beschikbaarheid en varianten komen uit de catalogusgegevens die Fy2Press toont, dus laat ze uit je zinnen. Een prijs die in een alinea is getypt, moet je telkens met de hand corrigeren als hij in Shopify verandert.

Welke Fy2Press-component komt waar?

In Fy2Press 1.0.0 hebben blokken geen eigen instelling voor een product of een collectie; ze volgen de context van de pagina. Het tabblad Aan mijn pagina’s toevoegen vermeldt dat het blok voor de productenlus (shopipress/products-loop) op een collectiepagina de huidige collectie toont en op andere pagina’s de volledige catalogus. Voor een gekozen selectie in een artikel voeg je het WordPress-blok Shortcode toe en plak je een van deze codes, waarbij je de handle vervangt door de korte naam die Shopify gebruikt in het adres van het product of de collectie:

• Een selectie voor een sectie of de hele gids, zoals in de demo hierboven: [fy2press_products_loop collection="collection-handle"]
• Eén product in een sectie, gedocumenteerd in de referentie maar niet getoond in de demo: [fy2press_product handle="product-handle"]

Elementshortcodes zoals fy2press_product_price of fy2press_buy_now zijn ontworpen voor een productcontext, zoals een productpagina. Kopieer exacte namen uit Aan mijn pagina’s toevoegen of Hulp: openbare namen beginnen met fy2press_, en de shortcodereferentie somt hun attributen op.

Wat controleer je voordat je publiceert?

Voer een synchronisatie uit en open daarna de openbare pagina, niet alleen het voorbeeld in de editor:

• Vergelijk elk product met Shopify: titel, prijs, valuta, varianten en beschikbaarheid. In onze demo tonen de kaarten bedragen met een $-teken, terwijl de productpagina C$ toont; als je lezers valuta’s zouden kunnen verwarren, vermeld dan welke valuta geldt.
• Tel de producten. In de demo beperkte een attribuut limit="3" de gids niet tot drie: de gerenderde pagina toont alle vier producten van de collectie. Wil je bepalen wat er verschijnt, bepaal dan de inhoud van de collectie.
• Zoek naar lege plekken of plaatshouderwaarden, een teken dat een component zijn productcontext mist.
• Lees de pagina op een telefoon, zonder horizontaal te scrollen.
• Volg de koopactie naar de juiste Shopify-winkel zonder een niet-toegestane testbetaling af te ronden.
• Label fictieve gegevens of testgegevens als zodanig, en vermeld wie de producten heeft gekozen en hoe, zoals de richtlijnen van Google over nuttige, betrouwbare content die de mens centraal zet aanmoedigen.

Deze methode verkort het pad van de lezer van een aanbeveling naar een product. Op zichzelf belooft ze geen hogere verkoop of betere posities.

Welk sjabloon kun je kopiëren voor je volgende gids?

Kopieer deze opzet naar je planningsdocument. De voorbeeldrij gebruikt de fictieve Morrowfield-catalogus.

1. Beslissing

• Lezer: …
• Beslissing aan het eind van de gids: …
• Criteria die het antwoord veranderen (twee tot vier): …
• Behoeften en producten die deze gids niet behandelt: …
• Wie de producten kiest, en hoe (vermeld op de pagina): …

2. Selectie

Behoefte of lezer	Beslissend criterium	Product (handle)	Waarom, en wanneer je iets anders kiest
Een werkweek in één tas meenemen	Ruimte voor een laptop, kleding en lunch	Transit 24 backpack (transit-24-backpack)	Forenzenrugzak van 24 liter; niet nodig als de lezer alleen kleine spullen meeneemt
In te vullen	In te vullen	In te vullen	In te vullen
In te vullen	In te vullen	In te vullen	In te vullen

3. Plaatsing van de componenten

• Shopify-collectie voor deze gids (handle): …
• Collectie en producten beschikbaar voor het verkoopkanaal Headless: ja of nee
• Shortcode per sectie: …
• In de tekst getypte prijzen of voorraadniveaus: geen

4. Controle vóór publicatie

• Synchronisatie uitgevoerd op (datum): …
• Prijzen, valuta, varianten en beschikbaarheid vergeleken met Shopify: …
• Leesbaarheid op mobiel gecontroleerd bij een breedte van 320 tot 414 pixels: …
• Koopactie leidt naar de juiste Shopify-winkel: …
• Beeldrechten bevestigd, demo- of testgegevens gelabeld: …

5. Onderhoud

• Eigenaar: …
• Aanleidingen voor een update: product toegevoegd aan of verwijderd uit de collectie; wijziging van prijs, beschikbaarheid, variant of afbeelding; advies dat niet meer klopt
• Laatste echte controle, met de hand ingevuld en nooit overgenomen van een builddatum: …

Wat komt er na de publicatie?

Behandel de gids als een pagina met een onderhoudsroutine. Telkens als de collectie of haar producten in Shopify veranderen, voer je een synchronisatie uit, open je de openbare gids opnieuw en loop je de controlelijst nog eens door. PRO voegt met een actieve licentie een optie toe om de synchronisatie in te plannen; geplande runs gebeuren niet onmiddellijk en zijn afhankelijk van WP-Cron.

De Morrowfield-casestudy toont dezelfde fictieve catalogus in een collectiepagina, een productpagina en deze gids. Wil je je eigen gids bouwen, probeer dan de gratis plugin van WordPress.org en volg daarna Publiceren met blokken en shortcodes.