Caso Morrowfield: dal catalogo all’esperienza editoriale

Hai un catalogo Shopify e un sito WordPress e vuoi qualcosa di più di una griglia di prodotti. Una collezione, una pagina prodotto e una guida all’acquisto possono usare gli stessi prodotti senza ripetere gli stessi contenuti. L’esempio Morrowfield dà a ciascuna pagina un compito diverso: il catalogo aiuta i visitatori a esplorare, la pagina prodotto li aiuta a verificare un articolo e la guida li aiuta a decidere.

Morrowfield è un marchio fittizio. I suoi prodotti, i prezzi e i testi sono stati inventati per questa dimostrazione, e nulla di ciò che segue è il risultato di un cliente. Le pagine che vedi, però, sono state davvero renderizzate dal plugin gratuito Fy2Press, versione 1.0.0, in un laboratorio WordPress locale. Nessun negozio Shopify era collegato e non viene mostrato alcun pagamento. Questa pagina è pubblicata da Pagup, l’editore di Fy2Press.

Più sotto: la demo commentata, ciò che non dimostra e una scheda per riprodurla sul tuo sito.

Che cosa doveva mostrare la dimostrazione?

Una sola domanda: un unico piccolo catalogo può alimentare tre pagine WordPress che rispondono ciascuna a una domanda diversa del visitatore, con la sola edizione FREE? La demo risponde con un rendering reale, non con un mockup, su dati volutamente fittizi.

Elemento	Cosa ha usato il laboratorio
Plugin	Fy2Press FREE 1.0.0, il pacchetto pubblicato su WordPress.org
WordPress	WordPress 7.1, PHP 8.4, tema Twenty Twenty-Five
Catalogo	6 prodotti fittizi in 2 collezioni, Carry e Travel essentials
Immagini	Ritagli di 3 fotografie Morrowfield con licenza; nessuna immagine è stata generata
Shopify	Non collegato: nessun token, nessun carrello, nessun checkout, nessun pagamento

I sei prodotti, con i nomi in inglese della demo: Transit 24 backpack (zaino, con varianti tra cui Olive), Transit 24 travel kit (kit da viaggio), Commuter studio set, Field bottle (borraccia, due formati e due prezzi), Organizer pouch (pochette organizer) e Packable sling (borsa a tracolla ripiegabile). Il catalogo resta piccolo di proposito: le tre fotografie mostrano solo questi articoli.

Come è stata costruita?

Questi sono i passaggi effettivamente eseguiti nel laboratorio.

1. Installare FREE 1.0.0 dal pacchetto di WordPress.org su un sito WordPress usa e getta, raggiungibile solo dalla macchina locale e configurato per bloccare le proprie richieste in uscita.
2. Lasciare Shopify scollegato: le schermate del plugin mostrano ancora l’avviso di benvenuto che chiede un URL del negozio e un token pubblico Storefront API.
3. Scrivere il catalogo con uno script di laboratorio: sei prodotti fittizi con varianti e prezzi, due collezioni e i relativi tag, salvati direttamente in WordPress come record di prodotto Fy2Press. Nessuna sincronizzazione è stata eseguita. Su un sito reale, questi record provengono da una sincronizzazione manuale con il negozio collegato, come descritto in Verificare e sincronizzare il catalogo.
4. Creare due normali pagine WordPress con blocchi Shortcode. La pagina di catalogo contiene un’introduzione di una frase, poi [fy2press_product_search], [fy2press_collection_filter], [fy2press_collection_sort] e [fy2press_products_loop]. La guida contiene due brevi sezioni seguite da [fy2press_products_loop], limitato alla collezione Travel essentials. Le pagine prodotto sono quelle che Fy2Press genera per ogni prodotto.
5. Catturare ogni schermata con un browser automatizzato a larghezza desktop, in inglese e in francese, senza ritocchi. Nella pagina prodotto, la variante Olive è stata selezionata prima della cattura.

