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 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 des 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 supérieur pour sélectionner Produits > Produit par défaut

  3. Dans la barre latérale gauche, cliquez sur 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] section.

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 sur Gauche, Centre, ou Droite

Dé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

  • Activez 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 comme :

  • Tableaux de tailles

  • Politiques de retour

Personnaliser :

  • Couleur d'arrière-plan 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 infos supplémentaires comme l'expédition, l'entretien ou les matériaux

  • Cette mise en page se marie bien avec des polices minimalistes et des couleurs de thème sobres

⚠️ 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 si vous avez besoin de ces fonctionnalités.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

PrécédentPage produitSuivantSection produit (vignette)

Mis à jour