Page produit

Sur la page produit, la photographie mène et le module d’achat suit sans la concurrencer. Ouvrez le modèle Produits dans le sélecteur de page de l’éditeur pour la configurer : les réglages s’appliquent à tous les produits qui utilisent ce modèle.

Nom dans l’éditeur

Produit (EN : Product)

Où l’ajouter

Modèle Produits uniquement (section principale du modèle)

Blocs acceptés

Tous les blocs du thèmeBlocs d’application

Composition par défaut

Le modèle livré contient deux sections : la section Produit, puis Recommandations de produits. Les produits complémentaires sont un bloc placé à la fin du module d’achat.

Le module d’achat de la section Produit contient, dans l’ordre :

1. Titre, suivi d’un bloc Note qui ne s’affiche que pour les produits notés par une application d’avis (voir Note)
2. Prix
3. Sélecteur de variante
4. Plan de vente (visible seulement pour les produits avec abonnement)
5. Boutons d’achat
6. Disponibilité en retrait (visible seulement si le retrait en magasin est possible)
7. Texte dépliant qui affiche la description du produit sur 4 lignes, avec « Lire plus »
8. UGS (référence du produit)
9. Trois lignes dépliantes, titrées en anglais : « Composition and care », « Delivery and returns », « From the atelier »
10. Produits complémentaires (visible seulement pour les produits dont les produits complémentaires sont définis dans Search & Discovery)

Réglages de la section

Galerie

Sur ordinateur

Toutes les photos, vidéos et médias du produit sont empilés verticalement, sans vignettes ni flèches ; le module d’achat reste visible à côté pendant que l’acheteur fait défiler la galerie. Un module d’achat plus haut que l’écran défile avec la page pour pouvoir être lu jusqu’au bout : il se tient par le bas quand l’acheteur descend, et par le haut, sous l’en-tête, quand il remonte.

• Largeur du média règle la part de la page prise par la galerie. Le module d’achat garde toujours une largeur minimale.
• Ajustement de l’image > Ajuster dans le cadre (par défaut) : chaque photo garde ses propres proportions, rien n’est recadré.
• Ajustement de l’image > Remplir le cadre : toutes les photos prennent la Forme de l’image choisie et sont recadrées autour de leur point focal. Forme de l’image n’apparaît dans l’éditeur que si Remplir le cadre est choisi.

Sur tablette

La galerie et le module d’achat sont côte à côte, chacun sur la moitié de la page : le nom, le prix et le bouton partagent le premier écran avec la photo. La galerie est un carrousel qui montre un média à la fois et reste visible pendant que l’acheteur fait défiler le module d’achat. Largeur du média ne s’applique pas à cette taille.

Sur téléphone

La galerie devient un carrousel que l’on fait glisser, sur toute la largeur de l’écran. Au défilement, le module d’achat glisse par-dessus.

Carrousel

Sur téléphone et sur tablette :

• Le cadre du carrousel prend la forme de la première photo du produit : les photos de même forme le remplissent sans bandes. Avec Ajustement de l’image > Remplir le cadre, il prend plutôt la Forme de l’image choisie.
• Indicateur affiche une barre de progression en bas du cadre, un compteur (« 2 / 5 ») ou rien.
• Afficher les contrôles précédent et suivant ajoute une paire de boutons fléchés dans le coin inférieur du cadre. À chaque extrémité, la flèche qui n’a plus où aller est atténuée.
• Avec un seul média, il n’y a pas de carrousel.

Zoom

Avec Activer le zoom d’image, un clic sur une photo l’ouvre en plein écran, en entier. Le zoom concerne les images uniquement.

Vidéos et modèles 3D

Les vidéos importées dans Shopify s’affichent avec leurs commandes de lecture, sans lecture automatique ; les vidéos YouTube et Vimeo ajoutées comme médias du produit sont intégrées directement. Dans le carrousel, une vidéo est mise en pause quand l’acheteur passe à un autre média.

Les modèles 3D ajoutés aux médias du produit s’affichent dans la galerie avec la visionneuse 3D de Shopify : d’abord une image d’aperçu, puis le modèle, que l’acheteur fait tourner en le faisant glisser à la souris ou au doigt. Ils s’affichent aussi dans la galerie d’un produit en vedette.

Images des variantes

Toutes les photos du produit restent toujours visibles. Quand l’acheteur choisit une variante qui a sa propre image, la galerie s’y rend : le carrousel glisse jusqu’à elle sur téléphone et sur tablette, la page défile jusqu’à elle sur ordinateur. Pour en profiter, associez une image à chaque variante dans la fiche produit de l’administration.

