4. Création et personnalisation de votre page Produit
Pour Plain Jane et Interactive
📓 Remarque : Il y a un nouveau modèle de section produit Vitrine disponible qui n’est pas couvert dans cette vidéo. Pour les instructions d’installation et les détails, visitez : Section produit Vitrine
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 Mise en page Scroll (version archivée)
Où ajuster la taille de la galerie, les styles de boutons, les accordéons, et plus
📓 Remarque : La
Mise en page Scroll(anciennement appeléeMise en page archivée) est une alternative plus ancienne à la section produit par défaut. Elle est toujours disponible mais ne permet pas de personnalisation par blocs.
🛠️ Accéder à la page produit dans l’éditeur de thème
Aller à Boutique en ligne > Thèmes > Personnaliser.
Utilisez le menu déroulant en haut au centre pour sélectionner
Produits > Produit par défaut.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 individuels en dessous. Vous pouvez réordonner, supprimer ou personnaliser chacun d’eux.
Blocs courants :
Étiquette en promotion: Couleur, rembourrage 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 monétaire
Description: Prend en charge la limite de mots et le lien « Lire la suite »
Galerie: Contrôlée via les paramètres parent de la section produit
Boutons: Ajouter au panier et sélecteurs de variantes
Accordéons: À utiliser pour les tableaux des tailles, politiques de retour, FAQ, etc.
💡 Astuce : Pour ajouter un bloc, cliquez sur le
Section produit, puisAjouter 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:
GaucheouDroiteAnimation de fondu: Contrôle la façon dont le produit apparaît en fondu
Colonnes de la galerie: De 1 à 6 (disponible uniquement si la galerie est à gauche)
Dimensionnement de l’image (Bureau & Mobile): Utilisez les curseurs pour ajuster
⚠️ Certains paramètres (comme les colonnes) sont disponibles uniquement lorsque la galerie est à gauche.
🧩 Paramètres supplémentaires du bloc
Étiquette en promotion
Modifier la couleur de fond et du texte de l’étiquette
Ajuster l’espacement autour du badge
Affichage des prix
Basculer le symbole monétaire
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/ÉchangesPersonnaliser les titres et l’espacement des marges
🗂️ Section produit Mise en page Scroll (Archivée)
La Mise en page Scroll est une version archivée de la section produit qui affiche une galerie verticale complète.
Comment utiliser :
Cliquer sur Ajouter une section >
Section produit ScrollMasquez la section produit actuelle pour éviter les doublons
Personnalisez en utilisant le panneau de paramètres à droite (cette version n’utilise pas de blocs)
Différences principales :
Galerie défilante verticale avec toutes les images empilées
Idéal pour le mobile et la narration produit longue
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 (p. 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 du thème Shopify à la page produit comme sur n’importe quelle autre page :
Flux d’imagesInscription par e-mailDiaporamaListe de collections
Réorganisez et personnalisez-les pour correspondre au style de votre marque.
Besoin d’aide ?
💬 Pour l'assistance technique, rejoignez-nous sur Discord : https://discord.gg/hcc2GvgZc6
📧 Envoyez-nous un e-mail à : [email protected]
💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web
Mis à jour