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 trois sections : la section Produit, puis Recommandations de produits et Produits complémentaires.

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

1. Titre
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 d’exemple, rédigées en anglais : « Composition and care », « Delivery and returns », « From the atelier »

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.

• 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 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.

Sur téléphone

La galerie devient un carrousel que l’on fait glisser, sur toute la largeur de l’écran. Indicateur affiche une barre de progression, un compteur (« 2 / 5 ») ou rien, et Afficher les contrôles précédent et suivant ajoute des flèches. 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. Sur téléphone, une vidéo est mise en pause quand l’acheteur passe au média suivant.

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, 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.

Le module d’achat

Chaque bloc est détaillé dans Blocs 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.

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).

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 le bloc Boutons d’achat.

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 (quantité, description complète…) ;
• 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.