Points clés
- 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 comme des avis, une FAQ ou des produits associés.
- Créez des modèles de pages produits personnalisés pour des produits ou des 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 présente les bonnes informations aux acheteurs au bon moment dans leur processus de décision. Déplacer un bloc de garantie, modifier l’emplacement de la description ou créer une mise en page entièrement sur mesure peut faire une réelle différence sur vos conversions.
Pourquoi vous pouvez nous faire confiance
Nous avons travaillé sur l’optimisation de pages produits avec des centaines de marques Shopify. Nous avons également créé Fudge — un éditeur de vitrine IA noté 4.8 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
Un ordre courant testé pour la conversion : galerie → titre → aperçu des avis → prix → sélecteur de variantes → quantité → ajout au panier → réassurance/garantie → description courte → description détaillée déroulante. Mettez en avant la preuve sociale et l'action d'achat ; repoussez le contenu long. Testez sur votre boutique avec votre trafic — l'ordre idéal varie selon les catégories.
Images à gauche, bloc d'achat à droite correspond au sens de lecture occidental standard et convertit légèrement mieux dans la plupart des tests A/B. Certaines marques de vêtements 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 déroutant pour les acheteurs réguliers.
Pas via l'éditeur de thème standard — l'ordre des blocs est le même sur tous les écrans. La solution la plus propre : décrivez l'ordre spécifique au mobile à Fudge et il écrira les règles CSS order dans une media query mobile. Schéma classique : bloc d'achat au-dessus de la description sur desktop, et en dessous sur mobile (pour que la galerie occupe le premier écran).
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 semblent intrusives et peuvent masquer du contenu sur mobile.
L'aperçu des notes par étoiles près du titre (au-dessus de l'ajout au panier) fonctionne le mieux — c'est un signal de confiance rapide au moment de la décision. Les avis complets en dessous de l'ajout au panier ou dans une section déroulante. Ne mettez pas un mur d'avis complets au-dessus du bouton d'achat ; cela repousse l'action sous la ligne de flottaison et nuit à la conversion.
Sur le même sujet : Fudge Page Builder.