Réussi
Informations sur le produit
Personnalisez la page principale du produit avec des médias, des variantes, des commandes d’achat et des informations complémentaires.
- Documentation Shopify sur les sections et les blocs
- Documentation Shopify sur les métachamps et les sources dynamiques
- Documentation Company XYZ sur le bloc de titre
- Documentation Company XYZ sur le bloc de prix
- Documentation Company XYZ sur le bloc de sélecteur de variantes
- Documentation Company XYZ sur le bloc de sélecteur de quantité
- Documentation Company XYZ sur le bloc de boutons d’achat
- Documentation Company XYZ sur le bloc de description
- Documentation Company XYZ sur le bloc d’accordéon
- Documentation Company XYZ sur le bloc de produits complémentaires
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres de séparateur
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Cette section constitue la zone principale dédiée aux détails du produit sur les modèles de produit. Elle associe la galerie du produit à une pile personnalisable de blocs de contenu, afin que vous puissiez contrôler la façon dont les clients consultent les médias, comparent les options, lisent les détails et passent à l’achat. Pour une vue d’ensemble plus large de la création de mises en page de thème, consultez la documentation Shopify sur les sections et les blocs
Paramètres principaux
Section intitulée « Paramètres principaux »Cette section est conçue pour être réorganisée bloc par bloc. Dans la plupart des configurations, la structure de départ la plus efficace est la suivante : titre, prix, sélecteur de variantes, sélecteur de quantité, boutons d’achat, puis contenu complémentaire tel qu’une description, des accordéons et des blocs destinés à renforcer la confiance.
Si votre catalogue comprend des types de produits très différents, cette section vous offre suffisamment de flexibilité pour conserver une structure de page cohérente tout en adaptant l’importance accordée au contenu pour chaque produit.
Paramètres de la galerie
Section intitulée « Paramètres de la galerie »Les paramètres de la galerie contrôlent l’affichage des médias du produit sur ordinateur et sur mobile. Vous pouvez modifier les rapports d’aspect, l’équilibre entre la galerie et les colonnes de contenu, la position de la galerie sur les grands écrans et le style de galerie utilisé sur chaque appareil.
La version pour ordinateur offre davantage de contrôle sur la mise en page, notamment sur le côté où la galerie s’affiche et sur la colonne qui bénéficie de plus d’espace. Sur mobile, la section est toujours organisée en une seule colonne ; la principale décision consiste donc à choisir le style de galerie le plus facile à parcourir sur un petit écran.
Utilisez des styles de galerie plus visuels pour les produits qui reposent sur la photographie, les finitions ou l’observation de détails. Utilisez des mises en page plus simples lorsque la page doit donner la priorité aux caractéristiques, aux choix de variantes ou à une description plus longue.
La galerie peut également réagir aux changements de variante. Cela est particulièrement utile pour les produits dont les options sont basées sur la couleur ou la finition, lorsque l’option sélectionnée doit modifier immédiatement les médias visibles.
Le comportement de la galerie basé sur les variantes nécessite un bloc Variant selector dans cette section. Sans celui-ci, la galerie ne se mettra pas à jour lorsque les options changent.
Les commandes de zoom et de vidéo permettent d’affiner l’expérience des médias. Le zoom en visionneuse est adapté lorsque les clients doivent examiner une texture ou un détail, tandis que la lecture automatique des vidéos convient mieux aux courtes séquences qu’aux démonstrations longues.
Paramètres du diaporama
Section intitulée « Paramètres du diaporama »Ces paramètres s’appliquent lorsque la galerie utilise une mise en page en diaporama. Vous pouvez contrôler la largeur des diapositives visibles, le style et la vitesse de l’animation, la lecture automatique, la lecture en boucle, la navigation et la pagination.
Un diaporama affichant un aperçu partiel de la diapositive suivante peut rendre les grands ensembles de médias plus interactifs. Si vous passez à une animation en fondu, la galerie se comporte davantage comme une présentation à une seule diapositive ; certaines options d’interface propres aux diaporamas deviennent donc moins utiles.
La lecture automatique convient mieux aux courtes séquences visuelles. Pour les produits dont les clients doivent comparer attentivement des images fixes, la navigation manuelle est généralement préférable.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- App
- Accordion
- Buy buttons
- Benefits
- Button
- Complementary products
- Contact form
- Custom liquid
- Description
- Heading
- Icon with text
- Image
- Price
- Quantity selector
- Rich text
- Separator
- Social media icons
- Title
- Testimonial
- Variant selector
- Video
Conseils concernant les principaux blocs
Section intitulée « Conseils concernant les principaux blocs »Le bloc Title affiche le nom du produit et peut également afficher des actions de partage ou d’impression. Il fonctionne généralement mieux en haut de la pile de contenu. En savoir plus sur le bloc Title.
Le bloc Price affiche les prix actuels et un éventuel message relatif aux politiques. Placez-le près du titre et des commandes d’achat afin que les clients puissent comparer le prix et les options sans faire défiler la page dans les deux sens. En savoir plus sur le bloc Price.
Variant selector
Section intitulée « Variant selector »Le bloc Variant selector permet aux clients de choisir les options du produit et peut également afficher des échantillons de couleur ou d’image. Il active aussi le comportement de la galerie basé sur les variantes de la section. En savoir plus sur le bloc Variant selector.
Les menus déroulants sont généralement plus faciles à utiliser pour les longues listes d’options, tandis que les pastilles ou les échantillons conviennent mieux aux ensembles d’options courts et visuels. Si vous utilisez des échantillons, veillez à ce que les noms des options correspondent exactement à ceux utilisés pour vos options de produit.
Quantity selector
Section intitulée « Quantity selector »Le bloc Quantity selector ajoute des commandes de quantité et un éventuel message de disponibilité. Il est particulièrement utile lorsqu’il est placé directement au-dessus ou au-dessous des boutons d’achat. En savoir plus sur le bloc Quantity selector.
Si vous activez un message concernant les stocks faibles, définissez un seuil suffisamment bas pour rester crédible et adapté au produit.
Buy buttons
Section intitulée « Buy buttons »Le bloc Buy buttons constitue la zone principale d’action d’achat. Il peut également afficher des boutons de paiement supplémentaires, des informations sur la livraison gratuite, des informations sur le retrait local, des icônes de paiement, des options concernant le destinataire d’une carte-cadeau, un message relatif au paiement en plusieurs fois et une barre fixe lors du défilement. En savoir plus sur le bloc Buy buttons.
Utilisez les informations d’achat complémentaires avec discernement. Trop d’éléments autour du bouton principal peuvent donner une impression d’encombrement, en particulier sur mobile.
Si vous remplacez les couleurs des boutons ici, vérifiez les états par défaut et au survol afin de vous assurer que l’action principale reste évidente et lisible.
Description
Section intitulée « Description »Le bloc Description affiche la description principale du produit et peut être rendu extensible. En savoir plus sur le bloc Description.
Les descriptions extensibles conviennent bien aux textes de présentation longs. Pour les descriptions plus courtes, l’affichage immédiat du texte complet est généralement plus simple.
Accordion
Section intitulée « Accordion »Le bloc Accordion est utile pour les FAQ, les matériaux, les instructions d’entretien, les conseils de taille et les informations d’expédition. Il peut utiliser du contenu saisi directement ou récupérer des données auprès d’autres sources de contenu. En savoir plus sur le bloc Accordion.
Séparez les sujets dans différentes lignes au lieu de tout regrouper dans un long panneau. Les détails secondaires sont ainsi plus faciles à parcourir. Pour le contenu provenant des données produit, consultez la documentation Shopify sur les métachamps et les sources dynamiques
Complementary products
Section intitulée « Complementary products »Le bloc Complementary products ajoute des articles associés au produit actuel. Il convient bien aux accessoires, aux recharges ou aux compléments habituels. En savoir plus sur le bloc Complementary products.
Choisissez une mise en page compacte si ce bloc apparaît dans une page produit dense. Si vous utilisez une mise en page en diaporama, laissez la navigation visible afin que les recommandations ne semblent pas masquées.
Blocs de contenu complémentaires
Section intitulée « Blocs de contenu complémentaires »Utilisez les autres blocs pour adapter la page à l’histoire du produit et au parcours d’achat.
- Utilisez Benefits, Icon with text ou Testimonial pour renforcer la confiance et la valeur perçue.
- Utilisez Image ou Video pour ajouter du contenu visuel secondaire dans la colonne d’informations.
- Utilisez Rich text, Heading et Separator pour structurer plus clairement un contenu long.
- Utilisez Button pour les actions secondaires telles que les guides des tailles ou les pages d’entretien.
- Utilisez les blocs Social media icons, Contact form, Custom liquid ou App uniquement lorsqu’ils répondent à un objectif clair pour la page produit.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Les paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de cette section. Sur les pages produit, un espacement réduit maintient généralement la galerie et les commandes d’achat plus près du haut, tandis qu’un espacement plus important crée une impression plus éditoriale.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Les paramètres d’arrière-plan de section vous permettent d’ajouter une couleur, un dégradé, une image ou une vidéo derrière l’ensemble de la section produit. Cela peut contribuer à créer une identité de marque plus forte, mais les traitements subtils fonctionnent généralement mieux dans une section qui contient déjà beaucoup de contenu fonctionnel.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Les paramètres de séparateur ajoutent une ligne facultative en haut ou en bas de la section. Ils sont particulièrement utiles lorsque la zone produit doit être visuellement mieux séparée du contenu adjacent.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Les paramètres de largeur contrôlent à la fois la largeur du contenu et la largeur extérieure de la section. Les mises en page plus larges conviennent aux produits axés sur les images, tandis que les mises en page plus étroites peuvent améliorer la lisibilité des pages produit riches en texte.
L’éditeur peut rendre les changements de largeur plus difficiles à évaluer précisément. Examinez donc les modifications importantes de mise en page sur la page en ligne avant de les finaliser.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Regroupez les actions d’achat. Placez le titre, le prix, le sélecteur de variantes, le sélecteur de quantité et les boutons d’achat à proximité afin que les clients puissent agir sans chercher dans toute la page.
- Adaptez les médias au produit. Utilisez des mises en page de galerie plus riches pour les produits visuels et des galeries plus simples lorsque les options, les caractéristiques ou le texte doivent retenir davantage l’attention.
- Utilisez des accordéons pour les détails secondaires. Placez les FAQ, les matériaux, les informations d’expédition et les consignes d’entretien dans des lignes d’accordéon distinctes afin de garder la zone de contenu principale ciblée.
- Vérifiez le parcours mobile. Comme la section devient une seule colonne sur les petits écrans, examinez attentivement l’ordre des médias, l’empilement des blocs et la visibilité des boutons d’achat.
- Examinez les deux tailles d’affichage. Les commandes pour ordinateur et pour mobile peuvent modifier la mise en page, l’alignement et le comportement des médias de manière différente. Vérifiez donc les deux affichages avant de publier.
- Surveillez les changements liés aux blocs. L’ajout ou la réorganisation de blocs peut modifier sensiblement l’équilibre de la page produit. Vérifiez donc à nouveau la section lorsque vous modifiez la pile de contenu.
- Confirmez les recommandations avec des données produit réelles. Le contenu des produits complémentaires ne s’affiche que lorsque le contexte du produit et les articles renvoyés sont disponibles. Les états vides ne doivent donc pas être considérés comme un échec de configuration.
- Prévisualisez les mises en page stylisées en dehors de l’éditeur. Les changements de largeur, d’arrière-plan et d’espacement peuvent produire une impression différente sur la page en ligne et dans l’éditeur.