Morrowfield-Fallstudie: vom Katalog zum redaktionellen Erlebnis

Sie haben einen Shopify-Katalog und eine WordPress-Website und möchten mehr als ein Produktraster. Eine Kollektion, eine Produktseite und ein Kaufratgeber können dieselben Produkte nutzen, ohne dieselben Inhalte zu wiederholen. Das Morrowfield-Beispiel gibt jeder Seite eine andere Aufgabe: Der Katalog hilft beim Entdecken, die Produktseite hilft, einen Artikel zu prüfen, und der Ratgeber hilft bei der Entscheidung.

Morrowfield ist eine fiktive Marke. Ihre Produkte, Preise und Texte wurden für diese Demonstration erfunden, und nichts hier ist ein Kundenergebnis. Die gezeigten Seiten wurden jedoch tatsächlich vom kostenlosen Plugin Fy2Press, Version 1.0.0, in einem lokalen WordPress-Labor dargestellt. Es war kein Shopify-Shop verbunden, und es wird keine Zahlung gezeigt. Diese Seite wird von Pagup veröffentlicht, dem Herausgeber von Fy2Press.

Im Folgenden: die kommentierte Demo, was sie nicht beweist, und ein Arbeitsblatt, um sie auf Ihrer eigenen Website nachzubauen.

Was sollte die Demonstration zeigen?

Eine einzige Frage: Kann ein kleiner Katalog drei WordPress-Seiten speisen, die jeweils eine andere Frage der Besucher beantworten, und zwar nur mit der FREE-Edition? Die Demo antwortet mit einer echten Darstellung, nicht mit einem Mockup, auf bewusst fiktiven Daten.

Element	Was das Labor verwendet hat
Plugin	Fy2Press FREE 1.0.0, das auf WordPress.org veröffentlichte Paket
WordPress	WordPress 7.1, PHP 8.4, Theme Twenty Twenty-Five
Katalog	6 fiktive Produkte in 2 Kollektionen, Carry und Travel essentials
Bilder	Ausschnitte aus 3 lizenzierten Morrowfield-Fotos; kein Bild wurde generiert
Shopify	Nicht verbunden: kein Token, kein Warenkorb, kein Checkout, keine Zahlung

Die sechs Produkte, mit ihren Namen aus der englischen Demo: Transit 24 backpack (Rucksack, mit Varianten, darunter Olive), Transit 24 travel kit (Reiseset), Commuter studio set (Pendler-Set), Field bottle (Trinkflasche, zwei Größen, zwei Preise), Organizer pouch (Organizer-Tasche) und Packable sling (faltbare Umhängetasche). Der Katalog bleibt absichtlich klein: Die drei Fotos zeigen nur diese Artikel.

Wie wurde sie aufgebaut?

Dies sind die Schritte, die im Labor tatsächlich ausgeführt wurden.

1. FREE 1.0.0 aus dem Paket von WordPress.org auf einer Wegwerf-Website mit WordPress installieren, die nur vom lokalen Rechner aus erreichbar und so konfiguriert war, dass sie ihre eigenen ausgehenden Anfragen blockiert.
2. Shopify getrennt lassen: Die Plugin-Ansichten zeigen weiterhin den Begrüßungshinweis, der nach einer Shop-URL und einem öffentlichen Token der Storefront API fragt.
3. Den Katalog mit einem Laborskript anlegen: sechs fiktive Produkte mit Varianten und Preisen, zwei Kollektionen und ihre Tags, direkt in WordPress als Fy2Press-Produkteinträge gespeichert. Es lief keine Synchronisierung. Auf einer echten Website stammen diese Einträge aus einer manuellen Synchronisierung mit Ihrem verbundenen Shop, wie in Katalog prüfen und synchronisieren beschrieben.
4. Zwei gewöhnliche WordPress-Seiten mit Shortcode-Blöcken erstellen. Die Katalogseite enthält einen einleitenden Satz, dann [fy2press_product_search], [fy2press_collection_filter], [fy2press_collection_sort] und [fy2press_products_loop]. Der Ratgeber enthält zwei kurze Abschnitte, gefolgt von [fy2press_products_loop], beschränkt auf die Kollektion Travel essentials. Die Produktseiten sind die, die Fy2Press für jedes Produkt erzeugt.
5. Jede Ansicht mit einem automatisierten Browser in Desktop-Breite aufnehmen, auf Englisch und auf Französisch, ohne Nachbearbeitung. Auf der Produktseite wurde vor der Aufnahme die Variante Olive ausgewählt.

