Pages de produits

Les pages de produits affichent des informations sur les produits que vous vendez dans votre boutique et sur l’endroit où vos clients peuvent acheter les produits.

Par défaut, les pages de produits ont une section Informations sur le produit et une section Produits associés dans l’éditeur de thème.

Sur cette page

Section des informations sur le produit

Section des informations sur le produit

La section Informations sur le produit affiche les détails de vos produits, tels que le titre, la description, le prix et les images.

Paramètres de la section des informations sur les produits

Paramètres de la section des informations sur le produit
Paramètre	Description
Activation du contenu de la note flottante sur le bureau	Lorsque vous faites défiler une page vers le bas, la colonne d’information sur le produit ne commence à défiler que lorsque toutes les images ont défilés.
Nuancier de couleurs	Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Largeur des supports multimédias sur ordinateur	Définit la largeur de votre support multimédia de produit sur la page de produit pour les ordinateurs de bureau. Choisissez entre Petite, Moyenne ou Grande.
Limiter les supports multimédias à la hauteur de l’écran	Si vous sélectionnez cette option, une hauteur maximale des supports multimédias est définie en fonction de la hauteur de la fenêtre du navigateur sur tout type d’appareil.
Taille des supports multimédias	Sélectionnez l’option Taille d’origine pour conserver le rapport d’aspect initial du support multimédia ou l’option Remplir pour adapter le support multimédia à son conteneur.
Mise en page du bureau	Définissez la mise en page de votre support multimédia de produit sur des ordinateurs de bureau. Choisissez parmi les options suivantes : Empilé : affiche votre support multimédia de produit empilé verticalement sur la page. Lorsque vous cliquez sur un type de support multimédia empilé, vous ouvrez une boîte de dialogue contextuelle avec un affichage plus grand du support multimédia sélectionné. 2 colonnes : affiche le support multimédia de votre produit comme empilé, mais sur deux colonnes. Vignettes : si un produit comporte plusieurs types de supports multimédias ou d’images, le support multimédia restant s’affiche sous forme de vignettes sous le support multimédia principal du produit. Le/la client(e) peut cliquer sur n’importe quelle vignette pour l’afficher comme support multimédia principal du produit. Carrousel de vignettes : si le produit comporte plusieurs types de supports multimédias ou d’images, les supports multimédias restants s’affichent sous forme de vignettes dans un carrousel sous le support multimédia principal du produit. Le/la client(e) peut cliquer sur n’importe quelle vignette pour l’afficher comme support multimédia principal du produit, ou utiliser les flèches de navigation carrousel pour afficher d’autres supports multimédias.
Position des supports multimédias sur ordinateur	Décidez si vous devez afficher le support multimédia du produit sur le côté gauche de la page ou sur le côté droit de la page sur des ordinateurs de bureau.
Le zoom sur image	Choisissez la manière dont le zoom sur image fonctionne sur ordinateur : Ouvrir la visionneuse d’images : le/la client(e) peut cliquer pour afficher une version plus grande de l’image. Il s’agit des fonctionnalités par défaut des supports multimédias de produits affichés sur les appareils mobiles. Cliquer et passer la souris : le/la client(e) peut cliquer pour zoomer sur l’image, puis survoler celle-ci pour voir les différentes sections ainsi agrandies. Le zoom par survol se désactive lorsque vous cliquez à nouveau sur les images agrandies ou lorsque le curseur quitte le conteneur de l’image. Quand ce paramètre est activé et que l’utilisateur(-trice) se sert d’un appareil mobile, l’image s’ouvre par défaut dans une fenêtre modale (lightbox) lorsque l’on clique dessus. Aucun zoom : cette option désactive le zoom sur les images. Elle est recommandée pour les images qui ne sont pas en haute résolution et qui ne s’affichent pas bien lorsqu’elles sont zoomées.
Mise en page sur mobile	Définissez la mise en page de vos supports multimédia de produits sur les appareils mobiles. Choisissez parmi les options suivantes : 2 colonnes : affiche deux supports multimédias de produit côte à côte, avec des fonctionnalités carrousel pour faire défiler et afficher d’autres supports multimédias de produit. Afficher des vignettes : affiche un seul support multimédia principal de produit, avec le défilement des carrousels des vignettes ci-dessous. Masquer les vignettes : affiche un seul support multimédia principal de produit, avec un défilement des carrousels ci-dessous, mais les vignettes ne s’affichent pas.
Masquer les supports multimédias des variantes après la sélection d’une variante	Quand une variante est sélectionnée, les images des autres variantes sont masquées. Les images réapparaissent quand une variante est désélectionnée.
Activer la vidéo en boucle	Pour toutes les vidéos que vous avez dans le support multimédia de votre produit, ce paramètre permet de lire la vidéo en boucle afin qu’elle se relance automatiquement quand elle se termine.
Marge supérieure	Définit l’espace en haut de la section.
Marge inférieure	Définit l’espace en bas de la section.

