Section produit (Vignette)
Pour Plain Jane, et Plain Jane Interactive
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)
Aller à Boutique en ligne > Thèmes > Personnaliser
Accédez à Produits > Produit par défaut
Cliquer sur Ajouter une section si non déjà présent
Sélectionnez Section produit (Vignette)
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 :
Ajoutez des métachamps de couleur à vos produits
Configurez les options d'affichage des échantillons
Mettez en place les connexions de variantes de couleur
En savoir plus: Configuration des échantillons de couleur
Informations sur le mannequin
Afficher les détails du mannequin pour les produits de mode :
Ajoutez des métachamps de mannequin (taille, mensurations, taille portée)
Configurez le format d'affichage et le positionnement
Personnalisez le style et la mise en page
En savoir plus: Configuration des infos mannequin
Guides des tailles
Ajoutez des guides de tailles spécifiques au produit :
Créez des métachamps de tableau des tailles
Téléchargez des images ou tableaux du tableau des tailles
Configurez le comportement des popups
En savoir plus: Ajout de tableaux des tailles
📐 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
Mis à jour