À retenir
- Dans l’éditeur de thème, faites glisser les blocs dans la section principale du produit pour les réorganiser.
- Vous pouvez ajouter des sections sous la zone principale du produit pour du contenu tel que des avis, des FAQ ou des produits associés.
- Créez des modèles de pages produits personnalisés pour des produits ou collections spécifiques.
- Pour les mises en page qui vont au-delà de ce que propose l’éditeur de thème, utilisez Fudge.
Une page produit bien structurée place les bonnes informations sous les yeux des 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 personnalisée peut faire une réelle différence sur les 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
Un ordre courant testé pour la conversion : galerie → titre → extrait d'avis → prix → sélecteur de variantes → quantité → ajout au panier → éléments 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 tard. Testez sur votre boutique avec votre propre trafic — l'ordre idéal varie selon la catégorie.
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êtements et de lifestyle inversent cela pour des raisons de design. Gardez une cohérence sur tous 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 toutes les tailles d'écran. La solution la plus propre : décrivez l'ordre spécifique au mobile à Fudge et il écrira les règles CSS order limitées à une media query mobile. Modèle courant : 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 au-delà du 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 grandes barres sticky peuvent sembler intrusives et masquer du contenu sur mobile.
L'extrait avec les é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. Le contenu complet des avis doit se trouver sous l'ajout au panier ou dans une section déroulante. Ne mettez pas un mur complet d'avis au-dessus du bouton d'achat ; cela pousse l'action en dessous de la ligne de flottaison et nuit à la conversion.
Article connexe : Fudge Page Builder.