Outre les paramètres de la section Informations de produit, vous pouvez aussi afficher et personnaliser certains des Paramètres de thème pour badges de produits, et vous pouvez ajouter votre propre code CSS personnalisé spécifique à la section.

Blocs d’informations sur les produits

Vous pouvez utiliser les blocs suivants avec la section Informations sur le produit :

Bloc de texte

Le bloc Texte peut être utilisé pour afficher du texte statique ou des données variables à l’aide de sources dynamiques. Vous pouvez ajouter du texte affichant un message de marketing (par exemple, Expédition gratuite pour les commandes de plus de 100 USD), lequel s’affiche ensuite sur chaque produit. Vous pouvez utiliser le bloc de texte pour ajouter une source dynamique, qui peut changer en fonction du produit visualisé. Par exemple, vous pouvez connecter le champ Fournisseur du produit dans le bloc Texte en tant que source dynamique pour que le fournisseur du produit s’affiche.

Paramètres du bloc de texte dans la section des informations sur le produit
Paramètre	Description
Texte	Un champ de texte pour ajouter des informations supplémentaires à la page de produit.
Style de texte	Modifie le style du texte. Choisissez parmi les options suivantes : Corps - Modifie le texte en texte de style paragraphe. Sous-titre - Modifie le texte en texte de sous-titre, qui est légèrement plus grand que le texte de style paragraphe. Majuscule : modifie le texte pour qu’il soit plus petit que le texte de style paragraphe et met tout le texte en lettres majuscules.

#### Bloc de titre

Le bloc Titre affiche le titre du produit qui est consulté. Ce bloc n’a pas de paramètres personnalisables.

Bloc de prix

Le bloc Prix affiche les informations de tarification du produit qui est consulté, telles que le prix et le prix avant réduction. Ce bloc n’a pas de paramètres personnalisables.

Bloc de sélecteur de variante

Le bloc Sélecteur de variante affiche toutes les options de variante du produit qui est consulté. Le sélecteur de variante s’affiche uniquement pour les produits avec des options de variantes. Si vous supprimez ce bloc et que vous avez des produits avec des options de variante, vos clients ne peuvent pas choisir ou acheter l’option de variante qu’ils souhaitent. Vous pouvez ajouter un bloc sélecteur de variante qui affiche une liste déroulante ou des boutons pilules et personnaliser la forme des échantillons de couleurs. En savoir plus sur l’ajout de échantillons de couleurs pour vos variantes avec des champs méta de catégories.

Paramètres du bloc du sélecteur de variante dans la section des informations sur le produit
Paramètre	Description
Style	Choisissez comment vos variantes de produits s’affichent pour les clients. Choisissez parmi les options suivantes : Menu déroulant : affiche les options de variante dans des menus déroulants extensibles. Celles-ci peuvent s’afficher uniquement sous la mesure d’un échantillon ou d’un texte. Boutons : affiche les options de variante en tant que boutons que vous pouvez sélectionner. Celles-ci peuvent s’afficher uniquement sous la mesure d’un échantillon ou d’un texte.
Échantillon	Choisissez comment vos échantillons de couleurs s’affichent pour les clients. Choisissez parmi les options suivantes : Cercle : affiche l’échantillon de couleur en tant que cercle que vous pouvez sélectionner. Carré : affiche l’échantillon de couleur sous forme de carré que vous pouvez sélectionner. Aucun : aucun échantillon de couleur ne s’affiche.

#### Bloc de sélecteur de quantité

