À 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 irréalisable par simple glisser-déposer, Fudge peut la créer pour vous.
Exemples de prompts :
-
“Crée un modèle de page produit personnalisé pour notre produit phare - image hero sticky en pleine largeur, panneau d’informations scrollable à droite, section des fonctionnalités clés en dessous, grille de témoignages, et bouton ATC sticky.”
-
“Restructure notre page produit pour que la description apparaisse dans une section à onglets avec 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 le passez en revue avant de le publier.
Sur le même sujet : Fudge Page Builder.