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 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)
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
Cliquer sur Ajouter une section
Sélectionnez Section produit (Vitrine)
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
Titre du produit: Titre bien visible
Affichage des prix: Prix clair avec indicateurs de promotion
Description produit: Contenu riche en texte
Sélection de variante: 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 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
Mis à jour