Le bloc Sélecteur de quantité affiche un champ de nombre cliquable et modifiable que les clients peuvent utiliser pour modifier le nombre d’unités d’un produit qu’ils souhaitent acheter. Ce bloc n’a pas de paramètres personnalisables.

Bloc de Boutons d’achat

Le bloc Boutons d’achat affiche le bouton Ajouter au panier et toute information relative au retrait en magasin. Elle peut également afficher les boutons de paiement dynamique que vous avez sur votre boutique.

Paramètres du bloc des boutons d’achat dans la section des informations sur le produit
Paramètre	Description
Afficher les boutons de paiement dynamique	Affiche toutes les options de paiement dynamique que vous avez activées dans vos paramètres de paiement.
Afficher le formulaire d’information sur le destinataire pour les cartes‑cadeaux	Affiche une case à cocher facultative sur toutes les cartes-cadeaux en tant que produits que vous avez afin que vos clients programment l’envoi d’une carte-cadeau à un destinataire avec un message personnel.

#### Bloc de description

Le bloc Description affiche la description du produit qui est consulté. Ce bloc n’a pas de paramètres personnalisables.

Partager un bloc

Le bloc Partager affiche un lien interactif, qui permet aux clients de partager le produit sur leurs médias sociaux.

Paramètres du bloc de partage dans la section des informations du produit
Paramètre	Description
Texte	Le texte sur lequel les clients cliquent pour partager le produit sur leurs médias sociaux.

#### Bloc SKU

Le bloc SKU affiche l’unité de gestion des stocks (SKU) associée au produit ou à la variante, lorsque cela est pertinent. En savoir plus sur l’ajout de numéros de SKU à vos variantes de produit.

Paramètres du bloc SKU dans la section des informations sur le produit
Paramètre	Description
Style de texte	Modifie le style du texte. Choisissez parmi les options suivantes : Corps - Modifie le texte en texte de style paragraphe. Sous-titre - Modifie le texte en texte de sous-titre, qui est légèrement plus grand que le texte de style paragraphe. Majuscule : modifie le texte pour qu’il soit plus petit que le texte de style paragraphe et met tout le texte en lettres majuscules.

#### Bloc de statut des stocks

Le bloc État des stocks affiche le statut de stock du produit. Vous pouvez afficher l’état des stocks et le numéro de stock restant de manière permanente, ou seulement l’afficher une fois que la quantité de stock des produits a atteint le seuil que vous avez fixé. L’état des stocks s’affiche uniquement pour les produits pour lesquels le suivi des stocks est activé.

Paramètres du bloc de statut des stocks dans la section des informations sur les produits
Paramètre	Description
Style de texte	Modifie le style du texte. Choisissez parmi les options suivantes : Corps - Modifie le texte en texte de style paragraphe. Sous-titre - Modifie le texte en texte de sous-titre, qui est légèrement plus grand que le texte de style paragraphe. Majuscule : modifie le texte pour qu’il soit plus petit que le texte de style paragraphe et met tout le texte en lettres majuscules.
Seuil de stock faible	Utilisez le curseur de plage pour définir un seuil à partir duquel vos produits s’affichent avec un message Stock bas. Choisissez un numéro entre 0 et 100. Si vous définissez le curseur sur 0, le produit en stock s’affiche jusqu’à ce que le produit soit entièrement en rupture de stock.
Afficher l’inventaire	Sélectionnez cette option lorsque vous souhaitez afficher l’inventaire de vos produits.

#### Bloc liquid personnalisé

Le bloc Liquid personnalisé affiche le code Liquid ou HTML personnalisé que vous ajoutez au bloc.

Paramètres du bloc Liquid personnalisé dans la section des informations sur le produit
Paramètre	Description
Code Liquid	Affiche le contenu rendu par le code Liquid ou HTML que vous saisissez.

#### Bloc de rangée réductible

Le bloc Rangée réductible affiche une ligne extensible et réductible avec un titre. Lorsqu’un(e) client(e) clique sur l’icône, le titre ou la flèche du bas, la rangée s’agrandit pour afficher du contenu supplémentaire.

