Section produit (vitrine)
Pour Plain Jane et Plain Jane Interactive
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 par rapport à la mise en page moderne Miniature
🎯 Qu'est-ce que la mise en page Vitrine ?
Section Produit (Vitrine) propose une mise en page produit traditionnelle côte à côte avec des galeries de vignettes et un 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 image et informations produit
Positionnement d'image configurable (gauche/droite)
Colonnes et espacements de la galerie personnalisables
Design mobile responsive avec mise en pile
Hiérarchie classique des informations produit
Disponible dans :
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
🔧 Comment activer la Section Produit (Vitrine)
Aller à Boutique en ligne > Thèmes > Personnaliser
Accédez à Produits > Produit par défaut
Si une autre section produit est actuellement active :
Cliquez sur la section produit existante
Sélectionnez Supprimer la section
Cliquez sur Ajouter une section
Sélectionnez Section Produit (Vitrine)
Configurez la mise en page et les blocs selon les 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 du 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ôler si les vignettes apparaissent au‑dessus ou en dessous de l'image principale
Nombre de colonnes de la galerie: Définir le nombre de colonnes de vignettes (1-6)
Marges de la galerie: Ajuster l'espacement autour de la galerie d'images
Comportement responsive
Mise en page bureau
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
Se positionne 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éfinir 1 à 6 colonnes pour l'affichage des vignettes
Peut être remplacé par produit via des métachamps
Le mobile s'ajuste automatiquement pour une visualisation optimale
Dimensionnement des images
Taille des images sur bureau: Contrôler les dimensions maximales des images
Taille des images sur mobile: Optimiser pour les écrans plus petits
Marges de la galerie: Ajuster finement l'espacement entre les éléments
Positionnement de la galerie
Placer des photos supplémentaires sous l'image 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 fonction de zoom
Cliquer 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
Cliquer sur les vignettes pour changer l'image principale
Effets au survol pour un meilleur retour utilisateur
Des proportions d'image cohérentes sont recommandées
Chargement différé pour de meilleures performances
📱 Optimisation mobile
Conception responsive
Comportement de la mise en page mobile
Empilement automatique des colonnes sur les appareils mobiles
Tailles de vignettes optimisées pour l'interaction tactile
Navigation simplifiée pour les petits écrans
Performance de chargement améliorée
Interactions tactiles
Prise en charge des gestes de balayage pour la navigation d'images
Dimensionnement des vignettes adapté 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ôler le timing des transitions entre les images
Transition de page: Définir l'animation de chargement globale de la page
Effets au survol: Configurer le comportement au survol des vignettes
Ajustements fins de la mise en page
Contrôles de marge: Ajuster l'espacement autour de tous les éléments
Options d'alignement: Contrôler le positionnement du texte et des éléments
Personnalisation des couleurs: Assortir les couleurs de votre marque
Paramètres de typographie: Contrôler 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
Titre du produit: Titre mis en évidence
Affichage du prix: Prix clair avec indicateurs de promotion
Description du produit: Contenu texte enrichi
Sélection de variantes: Taille, couleur et autres options
Sélecteur de quantité: Contrôles d'ajout au panier
Boutons d'action: Boutons Ajouter au panier et Acheter maintenant
Fonctionnalités supplémentaires
Badges de vente: Mettre en avant réductions et promotions
Indicateurs de stock: Afficher l'état de disponibilité
Avis produit: Intégration avec des applications d'avis
Partage social: Boutons de partage pour les réseaux sociaux
🎨 Bonnes pratiques
Directives pour les images
Utilisez des proportions d'image cohérentes pour toutes les images produit
Largeur minimale de 1000 px pour un affichage net
Inclure plusieurs angles et plans de détail
Optimiser la taille des fichiers pour un chargement rapide
Considérations sur la mise en page
Testez sur diverses tailles d'écran et appareils
Assurez‑vous que la hiérarchie d'informations est claire
Gardez les détails essentiels au‑dessus de la ligne de flottaison
Utilisez l'espace blanc efficacement pour une apparence épurée
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 avec des 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 (Miniature) 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 possible
Chargement paresseux: Intégré pour améliorer la vitesse de page
Images responsives: Optimisation automatique de la taille
Performance mobile: Optimisé pour les connexions lentes
Mis à jour