Cas pratique Morrowfield : du catalogue au contenu éditorial

Vous avez un catalogue Shopify et un site WordPress, et vous voulez offrir plus qu’une grille de produits. Une collection, une fiche produit et un guide d’achat peuvent présenter les mêmes références sans répéter le même contenu. Le cas Morrowfield donne un rôle distinct à chacune de ces pages : le catalogue sert à explorer, la fiche à vérifier un article, le guide à décider.

Morrowfield est une marque fictive. Ses produits, ses prix et ses textes ont été inventés pour cette démonstration ; rien ici n’est un résultat client. Les pages montrées ont toutefois été réellement produites par le plugin gratuit Fy2Press, version 1.0.0, dans un laboratoire WordPress local. Aucune boutique Shopify n’était connectée et aucun paiement n’est montré. Cette page est publiée par Pagup, l’éditeur de Fy2Press.

Plus bas : la démonstration commentée, ce qu’elle ne prouve pas et une fiche pour la reproduire sur votre site.

Que devait montrer la démonstration ?

Une seule question : un petit catalogue peut-il alimenter trois pages WordPress qui répondent chacune à une question différente du visiteur, avec la seule édition FREE ? La démonstration répond par un rendu réel, et non par une maquette, sur des données volontairement fictives.

Élément	Ce que le laboratoire a utilisé
Plugin	Fy2Press FREE 1.0.0, le paquet publié sur WordPress.org
WordPress	WordPress 7.1, PHP 8.4, thème Twenty Twenty-Five
Catalogue	6 produits fictifs dans 2 collections, Transport et Essentiels de voyage
Images	Recadrages de 3 photos Morrowfield sous droits ; aucune image générée
Shopify	Non connecté : ni jeton, ni panier, ni passage à la caisse, ni paiement

Les six produits : sac à dos Transit 24 (variantes, dont Olive), trousse de voyage Transit 24, ensemble Navetteur, gourde Field (deux formats, deux prix), pochette de rangement et sac compressible. Le catalogue reste petit à dessein : les trois photos ne montrent que ces articles.

Comment la démonstration a-t-elle été construite ?

Voici les étapes réellement exécutées dans le laboratoire.

1. Installer FREE 1.0.0 à partir du paquet de WordPress.org sur un site WordPress jetable, accessible seulement depuis l’ordinateur local et configuré pour bloquer ses propres requêtes sortantes.
2. Laisser Shopify déconnecté : les écrans du plugin affichent toujours le message d’accueil qui demande l’adresse de la boutique et un jeton public de l’API Storefront.
3. Créer le catalogue au moyen d’un script de laboratoire : six produits fictifs avec variantes et prix, deux collections et leurs étiquettes, enregistrés directement dans WordPress comme fiches produit Fy2Press. Aucune synchronisation n’a eu lieu. Sur un vrai site, ces fiches proviennent d’une synchronisation manuelle avec la boutique connectée, décrite dans Vérifier et synchroniser le catalogue.
4. Créer deux pages WordPress ordinaires avec des blocs Code court (shortcode). La page catalogue contient une phrase d’introduction, puis [fy2press_product_search], [fy2press_collection_filter], [fy2press_collection_sort] et [fy2press_products_loop]. Le guide contient deux courtes sections suivies de [fy2press_products_loop], limité à la collection Essentiels de voyage. Les fiches produit sont celles que Fy2Press génère pour chaque produit.
5. Capturer chaque écran avec un navigateur automatisé, à la largeur d’un écran d’ordinateur, en anglais et en français, sans retouche. Sur la fiche produit, la variante Olive a été sélectionnée avant la capture.

Le script a créé les pages lui-même. Elles contiennent des blocs Code court standards, ceux que vous ajoutez dans l’éditeur, mais l’étape d’édition n’a pas été capturée.

Quel rôle joue chaque page ?

La page catalogue : explorer

Le catalogue répond à une question large : qu’est-ce qui est offert ? On y voit un champ de recherche, un filtre « Collection », une commande « Trier par » et six cartes avec image, nom, prix et bouton « Voir le produit ». La gourde Field affiche une fourchette de prix, car ses deux formats n’ont pas le même prix. Selon la référence des codes courts, la recherche porte sur le titre des produits dans la version 1.0.0 : soignez les noms.

Les commandes sont visibles, mais aucun résultat filtré ou trié n’a été capturé.

À retenir : une phrase simple au-dessus de la grille dit à quoi sert la page ; les cartes n’ont pas besoin de paragraphes publicitaires.

La fiche produit : vérifier un article

La fiche répond à une question plus précise : est-ce le bon article ? Elle présente l’image, le titre, le prix, la collection (Transport), la liste « Sélectionner une variante » réglée sur Olive, la quantité, les boutons « Ajouter au panier » et « Acheter maintenant », et la description.

Personne n’a cliqué sur les boutons d’achat : sans boutique connectée, il n’y a ni panier ni passage à la caisse à montrer. Sur un site connecté, l’action d’achat mène à Shopify, où se fait le paiement, comme l’explique le guide Publier avec les blocs et les codes courts.

À retenir : gardez les comparaisons hors de la fiche, qui sert à confirmer les détails et les variantes.

Le guide d’achat : décider

Le guide répond à la question que les deux autres pages laissent ouverte : comment choisir ? Son texte propose deux étapes (commencer par un seul sac, puis regrouper les petits objets) et se termine par une grille de produits.

