Casestudy Morrowfield: van catalogus naar redactionele ervaring

Je hebt een Shopify-catalogus en een WordPress-site, en je wilt meer dan een raster met producten. Een collectie, een productpagina en een koopgids kunnen dezelfde producten gebruiken zonder dezelfde content te herhalen. Het voorbeeld Morrowfield geeft elke pagina een andere taak: de catalogus helpt bezoekers verkennen, de productpagina helpt hen één artikel te controleren, en de gids helpt hen beslissen.

Morrowfield is een fictief merk. De producten, prijzen en teksten zijn voor deze demonstratie verzonnen, en niets hier is een klantresultaat. De pagina’s die je ziet, zijn echter echt gerenderd door de gratis plugin Fy2Press, versie 1.0.0, in een lokaal WordPress-lab. Er was geen Shopify-winkel verbonden en er wordt geen betaling getoond. Deze pagina is gepubliceerd door Pagup, de uitgever van Fy2Press.

Hieronder: de toegelichte demo, wat ze niet bewijst, en een blad om haar op je eigen site na te bouwen.

Wat moest de demonstratie laten zien?

Eén vraag: kan één kleine catalogus drie WordPress-pagina’s voeden die elk een andere vraag van bezoekers beantwoorden, met alleen de FREE-editie? De demo antwoordt met een echte rendering, geen mockup, op bewust fictieve gegevens.

Onderdeel	Wat het lab gebruikte
Plugin	Fy2Press FREE 1.0.0, het pakket dat op WordPress.org is gepubliceerd
WordPress	WordPress 7.1, PHP 8.4, thema Twenty Twenty-Five
Catalogus	6 fictieve producten in 2 collecties, Carry en Travel essentials
Afbeeldingen	Uitsneden van 3 gelicentieerde Morrowfield-foto’s; er is geen afbeelding gegenereerd
Shopify	Niet verbonden: geen token, geen winkelwagen, geen afrekenen, geen betaling

De zes producten: Transit 24 backpack (met onder meer de variant Olive), Transit 24 travel kit, Commuter studio set, Field bottle (twee maten, twee prijzen), Organizer pouch en Packable sling. De catalogus is bewust klein: de drie foto’s tonen alleen deze artikelen.

Hoe is de demo gebouwd?

Dit zijn de stappen die echt in het lab zijn uitgevoerd.

1. Installeer FREE 1.0.0 uit het pakket van WordPress.org op een wegwerpsite met WordPress, alleen bereikbaar vanaf de lokale machine en zo ingesteld dat de site haar eigen uitgaande verzoeken blokkeert.
2. Laat Shopify losgekoppeld: de pluginschermen tonen nog de welkomstmelding die om een winkel-URL en een publieke Storefront API-token vraagt.
3. Schrijf de catalogus met een labscript: zes fictieve producten met varianten en prijzen, twee collecties en hun tags, rechtstreeks in WordPress opgeslagen als productrecords van Fy2Press. Er is geen synchronisatie uitgevoerd. Op een echte site komen deze records uit een handmatige synchronisatie met je verbonden winkel, zoals beschreven in Catalogus controleren en synchroniseren.
4. Maak twee gewone WordPress-pagina’s met Shortcode-blokken. De cataloguspagina bevat een inleiding van één zin, daarna [fy2press_product_search], [fy2press_collection_filter], [fy2press_collection_sort] en [fy2press_products_loop]. De gids bevat twee korte secties, gevolgd door [fy2press_products_loop], beperkt tot de collectie Travel essentials. De productpagina’s zijn de pagina’s die Fy2Press voor elk product genereert.
5. Leg elk scherm vast met een geautomatiseerde browser op desktopbreedte, in het Engels en in het Frans, zonder retoucheren. Op de productpagina is vóór de opname de variant Olive geselecteerd.

Het script heeft de pagina’s zelf aangemaakt. Ze bevatten standaard Shortcode-blokken, dezelfde die je in de editor kunt toevoegen, maar de bewerkingsstap is niet vastgelegd.

Wat doet elke pagina?

De cataloguspagina: verkennen

De catalogus beantwoordt een brede vraag: wat is er beschikbaar? De opname toont een zoekveld, een filter Collection, een keuzelijst Sort by en zes kaarten met afbeelding, naam, prijs en een knop View Product. De kaart van de Field bottle toont een prijsbereik, omdat de twee maten verschillende prijzen hebben. Volgens de shortcodereferentie doorzoekt de zoekfunctie in versie 1.0.0 de producttitels, dus duidelijke productnamen zijn belangrijk.

De besturingselementen zijn zichtbaar, maar er is geen gefilterd of gesorteerd resultaat vastgelegd.

Wat je kunt overnemen: één eenvoudige zin boven het raster zegt waarvoor de pagina dient; de kaarten hebben geen marketingalinea’s nodig.

De productpagina: één artikel controleren

De productpagina beantwoordt een smallere vraag: is dit het juiste artikel? Ze toont de afbeelding, de titel, de prijs, de collectie (Carry), een lijst Select Variant ingesteld op Olive, een veld voor het aantal, de knoppen Add to Cart en Buy Now, en de beschrijving.

Niemand heeft op de koopknoppen geklikt: zonder verbonden winkel is er geen winkelwagen of checkout om te tonen. Op een verbonden site leidt de koopactie naar Shopify, waar de betaling plaatsvindt, zoals uitgelegd in Publiceren met blokken en shortcodes.

Wat je kunt overnemen: houd vergelijkingen weg van de productpagina, want haar taak is details en varianten te bevestigen.

De koopgids: beslissen

De gids beantwoordt de vraag die de andere twee pagina’s openlaten: hoe kies ik? De tekst, geschreven in WordPress, geeft twee stappen (begin met één tas, houd daarna kleine spullen bij elkaar) en eindigt met een productraster.

