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 propose un système avancé de galerie d'images basé sur une grille, une interface modale en bas pour les mobiles et de vastes options de personnalisation. Cette section offre la plus grande flexibilité et des modèles UX modernes.
Fonctionnalités clés :
Galerie d'images avancée basée sur une grille
Interface modale en bas pour les appareils mobiles
Gestion des médias améliorée (images, vidéos, modèles 3D)
Sélection avancée de variantes avec nuanciers de couleur
Informations sur le mannequin et prise en charge des tableaux de tailles
Design responsive optimisé pour les mobiles
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
Cliquez sur Ajouter une section si pas déjà présent
Sélectionnez Section Produit (Vignette)
Configurer 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 et de galerie
Configuration de la galerie d'images
Nombre de colonnes de la galerie
Définir le nombre de colonnes pour la galerie sur bureau (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
Ajuster la marge entre la galerie et l'image principale
Les tailles d'image pour bureau et mobile peuvent être personnalisées
Paramètres de gap de grille et d'auto-rows pour un réglage fin
Positionnement des images
Choisir si les photos supplémentaires apparaissent au-dessus ou en 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 bas sophistiqué pour le mobile :
Modale en bas: Glisse depuis le bas avec les détails du produit
Hauteurs responsives: S'ajuste automatiquement au contenu
Convivialité tactile: Optimisé pour les interactions mobiles
Animations fluides: Durée de transition de 0,3 s
🛍️ 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 du produit - Titre et fil d'Ariane
Prix du produit - Affichage du prix avec prix promotionnel
Description du produit - Description produit en texte enrichi
Variantes du 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
Échantillons de couleurs - Interface de sélection de couleur visuelle
Tableaux de tailles - Guides de taille en pop-up ou intégrés
Accordéons personnalisés - Sections de contenu dépliables
⚙️ Personnalisation avancée
Configuration des nuanciers de couleur
Activer la sélection visuelle des couleurs :
Ajouter des métachamps de couleur à vos produits
Configurer les options d'affichage des nuanciers
Configurer les connexions de variantes de couleur
En savoir plus: Configuration des nuanciers de couleur
Informations sur le modèle
Afficher les détails du mannequin pour les produits de mode :
Ajouter des métachamps mannequin (taille, mensurations, taille portée)
Configurer le format d'affichage et le positionnement
Personnaliser le style et la mise en page
En savoir plus: Configuration des informations mannequin
Tableaux de tailles
Ajouter des guides de taille spécifiques au produit :
Créer des métachamps de tableau de tailles
Télécharger des images ou tableaux de tableau de tailles
Configurer le comportement du pop-up
En savoir plus: Ajout de tableaux de 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 le bureau
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'image mobile: Optimiser pour différentes tailles d'écran
Tailles d'image bureau: Définir les dimensions maximales des images
Espace de la grille: Ajuster finement l'espacement entre les images
Comportement responsive
Mise en page mobile: Optimisation automatique pour les appareils mobiles
Vue tablette: Taille intermédiaire pour les écrans de tablette
Mise en page bureau: Système de grille complet avec colonnes personnalisables
🎨 Bonnes pratiques
Optimisation des images
Utiliser des images de haute qualité (largeur minimale 1000 px)
Maintenir des rapports d'aspect cohérents entre les images produit
Inclure des photos lifestyle en plus des images produit seules
Optimiser la taille des fichiers pour un chargement rapide
Informations produit
Rédiger des descriptions produit claires et convaincantes
Utiliser les informations mannequin pour les produits de mode/vêtements
Inclure des tableaux de tailles pour les articles nécessitant des conseils de coupe
Configurer des nuanciers de couleur pour les produits disponibles en plusieurs couleurs
Expérience mobile
Tester la fonctionnalité de la modale en bas sur des appareils réels
S'assurer que tous les éléments interactifs sont adaptés au toucher
Garder les informations importantes visibles sans défilement
Utiliser des tailles d'image appropriées pour la visualisation mobile
🚀 Conseils de performance
Compression d'image: Utiliser des formats d'image optimisés (WebP lorsque possible)
Chargement paresseux: Chargement paresseux intégré pour de meilleures performances
Mobile First: La conception considère l'expérience mobile comme prioritaire
Efficacité de la grille: CSS Grid avancé pour un rendu optimal
Mis à jour