Il montre aussi la limite d’une démonstration courte : la première étape recommande un sac à dos, mais la grille présente la collection Essentiels de voyage, où le sac n’apparaît que dans la trousse de voyage. Sur un vrai site, placez chaque produit juste après la recommandation qu’il appuie, avec un lien direct ou le code court [fy2press_product], que la référence des codes courts documente avec l’identifiant d’un produit. Ce code court n’a pas été testé dans cette démonstration. Pour une méthode complète, consultez le dossier sur le guide d’achat WordPress.

En coulisses : les écrans de réglages

L’onglet Design regroupe les réglages globaux des cartes (colonnes, format d’image, coins, bordure, ombre) avec un aperçu en direct. Les réglages adaptatifs (Responsive controls) portent la mention PRO et n’ont pas été utilisés.

L’onglet Ajouter à mes pages propose l’éditeur WordPress (Gutenberg) ou les codes courts. La démonstration a utilisé les codes courts.

L’onglet Google et SEO demande quelle page sert de version principale d’un produit (la page WordPress ou la fiche Shopify) et quelles pages WordPress peuvent être indexées. La démonstration n’a pas vérifié ce que reçoivent les moteurs de recherche ; le guide Choisir la surface catalogue canonique explique comment le contrôler sur une page publique.

Qu’est-ce que cette démonstration ne prouve pas ?

• Une connexion Shopify réelle. Ni boutique, ni jeton, ni synchronisation. Un vrai site exige une boutique Shopify existante et son abonnement ; dans FREE, chaque synchronisation est lancée manuellement et n’est pas instantanée.
• Le paiement. Aucun panier, passage à la caisse ou commande n’a été créé. Le paiement se fait toujours sur Shopify.
• La performance. Aucune mesure de vitesse ou de charge n’a été faite.
• La compatibilité avec tous les thèmes. Un seul thème, Twenty Twenty-Five, à la largeur d’un écran d’ordinateur. Les autres thèmes, les constructeurs de pages et l’affichage sur téléphone ne sont pas montrés ici.
• Du trafic, des classements ou des ventes. Le laboratoire n’était accessible que depuis l’ordinateur local et n’avait aucun visiteur. Aucun résultat de ce type n’existe, donc aucun n’est revendiqué.
• Les fonctions PRO. Seule l’édition FREE a été utilisée.

Comment reproduire la démarche sur votre site ?

Cette fiche reprend la méthode ci-dessus. Copiez-en la structure ; elle ne demande aucune donnée privée.

1. Déclarer la nature du cas

Démonstration fictive ou cas client autorisé ? Notez l’édition et la version du plugin, la version de WordPress, le thème et l’objectif. Si les données sont fictives, dites-le sur la page elle-même.

2. Préparer le catalogue

Il faut une boutique Shopify existante, un site WordPress et le plugin FREE, idéalement sur une copie de préproduction. Connectez la boutique, choisissez la page produit principale dans l’onglet Google et SEO, puis lancez la synchronisation manuelle. Les nouvelles pages produit sont publiées directement : décidez d’abord de leur visibilité.

3. Donner un seul rôle à chaque page

• Catalogue : explorer, avec recherche, filtre, tri et grille.
• Fiche produit : vérifier, avec variantes, prix, image et description.
• Guide : décider, avec les critères d’abord, puis les produits qui répondent à chacun.

Reliez les pages selon la prochaine question du lecteur : d’une recommandation du guide vers son produit, et d’une fiche vers le guide lorsque le choix demande du contexte.

4. Vérifier avant de publier

Ouvrez les pages publiques sur un ordinateur et sur un téléphone, pas seulement l’éditeur. Comparez un produit avec Shopify (prix, variantes, disponibilité). Suivez l’action d’achat jusqu’à Shopify sans effectuer de paiement non autorisé.

5. Associer chaque affirmation à sa preuve

Affirmation envisagée	Preuve requise	Démonstration Morrowfield	Votre projet
Le catalogue s’affiche et peut être exploré	Capture du rendu réel	Montré ; résultat filtré non capturé	À remplir
La fiche présente les variantes	Test sur un produit identifié	Montré, variante Olive sélectionnée	À remplir
Les produits s’insèrent dans un guide	Éditeur et rendu public	Rendu montré ; éditeur non capturé	À remplir
La synchronisation fonctionne	Boutique autorisée et résultats	Non exécuté	À remplir
Le passage à la caisse a été atteint	Parcours d’achat autorisé	Non exécuté	À remplir
Les ventes progressent	Mesure adaptée sur une période	Non exécuté, aucune affirmation	À remplir

Ne remplissez pas les trois dernières lignes par déduction à partir des trois premières. Si aucune mesure commerciale n’existe, retirez la promesse au lieu de la remplacer par un chiffre plausible.

6. Régler les droits

Pour un vrai cas client, obtenez une autorisation écrite pour les images, les citations, le nom et la publication. Retirez de chaque capture les commandes, les données clients, les jetons, les clés de licence et les adresses privées.

Où aller ensuite ?

• Qui fait quoi entre Shopify et WordPress : vue d’ensemble.
• Construire les pages : Publier avec les blocs et les codes courts et Façonner les produits et les collections.
• Ce qui reste chez Shopify : Comprendre les données, les identifiants et les services externes.

Pour essayer ces pages avec votre propre catalogue, installez le plugin gratuit depuis WordPress.org. La version PRO est vendue séparément par l’entremise de Freemius, notre fournisseur de licences et de paiement.