Lo script ha creato le pagine da solo. Contengono blocchi Shortcode standard, gli stessi che puoi aggiungere nell’editor, ma il passaggio di modifica non è stato catturato.

Che cosa fa ciascuna pagina?

La pagina di catalogo: esplorare

Il catalogo risponde a una domanda ampia: che cosa è disponibile? La cattura mostra un campo di ricerca, un filtro Collezione, un controllo Ordina per e sei schede con immagine, nome, prezzo e pulsante Visualizza prodotto (Collection, Sort by e View Product nella cattura in inglese). La scheda della Field bottle mostra un intervallo di prezzo perché i suoi due formati hanno prezzi diversi. Secondo il riferimento degli shortcode, nella versione 1.0.0 la ricerca esamina i titoli dei prodotti, quindi nomi di prodotto chiari sono importanti.

I controlli sono visibili, ma non è stato catturato alcun risultato filtrato od ordinato.

Da tenere: una frase semplice sopra la griglia dice a che cosa serve la pagina; le schede non hanno bisogno di paragrafi promozionali.

La pagina prodotto: verificare un articolo

La pagina prodotto risponde a una domanda più precisa: è l’articolo giusto? Mostra l’immagine, il titolo, il prezzo, la collezione (Carry), un elenco Seleziona variante impostato su Olive, un campo quantità, i pulsanti Aggiungi al carrello e Acquista ora, e la descrizione (Select Variant, Add to Cart e Buy Now nella cattura in inglese).

Nessuno ha cliccato i pulsanti d’acquisto: senza un negozio collegato non c’è carrello né checkout da mostrare. Su un sito collegato, l’azione d’acquisto porta a Shopify, dove avviene il pagamento, come spiegato in Pubblicare con blocchi e shortcode.

Da tenere: lascia i confronti fuori dalla pagina prodotto, il cui compito è confermare dettagli e varianti.

La guida all’acquisto: decidere

La guida risponde alla domanda che le altre due pagine lasciano aperta: come scelgo? Il suo testo, scritto in WordPress, propone due passaggi (comincia con una sola borsa, poi tieni insieme le piccole cose) e termina con una griglia di prodotti.

Mostra anche il limite di una demo breve. Il primo passaggio consiglia uno zaino, ma la griglia mostra la collezione Travel essentials, dove lo zaino compare solo all’interno del kit da viaggio. Su un sito reale, colloca ogni prodotto subito dopo il consiglio che supporta, con un link diretto o con lo shortcode [fy2press_product], che il riferimento degli shortcode documenta con l’handle di un prodotto. Quello shortcode non è stato testato in questa demo. Per un metodo completo, vedi la risorsa sulla guida all’acquisto WordPress.

Dietro le pagine: le schermate delle impostazioni

La scheda Design raccoglie le impostazioni globali delle schede prodotto (colonne della griglia, proporzioni delle immagini, angoli, bordi, ombra) con un’anteprima dal vivo. I controlli responsive sono contrassegnati come PRO e non sono stati usati.

La scheda Aggiungi alle mie pagine propone l’editor di WordPress (Gutenberg) o gli shortcode. La demo ha usato gli shortcode.

La scheda Google e SEO chiede quale pagina è la versione principale di un prodotto (la pagina WordPress o la pagina prodotto Shopify) e quali pagine WordPress possono essere indicizzate. La demo non ha esaminato ciò che ricevono i motori di ricerca; Scegliere la superficie canonica spiega come verificarlo su una pagina pubblica.

Che cosa non dimostra questa demo?