Textes alternatifs

Chaque média utilise son texte alternatif, ou à défaut le titre du produit. Renseignez les textes alternatifs dans l’administration (fiche produit, clic sur l’image) : ils servent aux lecteurs d’écran et au référencement. Shopify traduit le texte alternatif d’une image, mais pas celui d’une vidéo : sur une page dans une autre langue, le thème indique que le texte alternatif d’une vidéo est rédigé dans la langue par défaut de votre boutique, pour que les lecteurs d’écran le prononcent correctement.

Le module d’achat

Chaque bloc est détaillé dans Blocs produit. La mention des taxes et de la livraison, le sélecteur de quantité, les boutons de paiement dynamique et la barre d’achat sur téléphone ne sont pas des réglages de bloc : activez-les ou désactivez-les pour toute la boutique dans Paramètres du thème > Produit. Les points importants :

Choix des variantes

Chaque option du produit s’affiche selon son contenu :

1. une option dont les valeurs ont des échantillons (couleur ou image) dans Shopify s’affiche en pastilles — voir Pastilles de couleur ;
2. sinon, si les variantes de l’option ont des images différentes, elle s’affiche en vignettes de ces images ;
3. sinon, elle suit le réglage Style des options : texte, boîtes ou liste déroulante.

Le nom de la valeur choisie s’affiche à côté du nom de l’option, et celui de la valeur survolée s’y affiche en aperçu. Les combinaisons épuisées restent visibles, atténuées et barrées, avec la mention « Épuisé » ; les combinaisons inexistantes portent la mention « Indisponible ».

Au changement de variante, le prix, la disponibilité, les boutons, la référence et le retrait en magasin se mettent à jour sans recharger la page, et l’adresse de la page change (?variant=…) pour pouvoir être partagée.

Un bloc Code Liquid personnalisé placé dans le module d’achat peut lui aussi suivre la variante : donnez à l’élément qui englobe son code un attribut data-variant-region portant un nom de votre choix (par exemple <div data-variant-region="guide-tailles">), et il est redessiné à chaque variante choisie ; un code Liquid qui lit product.selected_or_first_available_variant affiche alors la nouvelle. Cela ne vaut que sur la page produit, pas dans un produit en vedette.

Produit épuisé

Quand la variante choisie est épuisée, le bouton d’ajout, la quantité et les boutons de paiement accéléré sont remplacés par la mention « Cette sélection est épuisée. » et un bouton Découvrir la collection qui mène à la page de tous les produits (/collections/all). Pour n’afficher que la mention, par exemple afin de laisser la place à une application d’alerte de stock, décochez Proposer la collection en cas de rupture dans Paramètres du thème > Produit.

Barre d’achat sur téléphone

Sur téléphone, quand le bouton Ajouter au panier sort de l’écran, une barre fixée en bas de l’écran reprend le prix et le bouton. Elle disparaît avant la section suivante, pour ne jamais masquer autre chose que le produit. Désactivez-la avec Épingler l’ajout au panier sur mobile dans Paramètres du thème > Produit.

Paiement échelonné

Si Shop Pay Installments est activé dans vos paramètres de paiement, son message (« Payez en 4 fois… ») s’affiche automatiquement dans le module d’achat. Aucun réglage n’est nécessaire dans le thème.

Ajouter du contenu au module d’achat

Cliquez sur Ajouter un bloc dans la section Produit pour ajouter :

• des blocs produit (fournisseur, description complète…) ;
• des pièces à acheter en plus : des Produits associés que vous choisissez, des Produits complémentaires issus de Search & Discovery, une pièce en Vente croisée et un Emballage cadeau ajouté avec le produit ;
• des blocs de contenu : ligne dépliante, tiroir (idéal pour « Guide des tailles » ou « Livraison et retours »), texte, bouton, texte enrichi, code Liquid ;
• des groupes pour disposer des blocs côte à côte (Colonne produit, Ligne de produits) ;
• des blocs d’application (avis clients, tableau des tailles…).

Modèles produit alternatifs

Pour une page différente selon le type de produit (cartes-cadeaux, accessoires sans taille…), créez un modèle alternatif et attribuez-le aux produits concernés.

Référencement

La page produit publie automatiquement les données structurées du produit (prix, disponibilité, images) pour les moteurs de recherche. Voir Référencement et partage.