Das Skript hat die Seiten selbst erstellt. Sie enthalten gewöhnliche Shortcode-Blöcke, dieselben, die Sie im Editor hinzufügen können, aber der Bearbeitungsschritt wurde nicht aufgezeichnet.

Was leistet jede Seite?

Die Katalogseite: entdecken

Der Katalog beantwortet eine weit gefasste Frage: Was ist verfügbar? Die Aufnahme zeigt ein Suchfeld, einen Filter Collection, eine Auswahl Sortieren nach (in der Aufnahme: Sort by) und sechs Karten mit Bild, Name, Preis und der Schaltfläche Produkt ansehen (in der Aufnahme: View Product). Die Karte der Field bottle zeigt eine Preisspanne, weil ihre zwei Größen unterschiedliche Preise haben. Laut der Shortcode-Referenz durchsucht die Suche in Version 1.0.0 die Produkttitel; klare Produktnamen sind daher wichtig.

Die Steuerelemente sind sichtbar, aber es wurde kein gefiltertes oder sortiertes Ergebnis aufgenommen.

Was Sie übernehmen sollten: Ein schlichter Satz über dem Raster sagt, wofür die Seite da ist; die Karten brauchen keine Werbeabsätze.

Die Produktseite: einen Artikel prüfen

Die Produktseite beantwortet eine engere Frage: Ist das der richtige Artikel? Sie zeigt Bild, Titel, Preis, Kollektion (Carry), eine Liste Variante auswählen (in der Aufnahme: Select Variant), auf Olive gesetzt, ein Mengenfeld, die Buttons In den Warenkorb und Jetzt kaufen (in der Aufnahme: Add to Cart und Buy Now) sowie die Beschreibung.

Niemand hat auf die Kauf-Buttons geklickt: Ohne verbundenen Shop gibt es weder Warenkorb noch Checkout zu zeigen. Auf einer verbundenen Website führt die Kaufaktion zu Shopify, wo die Zahlung erfolgt, wie in Mit Blöcken und Shortcodes publizieren erklärt.

Was Sie übernehmen sollten: Lassen Sie Vergleiche aus der Produktseite heraus; ihre Aufgabe ist es, Details und Varianten zu bestätigen.

Der Kaufratgeber: entscheiden

Der Ratgeber beantwortet die Frage, die die beiden anderen Seiten offenlassen: Wie wähle ich? Sein in WordPress geschriebener Text nennt zwei Schritte (mit einer einzigen Tasche beginnen, dann kleine Dinge zusammenhalten) und endet mit einem Produktraster.

Er zeigt auch die Grenze einer kurzen Demo. Der erste Schritt empfiehlt einen Rucksack, aber das Raster zeigt die Kollektion Travel essentials, in der der Rucksack nur im Reiseset vorkommt. Platzieren Sie auf einer echten Website jedes Produkt direkt nach der Empfehlung, die es stützt, mit einem direkten Link oder dem Shortcode [fy2press_product], den die Shortcode-Referenz mit einem Produkt-Handle dokumentiert. Dieser Shortcode wurde in dieser Demo nicht getestet. Eine vollständige Methode finden Sie in der Ressource zum WordPress-Kaufratgeber.

Hinter den Seiten: die Einstellungsansichten

Der Reiter Design enthält globale Karteneinstellungen (Rasterspalten, Bildverhältnis, Ecken, Rahmen, Schatten) mit einer Live-Vorschau. Responsive Einstellungen (in der Aufnahme: Responsive controls) sind mit PRO gekennzeichnet und wurden nicht verwendet.

Der Reiter Zu meinen Seiten hinzufügen bietet den WordPress-Editor (Gutenberg) oder Shortcodes an. Die Demo hat Shortcodes verwendet.

Der Reiter Google und SEO fragt, welche Seite die Hauptversion eines Produkts ist (die WordPress-Seite oder die Shopify-Produktseite) und welche WordPress-Seiten indexiert werden dürfen. Die Demo hat nicht geprüft, was Suchmaschinen erhalten; Kanonische Katalogfläche wählen erklärt, wie Sie das auf einer öffentlichen Seite prüfen.

Was beweist diese Demonstration nicht?

• Eine echte Shopify-Verbindung. Kein Shop, kein Token und keine Synchronisierung. Eine echte Website braucht einen bestehenden Shopify-Shop mit Abonnement, und in FREE starten Sie jede Synchronisierung manuell; sie erfolgt nicht sofort.
• Die Zahlung. Es wurden weder Warenkorb noch Checkout noch Bestellung erstellt. Die Zahlung erfolgt immer bei Shopify.
• Die Performance. Es wurde keine Geschwindigkeits- oder Lastmessung durchgeführt.
• Jedes Theme. Ein einziges Theme, Twenty Twenty-Five, in Desktop-Breite. Andere Themes, Page Builder und Smartphone-Layouts werden hier nicht gezeigt.
• Traffic, Rankings oder Verkäufe. Das Labor war nur vom lokalen Rechner aus erreichbar und hatte keine Besucher. Ein solches Ergebnis gibt es nicht, also wird keines behauptet.
• PRO-Funktionen. Es wurde nur die FREE-Edition verwendet.