De gids laat ook de grens van een korte demo zien. De eerste stap raadt een rugzak aan, maar het raster toont de collectie Travel essentials, waarin de rugzak alleen voorkomt als onderdeel van de travel kit. Plaats op een echte site elk product direct na de aanbeveling die het ondersteunt, met een directe link of met de shortcode [fy2press_product], die de shortcodereferentie documenteert met een producthandle. Die shortcode is in deze demo niet getest. Een volledige methode vind je in de bron over de WordPress-koopgids.

Achter de pagina’s: de instellingenschermen

Het tabblad Design bevat algemene kaartinstellingen (rasterkolommen, beeldverhouding, hoeken, randen, schaduw) met een live voorbeeld. De responsieve instellingen zijn met PRO gemarkeerd en zijn niet gebruikt.

Het tabblad Aan mijn pagina’s toevoegen biedt de WordPress-editor (Gutenberg) of shortcodes. De demo gebruikte shortcodes.

Het tabblad Google en SEO vraagt welke pagina de hoofdversie van een product is (de WordPress-pagina of de productpagina in Shopify) en welke WordPress-pagina’s mogen worden geïndexeerd. De demo heeft niet onderzocht wat zoekmachines ontvangen; Het canonieke oppervlak kiezen legt uit hoe je dat op een openbare pagina controleert.

Wat bewijst deze demonstratie niet?

• Een echte Shopify-verbinding. Geen winkel, geen token en geen synchronisatie. Een echte site heeft een bestaande Shopify-winkel met abonnement nodig, en in FREE start je elke synchronisatie handmatig; die gebeurt niet onmiddellijk.
• Betaling. Er is geen winkelwagen, checkout of bestelling aangemaakt. De betaling vindt altijd plaats bij Shopify.
• Prestaties. Er is geen snelheid of belasting gemeten.
• Elk thema. Eén thema, Twenty Twenty-Five, op desktopbreedte. Andere thema’s, paginabouwers en weergaven op een telefoon worden hier niet getoond.
• Verkeer, posities of verkoop. Het lab was alleen bereikbaar vanaf de lokale machine en had geen bezoekers. Zo’n resultaat bestaat niet, dus wordt het ook niet geclaimd.
• PRO-functies. Alleen de FREE-editie is gebruikt.

Hoe bouw je dit na op je eigen site?

Dit blad volgt de methode hierboven. Kopieer de structuur; er zijn geen privégegevens voor nodig.

1. Benoem de aard van de case

Fictieve demo of klantcase met toestemming? Noteer de editie en de versie van de plugin, de WordPress-versie, het thema en het doel. Zijn de gegevens fictief, zeg dat dan op de pagina zelf.

2. Bereid de catalogus voor

Je hebt een bestaande Shopify-winkel nodig, een WordPress-site en de FREE-plugin, bij voorkeur op een stagingkopie. Verbind de winkel, kies de hoofdproductpagina in het tabblad Google en SEO en voer daarna de handmatige synchronisatie uit. Nieuwe productpagina’s worden direct gepubliceerd, dus beslis eerst over hun zichtbaarheid.

3. Geef elke pagina één taak

• Catalogus: verkennen, met zoeken, filter, sorteren en een raster.
• Productpagina: controleren, met varianten, prijs, afbeelding en beschrijving.
• Gids: beslissen, met eerst de criteria en daarna de producten die elk criterium beantwoorden.

Verbind de pagina’s via de volgende vraag van de lezer: van een aanbeveling in een gids naar het product, en van een product naar de gids wanneer de keuze context nodig heeft.

4. Controleer voordat je publiceert

Open de openbare pagina’s op een computer en op een telefoon, niet alleen de editor. Vergelijk een product met Shopify (prijs, varianten, beschikbaarheid). Volg de koopactie naar Shopify zonder een niet-toegestane betaling af te ronden.

5. Koppel elke bewering aan het bewijs

Bewering die je wilt doen	Bewijs dat ervoor nodig is	Morrowfield-demo	Jouw project
De catalogus wordt getoond en kan worden verkend	Opname van de echte rendering	Getoond; gefilterd resultaat niet vastgelegd	In te vullen
De productpagina biedt varianten	Test op een benoemd product	Getoond, Olive geselecteerd	In te vullen
Producten verschijnen in een gids	Editor en openbare rendering	Rendering getoond; editor niet vastgelegd	In te vullen
De synchronisatie werkt	Winkel met toestemming en resultaten	Niet uitgevoerd	In te vullen
Het afrekenen is bereikt	Aankooptraject met toestemming	Niet uitgevoerd	In te vullen
De verkoop is gestegen	Geschikte meting over een periode	Niet uitgevoerd, geen bewering	In te vullen

Vul de laatste drie rijen niet in door ze af te leiden uit de eerste drie. Bestaat er geen commerciële meting, schrap dan de belofte in plaats van haar te vervangen door een aannemelijk getal.

6. Regel de rechten

Vraag voor een echte klantcase schriftelijke toestemming voor de afbeeldingen, citaten, naam en publicatie. Verwijder bestellingen, klantgegevens, tokens, licentiesleutels en privéadressen uit elke schermafbeelding.

Waar ga je nu heen?

• Wie wat doet tussen Shopify en WordPress: overzicht.
• De pagina’s bouwen: Publiceren met blokken en shortcodes en Producten en collecties vormgeven.
• Wat bij Shopify blijft: Gegevens, inloggegevens en externe diensten.

Wil je dezelfde pagina’s met je eigen catalogus proberen, installeer dan de gratis plugin van WordPress.org. PRO wordt apart verkocht via Freemius, onze leverancier voor licenties en betalingen.