# Section produit (Vignette) > **Ce que vous apprendrez** > > * Comment configurer la mise en page « Vignette », la mise en page moderne par défaut dans Plain Jane v3.1 > * Options de personnalisation avancées incluant le système de grille, les modales mobiles et la gestion des médias > * Bonnes pratiques pour les images produit, les variantes et l'optimisation mobile *** ## 🎯 Qu'est-ce que la mise en page Vignette ? **Section produit (Vignette)** est la mise en page produit moderne par défaut dans Plain Jane v3.1. Elle présente un système avancé de gestion d'images basé sur une grille, une interface modale inférieure pour mobile et de larges options de personnalisation. Cette section offre la plus grande flexibilité et des patterns UX modernes. **Fonctionnalités clés :** * Galerie d'images avancée basée sur une grille * Interface modale inférieure pour appareils mobiles * Gestion améliorée des médias (images, vidéos, modèles 3D) * Sélection avancée de variantes avec échantillons de couleur * Support des informations sur le mannequin et du tableau des tailles * Design réactif optimisé pour mobile * Colonnes et espacements de la galerie personnalisables Disponible dans : * ✅ Plain Jane v3.1+ (Par défaut) * ✅ Plain Jane Interactive v2+ *** ## 🔧 Comment activer la section produit (Vignette) 1. Aller à **Boutique en ligne > Thèmes > Personnaliser** 2. Accédez à **Produits > Produit par défaut** 3. Cliquer sur **Ajouter une section** si non déjà présent 4. Sélectionnez **Section produit (Vignette)** 5. Configurez les blocs et les paramètres selon les besoins > 💡 **Remarque**: La section produit (Vignette) est la section par défaut dans les nouvelles installations de Plain Jane v3.1. *** ## 📱 Options de mise en page & galerie ### **Configuration de la galerie d'images** **Nombre de colonnes de la galerie** * Définissez le nombre de colonnes pour la galerie sur ordinateur (1 à 6 colonnes) * Le mobile s'optimise automatiquement pour les écrans plus petits * Peut être remplacé par produit via des métachamps **Espacement de la galerie** * Ajustez la marge entre la galerie et l'image principale * Les tailles d'image pour ordinateur et mobile peuvent être personnalisées * Paramètres de gap de grille et d'auto-rows pour un réglage fin **Positionnement des images** * Choisissez si les photos supplémentaires apparaissent au-dessus ou au-dessous de l'image principale * Inverser la disposition image et informations produit * Options de positionnement spécifiques au mobile ### **Expérience modale mobile** La section produit (Vignette) inclut un système modale inférieur sophistiqué pour mobile : * **Modale inférieure**: Glisse depuis le bas avec les détails du produit * **Hauteurs réactives**: S'ajuste automatiquement au contenu * **Adapté au tactile**: Optimisé pour les interactions mobiles * **Animations fluides**: Durée de transition de 0,3s *** ## 🛍️ Blocs d'information produit La section produit (Vignette) prend en charge des blocs modulaires pouvant être réordonnés : ### **Blocs principaux** * **Badge de promotion** - Afficher les indicateurs de promotion/remise * **En-tête produit** - Titre et navigation fil d'Ariane * **Prix produit** - Affichage du prix avec prix promotionnel * **Description produit** - Description produit en texte enrichi * **Variantes produit** - Sélecteurs de taille, couleur et autres variantes * **Boutons produit** - Boutons Ajouter au panier et Acheter maintenant ### **Blocs avancés** * **Infos mannequin** - Afficher les mensurations et informations du mannequin * **Nuanciers de couleurs** - Interface visuelle de sélection des couleurs * **Guides des tailles** - Guides de tailles en pop-up ou intégrés * **Accordéons personnalisés** - Sections de contenu extensibles *** ## ⚙️ Personnalisation avancée ### **Configuration des échantillons de couleur** Activez la sélection visuelle des couleurs : 1. Ajoutez des métachamps de couleur à vos produits 2. Configurez les options d'affichage des échantillons 3. Mettez en place les connexions de variantes de couleur **En savoir plus**: [Configuration des échantillons de couleur](/plain-jane-docs-v2-fr/plain-jane-interactive/advanced/setting-up-color-swatches.md) ### **Informations sur le mannequin** Afficher les détails du mannequin pour les produits de mode : 1. Ajoutez des métachamps de mannequin (taille, mensurations, taille portée) 2. Configurez le format d'affichage et le positionnement 3. Personnalisez le style et la mise en page **En savoir plus**: [Configuration des infos mannequin](/plain-jane-docs-v2-fr/readme-1/advanced/setting-up-model-info.md) ### **Guides des tailles** Ajoutez des guides de tailles spécifiques au produit : 1. Créez des métachamps de tableau des tailles 2. Téléchargez des images ou tableaux du tableau des tailles 3. Configurez le comportement des popups **En savoir plus**: [Ajout de tableaux des tailles](/plain-jane-docs-v2-fr/readme-1/advanced/how-to-add-size-charts-to-each-product.md) *** ## 📐 Options de personnalisation ### **Paramètres de mise en page** * **Inverser infos produit & image**: Inverser l'ordre de la mise en page * **Inverser les photos supplémentaires**: Contrôler le positionnement de la galerie * **Nombre de colonnes de la galerie**: 1 à 6 colonnes pour ordinateur * **Marges de la galerie**: Ajuster l'espacement autour des images ### **Options de style** * **Durée du fondu**: Contrôler les animations de transition de page * **Tailles d'images mobiles**: Optimiser pour différentes tailles d'écran * **Tailles d'images pour ordinateur**: Définir les dimensions maximales des images * **Espace de la grille**: Ajuster finement l'espacement entre les images ### **Comportement réactif** * **Mise en page mobile**: Optimisation automatique pour les appareils mobiles * **Vue tablette**: Taille intermédiaire pour les écrans tablette * **Mise en page ordinateur**: Système de grille complet avec colonnes personnalisables *** ## 🎨 Bonnes pratiques ### **Optimisation des images** * Utilisez des images de haute qualité (largeur minimale 1000px) * Maintenez des ratios d'aspect cohérents entre les images produit * Incluez des photos lifestyle en plus des images produit seules * Optimisez la taille des fichiers pour un chargement rapide ### **Informations produit** * Rédigez des descriptions produit claires et convaincantes * Utilisez les informations mannequin pour les produits de mode/vêtements * Incluez des tableaux des tailles pour les articles nécessitant des conseils d'ajustement * Mettez en place des échantillons de couleur pour les produits disponibles en plusieurs couleurs ### **Expérience mobile** * Testez la fonctionnalité de la modale inférieure sur des appareils réels * Assurez-vous que tous les éléments interactifs sont compatibles tactile * Gardez les informations importantes visibles sans avoir à faire défiler * Utilisez des tailles d'image appropriées pour la consultation mobile *** ## 🚀 Conseils de performance * **Compression d'images**: Utilisez des formats d'image optimisés (WebP lorsque possible) * **Chargement paresseux**: Chargement paresseux intégré pour de meilleures performances * **Mobile-First**: La conception privilégie l'expérience mobile en priorité * **Efficacité de la grille**: CSS Grid avancé pour un rendu optimal *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/plain-jane-docs-v2-fr/readme-1/pages-and-menus/product-page/product-section-thumbnail.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.