4. Création et personnalisation de votre page produit

Pour Plain Jane et Interactive

📓 Remarque : Il y a une nouvelle mise en page Product Section Showcase disponible qui n'est pas couverte dans cette vidéo. Pour les instructions d'installation et les détails, visitez : Product Section Showcase

Ce que vous apprendrez

  • Comment personnaliser la mise en page de la page produit dans Plain Jane v3 et Interactive v2

  • Tous les types de blocs et options de style à l'intérieur de la section produit

  • Comment utiliser la section produit Scroll Layout (version archivée)

  • Où ajuster la taille de la galerie, les styles de boutons, les accordéons, et plus

📓 Remarque : Le Scroll Layout (anciennement appelé Archived Layout) est une alternative plus ancienne à la section produit par défaut. Il est toujours disponible mais ne propose pas de personnalisation basée sur des blocs.

🛠️ Accéder à la page produit dans l'éditeur de thème

  1. Aller à Boutique en ligne > Thèmes > Personnaliser les.

  2. Utilisez le menu déroulant en haut au centre pour sélectionner Produits > Produit par défaut.

  3. Pour prévisualiser un produit différent, cliquez Changer dans la barre de prévisualisation et sélectionnez un autre article.

🧱 Blocs principaux de la section produit

La page produit est composée d'un Section produit et d'un blocs en dessous. Vous pouvez réorganiser, supprimer ou personnaliser chacun d'eux.

Blocs courants :

  • Étiquette En Promotion : Couleur, padding et espacement personnalisés

  • En-tête : Contrôle l'affichage du titre du produit

  • SKU : Optionnel, affiche le SKU si disponible

  • Prix : Afficher avec ou sans symbole de devise

  • Description : Prend en charge la limite de mots et le lien « Lire la suite »

  • Galerie : Contrôlé via les paramètres parent de la section produit

  • Boutons : Ajouter au panier et sélecteurs de variantes

  • Accordéons : À utiliser pour les guides de tailles, politiques de retour, FAQ, etc.

💡 Astuce : Pour ajouter un bloc, cliquez sur le Section produit, puis Ajouter un bloc.

🎛️ Paramètres de mise en page de la section produit

Cliquez sur le niveau supérieur Section produit pour accéder à ces options de mise en page :

  • Position de l'image: Gauche ou Droite

  • Animation de fondu : Contrôle la façon dont le produit apparaît en fondu

  • Colonnes de la galerie : De 1 à 6 (disponible seulement si la galerie est à gauche)

  • Dimensionnement de l'image (Bureau & Mobile) : Utilisez les curseurs pour ajuster

⚠️ Certains paramètres (comme les colonnes) ne sont disponibles que lorsque la galerie est à gauche.

🧩 Paramètres supplémentaires des blocs

Étiquette En Promotion

  • Changer la couleur de fond et du texte de l'étiquette

  • Ajuster l'espacement autour du badge

Affichage du prix

  • Activer/désactiver le symbole de la devise

  • Ajuster la taille de la police pour les styles luxury/minimal

Bloc Description

  • Définir la couleur, les marges et la limite de mots

  • Active le lien d'extension « Lire la suite »

Boutons et variantes

  • Activer/désactiver le bouton Produit suivant

  • Personnaliser le rayon des coins, les marges, l'espacement

Accordéons

  • Ajouter plusieurs : par ex., Tableau des tailles, Retours/Échanges

  • Personnaliser les titres et l'espacement des marges

🗂️ Section produit Scroll Layout (archivée)

Le Scroll Layout est une version archivée de la section produit qui affiche une galerie verticale complète.

Comment l'utiliser :

  1. Cliquez sur Ajouter une section > Défilement de la section produit

  2. Masquez la section produit actuelle pour éviter les doublons

  3. Personnalisez en utilisant le panneau de paramètres à droite (cette version n'utilise pas de blocs)

Principales différences :

  • Galerie à défilement vertical avec toutes les images empilées

  • Parfait pour le mobile et le storytelling produit long format

  • Pas de prise en charge des blocs — tous les paramètres sont configurés dans le panneau de section

  • Moins de fonctionnalités de personnalisation (par ex., pas de coins arrondis)

💡 Astuce : Utilisez ceci si vous préférez l'ancienne expérience de défilement des versions précédentes du thème.

➕ Ajout de sections supplémentaires à la page produit

Vous pouvez ajouter d'autres sections de thème Shopify à la page produit comme sur n'importe quelle autre page :

  • Flux d’images

  • Inscription par e-mail

  • Diaporama

  • Liste de collections

Réorganisez et personnalisez celles-ci pour qu'elles correspondent au style de votre marque.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

Précédent3. Création et personnalisation de votre page CollectionsSuivant5. Configuration des pages de mot de passe et de la liste d'attente par e-mail

Mis à jour