Section produit (Vitrine)

Pour Plain Jane, et Plain Jane Interactive

Ce que vous apprendrez

• Comment configurer et personnaliser la mise en page produit « Vitrine » dans Plain Jane

• Options de conception clés comme l'alignement mobile, les barres de défilement, le zoom et le style des popups

• Quand utiliser cette mise en page pour offrir la meilleure expérience client

---

🖼 Qu'est-ce que la mise en page Vitrine ?

Le Mise en page Vitrine présente une disposition d'image centrée avec les informations produit de chaque côté. Elle est idéale pour les boutiques minimalistes et modernes qui veulent mettre en valeur les visuels tout en gardant la sélection de variantes et les boutons d'achat facilement accessibles.

Cette mise en page est disponible dans :

• ✅ Plain Jane v3+

• ✅ Plain Jane Interactive v2+

---

🔧 Comment activer la mise en page Vitrine

1. Aller à Boutique en ligne > Thèmes > Personnaliser

2. Utilisez le menu déroulant en haut pour sélectionner Produits > Produit par défaut

3. Dans la barre latérale gauche, cliquez Ajouter une section > Section produit [Vitrine]

4. Masquez toutes les autres sections de mise en page produit (comme Section produit ou Section produit [Défilement])

5. Cliquez dans la section pour configurer votre mise en page

💡 Astuce : vous pouvez renommer cette section pour faciliter la navigation en utilisant le menu « ... » à côté du titre de la section.

---

⚙️ Paramètres de mise en page et d'affichage

Situés dans la barre latérale droite après avoir sélectionné la Section produit [Vitrine] Activez plutôt la Collection avec barre latérale

Mise en page Bureau

• Choisissez parmi plusieurs styles de mise en page pour organiser la galerie et les informations produit

  • Galerie centrée – Variantes à droite (par défaut)

Alignement des informations produit sur mobile

• Alignez le texte produit sur mobile à Gauche, Centre, ou Droite

Placer la description sous les boutons (mobile)

• Activez pour placer les descriptions et les accordéons sous le bouton « Ajouter au panier »

---

📊 Barre de progression de défilement mobile

Ajoutez un indicateur de défilement à la galerie d'images mobile :

• Couleur de la piste – barre d'arrière-plan (dégradé ou uni)

• Couleur de l'indicateur – indicateur de défilement au premier plan

---

🔍 Bouton de zoom mobile

• Activer pour afficher/masquer l'icône de zoom d'image sur mobile

• Personnalisez la couleur du bouton (Couleur du bouton de zoom mobile)

---

🧾 Popup d'informations supplémentaires

Ce paramètre contrôle le accordéon popup si vous l'utilisez pour des éléments tels que :

• Tableaux des tailles

• Politiques de retour

Personnaliser :

• Couleur de fond du popup

• Superpositions en dégradé

• Paramètres de transparence/opacité

---

🧪 Astuces pro

• Utilisez des images produit haute résolution, carrées ou en portrait pour un meilleur impact

• Ajoutez des accordéons produit pour des informations complémentaires comme la livraison, l'entretien ou les matériaux

• Cette mise en page s'accorde bien avec des polices minimalistes et des couleurs de thème atténuées

⚠️ Attention : cette mise en page ne prend pas en charge les vignettes d'image ni le défilement d'images. Utilisez Vignette ou Défilement les mises en page si vous avez besoin de ces fonctionnalités.

Besoin d’aide ?

• 💬 Rejoignez notre communauté sur Discord : https://discord.gg/hcc2GvgZc6

• 📧 Envoyez-nous un e-mail à : [email protected]

• 💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web