Produit vedette

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur le bloc de sélection de variantes
3. Documentation Company XYZ sur le bloc de boutons d’achat
4. Documentation Company XYZ sur le bloc de produits complémentaires
5. Documentation Company XYZ sur le bloc accordéon
6. Documentation Company XYZ sur les paramètres d’espacement de section
7. Documentation Company XYZ sur les paramètres d’arrière-plan de section
8. Documentation Company XYZ sur les paramètres de séparateurs
9. Documentation Company XYZ sur les paramètres de visibilité
10. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo Shopify : 9 conseils pour optimiser vos pages produit et augmenter vos ventes

Vidéo Shopify : 9 conseils pour optimiser vos pages produit et augmenter vos ventes

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Affichez une expérience complète de présentation du produit et d’achat sur presque n’importe quelle page. Cette section combine la galerie du produit sélectionné, les informations produit et des blocs de contenu flexibles pour vous permettre de créer des pages de destination ciblées, des promotions sur la page d’accueil ou des mises en avant éditoriales autour d’un seul article. Pour un aperçu plus large du fonctionnement des sections et des blocs dans l’éditeur de thème, consultez documentation Shopify sur les sections et les blocs

Paramètres de base

Commencez par sélectionner le Product. Ce choix alimente la galerie, le titre, le prix, la description, les variantes, les contrôles tenant compte des stocks et les actions d’achat utilisés dans toute la section.

Si aucun produit n’est sélectionné, la disposition peut toujours afficher des blocs de contenu généraux, mais les blocs spécifiques au produit et les contrôles d’achat ne seront pas utiles.

Paramètres de la galerie

Utilisez les paramètres de la galerie pour définir l’affichage des médias produit sur ordinateur et sur mobile. Vous pouvez choisir des proportions différentes pour chaque appareil, régler l’équilibre des colonnes sur ordinateur et placer la galerie à gauche ou à droite des informations produit.

Le style de galerie modifie rapidement l’apparence de la section. Les dispositions avec plusieurs images fonctionnent bien lorsque les acheteurs doivent comparer des détails sur plusieurs photos, tandis que Slideshow crée une présentation plus resserrée et plus maîtrisée. None est utile lorsque vous souhaitez une disposition centrée sur le texte ou prévoir d’utiliser à la place des blocs d’image et de vidéo séparés.

Le comportement de l’image de variante détermine la réaction de la galerie lorsque les acheteurs sélectionnent une variante différente. Default conserve les médias liés à la variante sélectionnée, None laisse la galerie inchangée, et Variant only crée une expérience plus ciblée en affichant uniquement les visuels de la variante sélectionnée.

Astuce

Les mises à jour de galerie basées sur les variantes fonctionnent mieux lorsque la section inclut également un bloc Variant selector.

Les commandes de zoom et de vidéo affinent l’expérience de navigation. Utilisez le zoom lightbox lorsque le détail de l’image est important, et utilisez la lecture automatique avec parcimonie afin que le mouvement soutienne le produit au lieu de détourner de l’acheminement vers l’achat.

Paramètres du diaporama

Ces paramètres s’appliquent lorsque la galerie utilise une disposition en diaporama. Vous pouvez contrôler la visibilité des diapositives, le style et la vitesse d’animation, le comportement de lecture automatique, la boucle, ainsi que l’affichage de la navigation ou de la pagination.

Les paramètres de colonne du diaporama sur ordinateur et sur mobile influent sur la part de la diapositive suivante qui est visible. Les valeurs plus petites donnent une impression plus proche d’un carrousel classique à diapositive unique, tandis que les valeurs plus grandes laissent entrevoir davantage de médias disponibles.

L’animation en fondu crée une présentation plus calme, de type éditorial, mais elle impose aussi une disposition à une seule diapositive et masque les styles de pagination qui dépendent d’un déplacement sur plusieurs diapositives. Utilisez le style d’animation par défaut lorsque vous souhaitez une galerie plus interactive.

Types de blocs pris en charge

1. App
2. Accordion
3. Buy buttons
4. Benefits
5. Button
6. Contact form
7. Complementary products
8. Custom liquid
9. Description
10. Heading
11. Icon with text
12. Image
13. Price
14. Quantity selector
15. Rich text
16. Separator
17. Social media icons
18. Title
19. Testimonial
20. Variant selector
21. Video

Guide des blocs

Blocs principaux d’achat du produit

Ces blocs créent le parcours d’achat principal dans cette section :

1. Title pour le nom du produit et les actions de partage ou d’impression facultatives.
2. Price pour le prix et les messages de politique facultatifs.
3. Description pour la description principale du produit, y compris une option extensible pour les textes plus longs.
4. Variant selector pour la sélection d’options telles que la taille ou la couleur.
5. Quantity selector pour les contrôles de quantité et les messages tenant compte du stock.
6. Buy buttons pour l’ajout au panier et les actions d’achat associées.

Une bonne configuration par défaut est Title, Price, Description, Variant selector, Quantity selector et Buy buttons. Commencez par là, puis ajoutez des blocs complémentaires uniquement lorsqu’ils aident les acheteurs à décider plus vite.

Sélecteur de variantes

Le bloc Variant selector contrôle la manière dont les acheteurs choisissent les options du produit. Consultez Sélecteur de variantes.

Utilisez des listes déroulantes lorsque vous souhaitez une disposition compacte. Utilisez des pastilles ou des échantillons lorsque l’option est visuelle ou lorsque la comparaison rapide est importante.

Si vous activez des échantillons de couleur ou d’image, assurez-vous que les noms d’options correspondent à vos vrais noms d’options de variante. Les échantillons d’image remplacent les échantillons de couleur lorsque les deux sont configurés pour la même option.