Wie können Sie das auf Ihrer eigenen Website nachbauen?

Dieses Arbeitsblatt folgt der obigen Methode. Übernehmen Sie seine Struktur; es benötigt keine privaten Daten.

1. Die Art des Falls angeben

Fiktive Demo oder genehmigter Kundenfall? Notieren Sie Edition und Version des Plugins, die WordPress-Version, das Theme und das Ziel. Wenn die Daten fiktiv sind, sagen Sie das auf der Seite selbst.

2. Den Katalog vorbereiten

Sie brauchen einen bestehenden Shopify-Shop, eine WordPress-Website und das FREE-Plugin, idealerweise auf einer Staging-Kopie. Verbinden Sie den Shop, wählen Sie im Reiter Google und SEO die Hauptproduktseite und starten Sie dann die manuelle Synchronisierung. Neue Produktseiten werden direkt veröffentlicht; entscheiden Sie daher zuerst über ihre Sichtbarkeit.

3. Jeder Seite eine Aufgabe geben

• Katalog: entdecken, mit Suche, Filter, Sortierung und Raster.
• Produktseite: prüfen, mit Varianten, Preis, Bild und Beschreibung.
• Ratgeber: entscheiden, zuerst mit Kriterien, dann mit den Produkten, die jedes Kriterium erfüllen.

Verknüpfen Sie die Seiten entlang der nächsten Frage der Leser: von einer Empfehlung im Ratgeber zu ihrem Produkt und von einem Produkt zum Ratgeber, wenn die Wahl Kontext braucht.

4. Vor der Veröffentlichung prüfen

Öffnen Sie die öffentlichen Seiten auf einem Computer und auf einem Smartphone, nicht nur im Editor. Vergleichen Sie ein Produkt mit Shopify (Preis, Varianten, Verfügbarkeit). Folgen Sie der Kaufaktion bis zu Shopify, ohne eine nicht autorisierte Zahlung abzuschließen.

5. Jede Aussage mit ihrem Nachweis verbinden

Aussage, die Sie machen möchten	Erforderlicher Nachweis	Morrowfield-Demo	Ihr Projekt
Der Katalog wird angezeigt und lässt sich erkunden	Aufnahme der echten Darstellung	Gezeigt; gefiltertes Ergebnis nicht aufgenommen	Auszufüllen
Die Produktseite bietet Varianten	Test an einem benannten Produkt	Gezeigt, Olive ausgewählt	Auszufüllen
Produkte erscheinen in einem Ratgeber	Editor und öffentliche Darstellung	Darstellung gezeigt; Editor nicht aufgenommen	Auszufüllen
Die Synchronisierung funktioniert	Genehmigter Shop und Ergebnisse	Nicht durchgeführt	Auszufüllen
Der Checkout wurde erreicht	Genehmigter Kaufweg	Nicht durchgeführt	Auszufüllen
Die Verkäufe sind gestiegen	Geeignete Messung über einen Zeitraum	Nicht durchgeführt, keine Aussage	Auszufüllen

Füllen Sie die letzten drei Zeilen nicht durch Ableitung aus den ersten drei aus. Wenn keine kommerzielle Messung vorliegt, streichen Sie das Versprechen, statt es durch eine plausible Zahl zu ersetzen.

6. Die Rechte klären

Holen Sie für einen echten Kundenfall eine schriftliche Genehmigung für Bilder, Zitate, Namen und Veröffentlichung ein. Entfernen Sie Bestellungen, Kundendaten, Tokens, Lizenzschlüssel und private Adressen aus jedem Screenshot.

Wie geht es weiter?

• Wer zwischen Shopify und WordPress was übernimmt: Überblick.
• Die Seiten bauen: Mit Blöcken und Shortcodes publizieren und Produkte und Kollektionen gestalten.
• Was bei Shopify bleibt: Daten, Zugangsdaten und externe Dienste.

Um dieselben Seiten mit Ihrem eigenen Katalog auszuprobieren, installieren Sie das kostenlose Plugin von WordPress.org. PRO wird separat über Freemius verkauft, unseren Anbieter für Lizenzen und Zahlungen.