À retenir
- Dans l’Éditeur de thème, faites glisser les blocs dans la section Produit principal pour les réorganiser.
- Vous pouvez ajouter des sections sous la zone principale du produit pour du contenu tel que les avis, la FAQ ou les produits associés.
- Créez des modèles de page produit personnalisés pour des produits ou collections spécifiques.
- Pour des mises en page qui vont au-delà de ce que propose l’Éditeur de thème, utilisez Fudge.
Une page produit bien agencée place la bonne information devant les acheteurs au bon moment dans leur processus de décision. Déplacer un bloc de garantie, changer l’emplacement de la description ou créer un layout entièrement personnalisé peut faire une vraie différence sur vos conversions.
Pourquoi vous pouvez nous faire confiance
Nous avons travaillé sur l’optimisation de pages produit avec des centaines de marques Shopify. Nous avons également créé Fudge — un éditeur de vitrine IA noté 5,0 sur le Shopify App Store.
Comment réorganiser les blocs sur la page produit Shopify
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Accédez à n’importe quelle page produit en utilisant le sélecteur de page en haut.
Étape 3. Dans la barre latérale gauche, trouvez la section Produit principal et cliquez dessus pour développer la liste des blocs.
Étape 4. Vous verrez les blocs listés dans l’ordre : généralement Titre, Prix, Sélecteur de variante, Sélecteur de quantité, Ajouter au panier, Description. Faites glisser les poignées à côté de chaque bloc pour les réorganiser.
Étape 5. Enregistrez.
Les réorganisations courantes qui améliorent la conversion :
Sur le même sujet : Déplacer des blocs dans une section Shopify.
Sur le même sujet : Personnaliser votre page produit Shopify.
- Remontez la preuve sociale (résumé des avis ou note par étoiles), plus près du titre
- Placez le texte de garantie juste en dessous du bouton d’ajout au panier
- Descendez la description si vous voulez que le bouton d’ajout au panier (ATC) soit visible sans scroller
- Déplacez un bloc guide des tailles ou informations sur la coupe juste au-dessus du sélecteur de variantes
Ajouter de nouveaux blocs à la page produit
Étape 1. Dans l’Éditeur de thème, accédez à une page produit.
Étape 2. Dans la barre latérale gauche, à l’intérieur de la section Produit principal, cliquez sur Ajouter un bloc.
Étape 3. Choisissez parmi les types de blocs de votre thème. Options courantes : Texte, Texte enrichi, Ligne réductible, Image, Évaluation, HTML personnalisé.
Étape 4. Configurez le contenu du bloc et positionnez-le en le faisant glisser.
Étape 5. Enregistrez.
Ajouter des sections sous la zone principale du produit
Au-delà du panneau de produit lui-même, vous pouvez ajouter des sections pleine largeur en dessous.
Étape 1. Scrollez vers le bas au-delà de la section Produit principal dans la barre latérale gauche.
Étape 2. Cliquez sur Ajouter une section (généralement en bas de la liste des sections).
Étape 3. Choisissez un type de section - ajouts courants sous les pages produits : Avis produits, Produits associés, Récemment vus, Texte enrichi, FAQ/accordéon.
Étape 4. Positionnez et configurez.
Étape 5. Enregistrez.
Créer un modèle de page produit personnalisé
Si vous voulez une mise en page différente pour certains produits - une page de vente format long pour votre produit phare, un layout minimaliste pour des produits simples - vous pouvez créer des modèles personnalisés.
Étape 1. Allez dans Boutique en ligne > Thèmes > Actions > Modifier le code.
Étape 2. Dans le dossier templates/, trouvez product.json.
Étape 3. Cliquez sur le menu à trois points à côté et sélectionnez Ajouter une copie. Nommez-la product.hero.json ou de manière similaire.
Étape 4. Allez dans l’Éditeur de thème. Naviguez vers une page produit. En bas à gauche, vous verrez un menu déroulant Modèle (Template) - sélectionnez votre nouveau modèle.
Étape 5. Personnalisez ce modèle indépendamment de celui par défaut. Les modifications apportées à product.hero.json n’affectent que les produits utilisant ce modèle.
Étape 6. Dans l’interface d’administration Shopify, ouvrez un produit > scrollez jusqu’à la section Modèles de thème > attribuez le modèle personnalisé.
Sur le même sujet : Ajouter un modèle personnalisé dans Shopify.
Sur le même sujet : Ajouter une vidéo à une galerie de produits Shopify.
Modèles de mise en page produit courants
Layout e-commerce standard : Images (gauche) / Titre, prix, variantes, ATC, garantie, description (droite)
Layout page de vente format long : Image hero pleine largeur, histoire du produit, blocs de fonctionnalités, témoignages, ATC, FAQ
Layout minimaliste/épuré : Grande image, titre, prix, ATC uniquement - tout le reste est réduit ou supprimé
Layout à onglets : Informations principales visibles, description / entretien / ingrédients / caractéristiques dans des onglets en dessous
Aller plus loin que l’Éditeur de thème avec Fudge
L’éditeur de thème vous limite à la bibliothèque de sections de votre thème. Si vous souhaitez une mise en page impossible à réaliser en drag-and-drop, Fudge peut s’en charger.
Exemples de prompts :
-
“Crée un modèle de page produit sur mesure pour notre produit phare : image hero sticky en pleine largeur, panneau d’infos scrollable à droite, section avec les fonctionnalités clés en dessous, grille de témoignages et bouton d’ajout au panier sticky.”
-
“Restructure notre page produit pour que la description apparaisse dans une section à trois onglets : Aperçu, Ingrédients, Instructions d’entretien.”
Fudge génère le code Liquid sous forme de brouillon dans votre thème. Vous vérifiez avant de publier.
FAQ
Quel est le meilleur ordre des blocs sur une page produit Shopify ?
Un ordre courant testé pour la conversion : galerie d’images → titre → aperçu des avis → prix → sélecteur de variantes → quantité → ajout au panier → bandeau de réassurance → description courte → description détaillée déroulante. Mettez en avant la preuve sociale et l’action d’achat ; repoussez le contenu long plus bas. Testez sur votre boutique avec votre propre trafic — l’ordre idéal varie selon la catégorie.
Les images doivent-elles être à gauche ou à droite du bloc d’achat ?
Les images à gauche et le bloc d’achat à droite correspondent au sens de lecture occidental standard et convertissent légèrement mieux dans la plupart des tests A/B. Certaines marques de vêtement et lifestyle inversent cela pour des raisons de design. Restez cohérent sur l’ensemble de vos produits — un changement au milieu du catalogue est perturbant pour les clients réguliers.
Puis-je organiser les blocs de la page produit différemment sur mobile et sur desktop ?
Pas via l’éditeur de thème standard — l’ordre des blocs est partagé sur tous les viewports. La solution la plus propre : décrivez l’ordre spécifique au mobile à Fudge et il écrira les surcharges CSS order ciblées dans une media query mobile. Schéma courant : le bloc d’achat au-dessus de la description sur desktop, et en dessous sur mobile (pour que la galerie occupe le premier viewport).
Dois-je ajouter une barre d’ajout au panier sticky ?
Oui, pour les pages produits où les acheteurs scrollent sous le bouton d’achat principal pour lire les détails. Une barre sticky (affichant le nom du produit, le prix et l’ajout au panier) augmente généralement la conversion de 5 à 15 % sur les pages produits longues. Restez minimaliste — les barres sticky trop imposantes sont perçues comme intrusives et peuvent masquer le contenu sur mobile.
Les avis au-dessus ou en dessous du bouton d’ajout au panier convertissent-ils mieux ?
L’aperçu des étoiles près du titre (au-dessus du bouton d’ajout) fonctionne le mieux — c’est un signal de confiance rapide au moment de la décision. Le contenu complet des avis doit se trouver sous le bouton d’ajout ou dans une section déroulante. Ne mettez pas un mur d’avis entier au-dessus du bouton d’achat ; cela repousse l’action en dessous de la ligne de flottaison et nuit à la conversion.
À lire aussi : Fudge Page Builder.