Boutons d’achat

Le bloc Buy buttons ajoute l’action d’achat principale. Consultez Boutons d’achat.

Conservez une zone concentrée. Des boutons de passage en caisse supplémentaires, des détails de retrait, des messages d’expédition, des icônes de paiement et des messages de paiement échelonné peuvent être utiles, mais trop d’éléments autour du bouton d’ajout au panier peuvent affaiblir l’action principale.

Produits complémentaires

Le bloc Complementary products met en avant des articles associés qui se marient bien avec le produit vedette. Consultez Produits complémentaires.

Cela fonctionne particulièrement bien pour les compléments, les accessoires, les recharges ou les ventes croisées de routine. Vous pouvez présenter les articles dans une grille ou un diaporama et ajuster la disposition de la carte pour l’adapter à la page.

Note

Ce bloc nécessite que les recommandations de produits complémentaires soient configurées dans Search & Discovery, et il n’affichera pas les articles en rupture de stock ni les produits déjà ajoutés au panier.

Blocs de contenu complémentaires

Utilisez des blocs complémentaires pour répondre aux objections, ajouter de la crédibilité ou donner davantage de contexte au produit.

1. Accordion pour les FAQ, les matériaux, les détails d’entretien, les informations d’expédition ou les résumés de politique. Consultez Accordéon.
2. Benefits et Icon with text pour des points de valeur rapides tels que les garanties, les avantages de livraison ou les points forts du produit.
3. Testimonial pour une preuve sociale à proximité des contrôles d’achat.
4. Image et Video pour des médias supplémentaires en dehors de la galerie principale.
5. Button, Rich text, Heading et Separator pour une structure de page personnalisée.

Blocs avancés et utilitaires

Certains blocs sont mieux réservés à des cas d’utilisation spécifiques :

1. App pour les fonctionnalités produit alimentées par une application.
2. Custom liquid pour une sortie personnalisée avancée ou des intégrations.
3. Contact form pour les parcours de conseil, de commande personnalisée ou de demande prévente.
4. Social media icons pour des liens vers la communauté de la marque près du produit.

Paramètres standard de section

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et en dessous de cette section. Utilisez un espacement plus serré lorsque cette fonctionnalité produit se trouve dans une page de destination dense, et ajoutez davantage d’espace lorsqu’elle doit se démarquer comme une zone de conversion majeure.

Paramètres d’arrière-plan de section

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 toute la section. Cela est utile lorsque vous souhaitez que la fonctionnalité produit ressemble à une bande héro ou à une zone promotionnelle clairement séparée.

Faites attention aux arrière-plans très détaillés derrière des galeries de produits chargées. Un contraste fort et un espacement adéquat deviennent plus importants à mesure que la disposition devient plus visuelle.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne de séparation en haut ou en bas de la section. Utilisez-les pour séparer cette fonctionnalité produit du contenu environnant sans ajouter un autre élément de design complet.

Paramètres de visibilité

Paramètres de visibilité contrôlent si la section apparaît sur ordinateur, sur mobile ou sur les deux. Cela est particulièrement utile lorsque vous souhaitez différentes dispositions de fonctionnalité produit selon les tailles d’écran.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur maximale du contenu et la largeur externe de la section. Ces paramètres influencent nettement l’équilibre de la galerie, la lisibilité du texte et la sensation d’espace dans la zone d’achat.

L’aperçu de l’éditeur peut donner l’impression que les modifications de largeur sont plus contraintes qu’elles ne le sont sur la page en direct, alors vérifiez la boutique en ligne réelle avant de finaliser votre disposition.

Notes d’utilisation

1. Construisez d’abord le parcours d’achat. Commencez par Title, Price, Variant selector, Quantity selector et Buy buttons avant d’ajouter du contenu supplémentaire.
2. Adaptez la galerie au produit. Utilisez des dispositions avec plusieurs images pour les produits riches en détails et des diaporamas pour des présentations plus serrées et plus maîtrisées.
3. Gardez le comportement des variantes clair. Si les variantes ont des visuels distincts, associez le bloc Variant selector à un paramètre de galerie qui rend ces différences visuelles évidentes.
4. Utilisez les blocs de support pour réduire l’hésitation. Ajoutez des accordéons, des bénéfices, des témoignages ou des produits complémentaires lorsqu’ils aident les acheteurs à prendre la décision suivante plus rapidement.
5. Examinez attentivement la mise en page mobile. Cette section se transforme en expérience sur une seule colonne sur les petits écrans, alors vérifiez l’ordre des médias, la longueur du contenu et la visibilité des boutons avant de publier.
6. Vérifiez séparément les états avec et sans diaporama. Lorsque vous ajoutez des blocs ou changez de style de galerie, la section peut passer d’une simple disposition produit à une expérience davantage centrée sur le contenu ou pilotée par un carrousel.
7. Considérez les recommandations comme conditionnelles. Le contenu de produits complémentaires dépend d’un contexte produit adapté et de recommandations disponibles, alors prévoyez que le bloc puisse être absent sans casser la mise en page.
8. Comparez séparément l’ordinateur et le mobile. La disposition, l’alignement, la visibilité des médias et les commandes du diaporama peuvent se comporter différemment selon les points de rupture, alors confirmez les deux vues avant de publier.
9. Utilisez intentionnellement les remplacements visuels explicites. Les valeurs vides ou de style par défaut conservent généralement le style de repli du thème, tandis que les couleurs personnalisées, les dégradés ou des médias distincts pour ordinateur et mobile rendent la section plus autonome.