# Section produit (Vitrine) > **Ce que vous apprendrez** > > * Comment configurer et personnaliser la mise en page produit « Vitrine », la mise en page traditionnelle côte à côte > * Options de configuration pour les galeries d'images, le positionnement et le comportement responsive > * Quand utiliser cette mise en page plutôt que la mise en page moderne Vignettes *** ## 🎯 Qu'est-ce que la mise en page Vitrine ? **Section produit (Vitrine)** offre une mise en page produit traditionnelle côte à côte avec galeries de vignettes et affichage classique des informations produit. Cette mise en page est idéale pour les boutiques qui préfèrent une expérience e‑commerce plus conventionnelle avec des schémas de navigation familiers. **Fonctionnalités clés :** * Système de galerie de vignettes traditionnel * Mise en page côte à côte des images et des informations produit * Positionnement d'image configurable (gauche/droite) * Colonnes et espacements de la galerie personnalisables * Design responsive pour mobile avec empilement * Hiérarchie classique des informations produit Disponible dans : * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ *** ## 🔧 Comment activer la section produit (Vitrine) 1. Aller à **Boutique en ligne > Thèmes > Personnaliser** 2. Accédez à **Produits > Produit par défaut** 3. Si une autre section produit est actuellement active : * Cliquez sur la section produit existante * Sélectionnez **Supprimer la section** 4. Cliquer sur **Ajouter une section** 5. Sélectionnez **Section produit (Vitrine)** 6. Configurez la mise en page et les blocs selon vos besoins *** ## 📐 Configuration de la mise en page ### **Positionnement de l'image et des informations produit** **Inverser infos produit & image** * Basculer pour déplacer les informations produit sur le côté gauche * Par défaut : images à gauche, informations produit à droite * Inversé : informations produit à gauche, images à droite **Configuration de la galerie d'images** * **Inverser les photos supplémentaires**: Contrôlez si les vignettes apparaissent au‑dessus ou en dessous de l'image principale * **Nombre de colonnes de la galerie**: Définissez le nombre de colonnes de vignettes (1-6) * **Marges de la galerie**: Ajustez l'espacement autour de la galerie d'images ### **Comportement réactif** **Mise en page ordinateur** * Mise en page côte à côte avec proportions configurables * La galerie d'images occupe environ 60 % de la largeur * Les informations produit occupent les 40 % restants **Mise en page mobile** * S'empile automatiquement en colonne unique * L'image mise en avant s'affiche en premier * Galerie de vignettes sous l'image principale * Les informations produit suivent les images *** ## 🖼️ Options de la galerie d'images ### **Configuration de la galerie** **Nombre de colonnes** * Définissez 1 à 6 colonnes pour l'affichage des vignettes * Peut être remplacé par produit via des métachamps * Le mobile ajuste automatiquement pour un affichage optimal **Dimensionnement des images** * **Taille des images sur ordinateur**: Contrôlez les dimensions maximales des images * **Taille des images sur mobile**: Optimisez pour les écrans plus petits * **Marges de la galerie**: Affinez l'espacement entre les éléments **Positionnement de la galerie** * **Placer des photos supplémentaires sous la principale**: Déplacer les vignettes sous l'image mise en avant * **Inverser les photos supplémentaires**: Changer l'ordre des vignettes * **Espace de la grille**: Ajuster l'espacement entre les images miniatures ### **Affichage des images** **Image mise en avant** * Grande image produit principale avec fonctionnalité de zoom * Cliquez pour ouvrir en plein écran * Transitions fluides entre les images * Prise en charge de plusieurs types de médias (images, vidéos) **Navigation par vignettes** * Cliquez sur les vignettes pour changer l'image principale * Effets au survol pour un meilleur retour utilisateur * Rapports d'aspect cohérents recommandés * Chargement différé pour les performances *** ## 📱 Optimisation mobile ### **Design réactif** **Comportement de la mise en page mobile** * Empilement automatique des colonnes pour les appareils mobiles * Tailles de vignettes optimisées pour l'interaction tactile * Navigation simplifiée pour les petits écrans * Amélioration des performances de chargement **Interactions tactiles** * Prise en charge des gestes de balayage pour la navigation d'images * Dimensions des vignettes adaptées au tactile * Placement des boutons optimisé pour le mobile * Accessibilité améliorée pour les appareils tactiles *** ## ⚙️ Options de personnalisation ### **Paramètres d'animation** * **Durée du fondu**: Contrôlez le timing des transitions entre les images * **Transition de page**: Définissez l'animation globale au chargement de la page * **Effets au survol**: Configurez le comportement au survol des vignettes ### **Ajustements fins de la mise en page** * **Contrôles de marge**: Ajustez l'espacement autour de tous les éléments * **Options d'alignement**: Contrôlez le positionnement du texte et des éléments * **Personnalisation des couleurs**: Assortir les couleurs de votre marque * **Paramètres de typographie**: Contrôlez les tailles de police et le style *** ## 🛍️ Affichage des informations produit La section produit (Vitrine) conserve la hiérarchie traditionnelle des informations produit : ### **Ordre des informations** 1. **Titre du produit**: Titre bien visible 2. **Affichage des prix**: Prix clair avec indicateurs de promotion 3. **Description produit**: Contenu riche en texte 4. **Sélection de variante**: Taille, couleur et autres options 5. **Sélecteur de quantité**: Contrôles d'ajout au panier 6. **Boutons d'action**: Boutons Ajouter au panier et Acheter maintenant ### **Fonctionnalités supplémentaires** * **Badges de promotion**: Mettre en valeur les réductions et promotions * **Indicateurs de stock**: Afficher le statut de disponibilité * **Avis produit**: Intégration avec les applications d'avis * **Partage social**: Boutons de partage pour les réseaux sociaux *** ## 🎨 Bonnes pratiques ### **Lignes directrices pour les images** * Utilisez des rapports d'aspect cohérents pour toutes les images produit * Largeur minimale de 1000 px pour un affichage net * Incluez plusieurs angles et plans de détail * Optimisez la taille des fichiers pour un chargement rapide ### **Considérations sur la mise en page** * Testez sur différentes tailles d'écran et appareils * Assurez‑vous que la hiérarchie des informations est claire * Gardez les détails essentiels au‑dessus de la ligne de flottaison * Utilisez efficacement l'espace blanc pour un aspect épuré ### **Expérience utilisateur** * Rendez la navigation par vignettes intuitive * Assurez des temps de chargement d'images rapides * Testez les interactions tactiles sur les appareils mobiles * Fournissez des appels à l'action clairs *** ## 🔄 Quand utiliser la section produit (Vitrine) ### **Idéal pour :** * Marques de vente au détail traditionnelles * Boutiques aux attentes clients conventionnelles * Produits qui bénéficient de galeries de vignettes détaillées * Marques souhaitant des schémas e‑commerce familiers ### **Envisagez plutôt la section produit (Vignette) si :** * Vous voulez l'expérience mobile la plus moderne * Vos clients préfèrent des interactions de type application * Vous avez besoin de fonctionnalités avancées comme des modales en bas * L'optimisation mobile est votre priorité absolue *** ## 🚀 Considérations de performance * **Optimisation des images**: Utilisez le format WebP lorsque c'est possible * **Chargement paresseux**: Intégré pour améliorer la vitesse des pages * **Images responsives**: Optimisation automatique des tailles * **Performance mobile**: Optimisé pour les connexions lentes *** --- # 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-showcase.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.