Documentation Product Page Pro & SEO

Étapes d'installation et une référence complète pour chaque réglage, avec des exemples concrets — le même niveau de détail que notre support utilise pour aider les clients.

Afficher en Markdown

Installation

Prérequis

Magento 2.4.x. PHP 8.1–8.5. Fonctionne avec Hyvä (n'importe quel thème enfant) et Luma (le thème Magento par défaut) — le thème actif est détecté automatiquement, aucune configuration nécessaire. Sur tout autre thème le module n'a aucun effet (aucune action, comme s'il était désactivé).

Étapes d'installation

  1. Ajoutez les identifiants que vous recevrez par email à auth.json à la racine de votre projet Magento :
    { "http-basic": { "repo.codingrow.com": { "username": "...", "password": "..." } } }
  2. composer config repositories.codingrow composer https://repo.codingrow.com
  3. composer require codingrow/module-ppps
  4. bin/magento module:enable Codingrow_Ppps
  5. bin/magento setup:upgrade && bin/magento setup:di:compile
  6. Collez votre clé de licence dans Admin → Stores → Configuration → Codingrow Extensions → Product Page Pro & SEO → License → License Key, enregistrez, puis bin/magento cache:flush.
  7. bin/magento setup:static-content:deploy -f (si vous êtes en mode production).

Aucune étape de build Tailwind ni configuration du thème n'est requise : chaque règle de mise en page critique (ratios de grille, positionnement fixe, points de rupture) est du CSS pur intégré directement dans les templates du module, pas des classes utilitaires Tailwind.

Configuration

Cinq interrupteurs indépendants dans Stores → Configuration → Codingrow Extensions → Product Page Pro & SEO → General :

  • Enable column gallery on desktop — grille d'images en 2 colonnes au lieu d'une image à la fois.
  • Enable sticky buy-box on desktop — sur Hyvä, les images et la colonne prix deviennent toutes deux fixes (celle naturellement la plus courte reste épinglée en vue pendant que l'autre défile) ; la description passe sous la galerie, et ce réglage débloque les deux suivants. Sur Luma, seule la colonne prix/achat reste fixe pendant le défilement.
  • Enable repeated image strip below description — nécessite le réglage sticky buy-box ci-dessus. Affiche à nouveau toutes les images du produit dans une ligne qui se réorganise.
  • Enable simplified section titles — supprime le nom du produit répété à côté de titres comme "Description" (Hyvä uniquement).
  • Enable product SEO structured data — ajoute un bloc JSON-LD schema.org/Product (nom, image, marque, GTIN, prix, disponibilité) pour les résultats enrichis de Google, et renseigne une meta description pour les produits qui n'en ont pas. Non visuel ; sur Hyvä comme sur Luma, aussi bien sur desktop que sur mobile ; ne remplace jamais une meta description existante.

Les cinq nécessitent une licence valide ; sans elle, le module se comporte comme s'il était entièrement désactivé (mise en page par défaut du thème inchangée, aucune erreur affichée aux visiteurs de la boutique).

Product Page Pro & SEO admin configuration: the License field and the six General options, with the Merchant listings group below
OptionCe qu’elle faitDéfautNotes
Clé de licenceLa clé de licence émise pour ce domaine.—Collez-la après l’achat, puis videz le cache.
Activer la galerie en colonne sur ordinateurAffiche toutes les images du produit en même temps dans une grille à 2 colonnes au lieu d’une à la fois.OuiOrdinateur ≥ 1024px uniquement ; le mobile garde la galerie native.
Activer la colonne de prix fixe sur ordinateurGarde la colonne prix / ajouter au panier visible pendant le défilement.OuiPrérequis des deux options ci-dessous ; déplace la description sous les images.
Activer la bande d’images répétée sous la descriptionRéaffiche toutes les images, à taille fixe, dans une bande sous la description.OuiNécessite la colonne de prix fixe.
Activer les titres de section simplifiésSupprime le nom du produit répété à côté de titres comme « Description ».OuiHyvä uniquement (aucun effet sur Luma).
Activer les données structurées SEO produitAjoute un bloc JSON-LD schema.org/Product (nom, image, marque, GTIN, prix, disponibilité) pour que Google puisse afficher des résultats enrichis, et renseigne une meta description pour les produits qui n’en ont pas.OuiNon visuel ; sur Hyvä comme sur Luma, sur desktop et sur mobile. Ne remplace jamais une meta description existante.

Désinstallation

composer remove codingrow/module-ppps puis bin/magento setup:upgrade && bin/magento setup:di:compile && bin/magento cache:flush.

Guide utilisateur

Sur desktop (1024px et plus), toutes les images du produit sont affichées en même temps dans une grille à 2 colonnes au lieu de l'image unique plus bande de miniatures de Hyvä ou du slider Fotorama de Luma. Le mobile n'est jamais affecté — il conserve toujours le comportement natif de la galerie du thème (image unique, bande de miniatures balayable en dessous).

Sur Hyvä, ceci est implémenté comme un bloc additif à l'intérieur du composant galerie Alpine.js du thème lui-même, réutilisant les mêmes données d'image déjà chargées pour la galerie par défaut — aucun état JavaScript dupliqué. Sur Luma, la grille est ajoutée à côté du widget Fotorama natif (jamais modifié ni réinitialisé) ; les deux sont basculés avec du CSS pur au point de rupture desktop.

Product page on desktop with the Product Page Pro & SEO 2-column image grid and the sticky buy-box

Colonne prix fixe

Sur Hyvä : la colonne images et la colonne prix/achat deviennent toutes deux position: sticky — celle naturellement la plus courte (généralement la colonne prix, car la colonne images+description est normalement plus haute) reste épinglée en vue pendant que l'autre défile. La description passe de sa position par défaut (sous les deux colonnes) directement sous les images, à l'intérieur de cette même colonne de gauche.

Sur Luma : seule la colonne prix/achat reste visuellement fixe pendant le défilement, entre l'en-tête et la fin de la section d'information produit — la colonne images et description défile toujours normalement. Ceci est implémenté en JavaScript (transform: translateY(), recalculé à chaque défilement) plutôt qu'en CSS position: sticky, car le positionnement fixe s'est révélé peu fiable combiné à la mise en page native à deux colonnes basée sur des flottants de Luma. La description est également repositionnée directement sous les images (par défaut, Luma la place en pleine largeur sous les deux colonnes).

Nécessite le réglage sticky buy-box. Sous la description, toutes les images du produit sont affichées à nouveau à taille fixe (274×274px), se réorganisant naturellement quand l'écran se rétrécit — 3 par ligne sur une largeur desktop typique, de moins en moins par ligne au fur et à mesure que ça se rétrécit, jusqu'à 1 par ligne sur mobile. Les images ne rétrécissent en dessous de leur taille fixe que lorsque même une seule ne tient plus dans la largeur disponible.

Titres de section simplifiés

Le thème par défaut de Hyvä affiche "Description / Nom du Produit" comme titre au-dessus de l'onglet description — redondant une fois que le nom du produit est déjà mis en évidence ailleurs sur une page réorganisée. Ce réglage le remplace par un simple titre "Description". Les onglets natifs de Luma n'ont jamais eu cette répétition, donc le réglage n'a aucun effet visible là-bas.

Données structurées SEO produit

Indépendant de tout ce qui précède, et sans changement visuel. Une fois activé, chaque page produit reçoit un bloc JSON-LD schema.org/Product décrivant le produit — nom, image, marque, GTIN/EAN, ainsi qu'une Offer avec prix, devise, disponibilité et état de l'article — pour que les moteurs de recherche puissent afficher des résultats enrichis (prix et disponibilité dans la SERP, éligibilité aux fiches produits gratuites de Google). Chaque champ est rempli au mieux : tout ce que le produit n'a pas est simplement omis, jamais une erreur, et le bloc est émis de la même façon sur Hyvä et Luma, sur desktop et sur mobile.

Le même réglage renseigne aussi une meta description pour les produits qui n'en ont pas — construite à partir de la description courte/longue du produit (ou de son nom en dernier recours). Il ne touche jamais un produit qui possède déjà une meta description, il ne fait donc que combler une absence.

Fiches marchand : retours et livraison

Google lit sur la fiche produit les conditions de retour et de livraison pour les afficher dans ses fiches marchand gratuites, et la Search Console les signale comme manquantes quand elles ne sont pas là. Elles ne se déduisent pas du catalogue — ce sont des conditions commerciales — elles se déclarent donc dans la configuration, sous Merchant listings (returns and shipping). Les deux blocs sont désactivés par défaut et nécessitent les données structurées du produit.

Merchant listings group in the admin: return policy and shipping details
  • Conditions de retour → hasMerchantReturnPolicy : pays (choisis dans la liste de Magento), fenêtre de retour, nombre de jours, comment la marchandise revient, qui paie et les frais le cas échéant.
  • Conditions de livraison → shippingDetails : pays livrés, frais (0 pour la livraison gratuite), délais de préparation et de livraison en jours ouvrés.

Deux règles sont délibérées. Un bloc dont les champs obligatoires sont incomplets est écarté entièrement plutôt que publié à moitié : Google compare ce que vous déclarez avec ce que le client trouve sur votre site, une déclaration erronée vaut donc moins qu'une absente. Et avec « retours non acceptés », ni la méthode ni le payeur ne sont publiés : il n'y a pas de retour à décrire.

L'offre porte aussi validFrom, la date à partir de laquelle le prix publié s'applique : le début du prix spécial lorsqu'il y en a un, sinon la date de création du produit. Celle-ci ne demande aucune configuration.

Ces conditions valent rarement pour tout le catalogue : les délais de préparation et de livraison diffèrent entre entrepôt propre et dropshipping, la livraison dépend de l'encombrement, la fenêtre de retour de ce que l'on vend. Et le chiffre existe le plus souvent déjà sur le produit, dans un attribut que votre importateur ou votre équipe renseigne. Chacun de ces champs peut donc pointer vers un attribut produit — la liste comprend les vôtres — avec une case pour saisir un code que la liste ne propose pas. Là où le produit porte une valeur, c'est elle qui gagne ; sinon la valeur fixe demeure ; et une valeur qui n'est pas un nombre retombe sur la fixe au lieu de publier une absurdité.

The fields that take their value from a product attribute

Chaque chiffre peut venir d'un attribut produit, choisi dans la liste du catalogue : ici les délais de préparation et de livraison proviennent des attributs renseignés par un importateur.

Support Hyvä et Luma

Le thème actif est détecté automatiquement (aucune configuration nécessaire) en remontant la chaîne des thèmes parents du thème actuel à la recherche de "Hyva" ou "Luma" dans le code du thème. Sur tout thème qui n'est pas un descendant de Hyvä ou Luma, chaque plugin de ce module est garanti sans effet — la page se rend exactement comme sans le module installé, jamais d'erreur.

Licence

Une clé de licence par domaine Magento, saisie dans Stores → Configuration → Codingrow Extensions → Product Page Pro & SEO → License → License Key. La clé est vérifiée par le module, et votre boutique ne dépend pas de nos serveurs pour fonctionner : un incident chez nous ne l’arrête pas. Passer à un nouveau domaine nécessite une nouvelle clé — contactez le support avec les détails de votre achat d'origine. Votre licence couvre la version actuelle plus 1 an de mises à jour et support : les versions publiées pendant cette année restent les vôtres pour toujours, et vous renouvelez le support (−35%) pour installer les suivantes. Pour changer de domaine : le premier changement est gratuit et immédiat depuis votre espace client, puis un par an.