Paramètres du bloc de rangée réductible dans la section des informations sur le produit
Paramètre	Description
En-tête	Le titre de la rangée, qui s’affiche lorsque la rangée est à la fois réduite et agrandie.
Icône	Sélectionnez une icône à afficher avec la rangée réductible, ou sélectionnez Aucune pour afficher uniquement le titre de la rangée.
Contenu de la rangée	Saisissez le contenu de votre rangée à l’aide de l’éditeur de texte enrichi. Le contenu s’affiche uniquement lorsque la rangée est agrandie.
Contenu de la rangée depuis une page	Ajoutez du contenu d’une page à votre rangée. Cela affiche uniquement le contenu que vous ajoutez à une page dans la section Boutique en ligne > Pages de votre interface administrateur Shopify. Le contenu que vous ajoutez dans le modèle de pages n’est pas affiché dans l’éditeur de thème. Tout contenu que vous saisissez dans le champ Contenu de la rangée s’affiche au-dessus du contenu de la page que vous ajoutez.

#### Bloc pop-up

Le bloc Fenêtre contextuelle affiche du texte cliquable, qui ouvre une boîte de dialogue contextuelle lorsqu’on clique dessus.

Paramètres du bloc de la fenêtre contextuelle dans la section des informations du produit
Paramètre	Description
Étiquette de lien	Le texte interactif sur lequel les clients cliquent pour afficher la boîte de dialogue contextuelle.
Page	Sélectionnez la page à partir de laquelle vous souhaitez afficher du contenu dans la boîte de dialogue contextuelle. Cela affiche uniquement le contenu que vous ajoutez à une page dans la section Boutique en ligne > Pages de votre interface administrateur Shopify. Le contenu que vous ajoutez dans le modèle de pages n’est pas affiché dans l’éditeur de thème.

#### Bloc d’évaluation de produit

Le bloc Évaluation de produit affiche l’évaluation moyenne des produits sous la forme d’étoiles avec le nombre d’avis entre parenthèses, par exemple : ★★★★★ (8).

Pour afficher les évaluations de produits, vous devez utiliser une application d’avis sur le produit et des définitions de champs méta pour reviews.rating_count et reviews.rating.

Ce bloc n’a pas de paramètres personnalisables.

Bloc de produits complémentaires

Le bloc Produits complémentaires affiche des produits complémentaires que vous avez configurés avec l’application Shopify Search & Discovery.

Paramètres du bloc de produits complémentaires dans la section des informations sur les produits
Paramètre	Description
En-tête	Le titre du bloc.
Afficher sous forme de ligne réductible	Une fois sélectionné, le contenu s’affiche comme étant réduit en une rangée. Lorsqu’un(e) client(e) clique sur un titre, l’onglet s’agrandit pour afficher du contenu supplémentaire.
Icône	Sélectionnez une icône à associer à votre titre lorsque les produits complémentaires s’affichent dans une rangée réductible.
Quantité maximale de produits à afficher	Sélectionnez le nombre maximal de produits complémentaires à afficher. Choisir un nombre entre 1 et 10.
Nombre de produits par page	Sélectionnez le nombre de produits complémentaires que vous souhaitez afficher par page de curseur. Choisissez un numéro entre 1 et 4.
Style de pagination	Définissez le style de navigation du curseur qui s’affiche sous les produits. Choisissez entre Points, Compteur ou Chiffres.
Rapport d'image	Définissez le rapport d’aspect des images de carte de produit. Choisissez entre Portrait ou Carré.
Activer le bouton d'ajout rapide	Si vous activez le bouton d’ajout rapide, vos clients peuvent ajouter un article à leur panier à partir de la carte du produit avec l’une des options suivantes : Ajouter au panier : pour les produits monovariants. Lorsqu’un(e) client(e) clique sur le bouton, le produit est automatiquement appliqué à son panier. Choisir des options : pour les produits avec des variantes. Lorsqu’un(e) client(e) clique sur le bouton, une boîte de dialogue contextuelle s’affiche afin qu’il/elle choisisse sa variante et poursuive son achat.

#### Bloc Icône avec texte

Le bloc Icône avec texte affiche jusqu’à 3 icônes accompagnées de texte. Choisissez parmi une liste d’icônes préinstallées ou utilisez une image que vous importez.