• Una connessione reale a Shopify. Nessun negozio, nessun token e nessuna sincronizzazione. Un sito reale richiede un negozio Shopify esistente e il relativo abbonamento, e in FREE avvii ogni sincronizzazione manualmente; non è istantanea.
• Il pagamento. Non è stato creato alcun carrello, checkout od ordine. Il pagamento avviene sempre su Shopify.
• Le prestazioni. Non è stata fatta alcuna misurazione di velocità o di carico.
• Tutti i temi. Un solo tema, Twenty Twenty-Five, a larghezza desktop. Altri temi, page builder e layout su smartphone non sono mostrati qui.
• Traffico, posizionamento o vendite. Il laboratorio era raggiungibile solo dalla macchina locale e non ha avuto visitatori. Non esiste alcun risultato di questo tipo, quindi non ne viene rivendicato nessuno.
• Le funzioni PRO. È stata usata solo l’edizione FREE.

Come riprodurla sul tuo sito?

Questa scheda segue il metodo descritto sopra. Copiane la struttura; non richiede dati privati.

1. Dichiara la natura del caso

Demo fittizia o caso cliente autorizzato? Annota edizione e versione del plugin, versione di WordPress, tema e obiettivo. Se i dati sono fittizi, dillo sulla pagina stessa.

2. Prepara il catalogo

Ti servono un negozio Shopify esistente, un sito WordPress e il plugin FREE, idealmente su una copia di staging. Collega il negozio, scegli la pagina prodotto principale nella scheda Google e SEO, poi esegui la sincronizzazione manuale. Le nuove pagine prodotto vengono pubblicate direttamente, quindi decidi prima la loro visibilità.

3. Dai a ogni pagina un solo compito

• Catalogo: esplorare, con ricerca, filtro, ordinamento e griglia.
• Pagina prodotto: verificare, con varianti, prezzo, immagine e descrizione.
• Guida: decidere, prima con i criteri, poi con i prodotti che rispondono a ciascun criterio.

Collega le pagine secondo la domanda successiva del lettore: da un consiglio della guida al suo prodotto, e da un prodotto alla guida quando la scelta richiede contesto.

4. Verifica prima di pubblicare

Apri le pagine pubbliche su un computer e su uno smartphone, non solo nell’editor. Confronta un prodotto con Shopify (prezzo, varianti, disponibilità). Segui l’azione d’acquisto fino a Shopify senza completare un pagamento non autorizzato.

5. Abbina ogni affermazione alla sua prova

Affermazione che vuoi fare	Prova necessaria	Demo Morrowfield	Il tuo progetto
Il catalogo si visualizza e si può esplorare	Cattura del rendering reale	Mostrato; risultato filtrato non catturato	Da compilare
La pagina prodotto offre varianti	Test su un prodotto identificato	Mostrato, Olive selezionata	Da compilare
I prodotti compaiono all’interno di una guida	Editor e rendering pubblico	Rendering mostrato; editor non catturato	Da compilare
La sincronizzazione funziona	Negozio autorizzato e risultati	Non eseguito	Da compilare
Il checkout è stato raggiunto	Percorso d’acquisto autorizzato	Non eseguito	Da compilare
Le vendite sono aumentate	Misura adeguata su un periodo	Non eseguito, nessuna affermazione	Da compilare

Non compilare le ultime tre righe per deduzione dalle prime tre. Se non esiste alcuna misura commerciale, elimina la promessa invece di sostituirla con un numero plausibile.

6. Gestisci i diritti

Per un caso cliente reale, ottieni un’autorizzazione scritta per le immagini, le citazioni, il nome e la pubblicazione. Rimuovi da ogni screenshot ordini, dati dei clienti, token, chiavi di licenza e indirizzi privati.

Dove andare dopo?

• Chi fa cosa tra Shopify e WordPress: panoramica.
• Costruire le pagine: Pubblicare con blocchi e shortcode e Progettare prodotti e collezioni.
• Che cosa resta su Shopify: Dati, credenziali e servizi esterni.

Per provare le stesse pagine con il tuo catalogo, installa il plugin gratuito da WordPress.org. PRO è venduto separatamente tramite Freemius, il nostro fornitore di licenze e pagamenti.