Paramètres du bloc Icône avec texte dans la section des informations sur le produit
Paramètre	Description
Mise en page	Choisissez entre une mise en page horizontale ou verticale pour le bloc.
Première icône	Sélectionnez une icône à afficher dans le bloc, ou sélectionnez Aucune pour afficher uniquement un titre.
Première image	Choisissez votre propre image à utiliser à la place d’une icône.
Premier titre	Ajouter un titre pour votre première icône ou image.
Deuxième icône	Sélectionnez une icône à afficher dans le bloc, ou sélectionnez Aucune pour afficher uniquement un titre.
Deuxième image	Choisissez votre propre image à utiliser à la place d’une icône.
Deuxième titre	Ajouter un titre pour votre deuxième icône ou image.
Troisième icône	Sélectionnez une icône à afficher dans le bloc, ou sélectionnez Aucune pour afficher uniquement un titre.
Troisième image	Choisissez votre propre image à utiliser à la place d’une icône.
Troisième titre	Ajoutez un titre pour votre troisième icône ou image.

## Section des produits associés

D’après le produit qui est affiché, la section Produits associés affiche des produits similaires, des produits à description similaire ou des produits fréquemment achetés en même temps que le produit qui est affiché. Vous pouvez ajouter manuellement vos propres produits à la section Produits associés à l’aide de l’application Shopify Search & Discovery.

Pour en savoir plus sur les recommandations de produits, voir Comprendre les recommandations de produits.

Paramètres de la section des produits associés

Paramètres de la section des produits associés
Paramètre	Description
En-tête	Le titre de la section.
Taille du titre	La taille du texte du titre. Choisissez entre petit, moyen, grand, très grand ou extra grand.
Quantité maximale de produits à afficher	Définissez le nombre maximum de produits associés à afficher. Choisissez un numéro entre 2 et 10.
Nombre de colonnes sur ordinateur	Définit le nombre de colonnes sur lesquelles les produits doivent s’afficher sur les ordinateurs de bureau. Choisir un nombre entre 1 et 6.
Nuancier de couleurs	Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Rapport d'image	Définissez le rapport d’image pour les images vedettes des produits associés qui s’affichent. Choisissez parmi les options suivantes : Adapter à l'image – utilise le rapport d'aspect des images. Cette action empêche leur recadrage. Portrait - Recadre les images à un rapport de 2:3. Carré - Recadre les images à un rapport de 1:1.
Forme d’image	Choisir l’une des formes d’image suivantes pour vos images de produits associées : Forme par défaut : adopte une forme rectangulaire pour votre image de produit. Arche : courbe le haut de votre image de produit. Indistincte : arrondit votre image de produit et lui attribue aléatoirement l’une des six formes indistinctes disponibles. Chacune de ces formes s’anime différemment des autres lorsque vous la survolez avec la souris. Chevron gauche : donne à votre image de produit la forme d’un chevron dont le coude marque un angle prononcé à gauche. Chevron droite : donne à votre image de produit la forme d’un chevron dont le coude marque un angle prononcé à droite. Losange : donne à votre image de produit la forme d’un losange à quatre côtés. Parallélogramme : donne à votre image de produit une forme dotée de deux paires de lignes parallèles. Cercle : arrondit votre image de produit sous la forme d’un cercle ou d’un ovale qui s’anime lorsque vous le survolez avec la souris.
Afficher la deuxième image en survol	Lorsqu’un(e) client(e) survole les images de produits avec son curseur sur un ordinateur de bureau, cette option permet d’afficher la deuxième image de produit (s’il en existe une).
Afficher le fournisseur	Affiche le fournisseur de chaque produit.
Afficher la note du produit	Affiche l’évaluation moyenne des produits sous la forme d’étoiles, avec le nombre d’avis entre parenthèses, par exemple : ★★★★★ (8). Requiert aussi une application d’avis sur le produit et des définitions de champs méta pour `reviews.rating_count` et `reviews.rating`.
Nombre de colonnes sur mobile	Définit le nombre de colonnes sur lesquelles les produits doivent s’afficher sur les appareils mobiles. Choisir 1 colonne ou 2 colonnes.
Marge supérieure	Définit l’espace en haut de la section.
Marge inférieure	Définit l’espace en bas de la section.