Section produit (Vignette)

Pour Plain Jane, et Plain Jane Interactive

Ce que vous apprendrez

  • Comment configurer la mise en page « Miniature » pour les pages produit

  • Toutes les options de personnalisation pour la galerie, les prix, les boutons et les accordéons

  • Bonnes pratiques pour le formatage des images et des descriptions produit


Qu'est-ce que la mise en page Miniature ?

Le mise en page Miniature affiche les images produit dans une galerie verticale ou en grille avec des miniatures. C’est la mise en page la plus flexible et la plus utilisée dans le thème Plain Jane, idéale pour les boutiques avec plusieurs prises de vue produit.

Disponible dans :

  • ✅ Plain Jane v3

  • ✅ Plain Jane Interactive v2


🔧 Comment activer la mise en page Miniature

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

  2. Dans le menu déroulant supérieur, sélectionnez Produits > Produit par défaut

  3. Trouvez la section nommée Section produit

  4. Si une autre mise en page (par ex. Vitrine ou Défilement) est active, cliquez sur « ... » > Masquer la section

  5. Développez le Section produit et configurez chaque bloc:

    • Étiquette en promotion

    • En-tête

    • Prix

    • Description

    • Galerie

    • Variantes & Boutons

    • Accordéon Produit

💡 Astuce : Vous pouvez ajouter ou supprimer des blocs selon vos besoins en utilisant le Ajouter un bloc bouton sous cette section.


⚙️ Personnalisation de la mise en page

Cliquez sur le Section produit (pas sur les blocs) pour accéder aux paramètres de mise en page :

Position de la galerie produit

  • Déplacez la galerie d'images vers la gauche ou droite

Animation de fondu

  • Contrôle le délai d'apparition progressive de la section (0 = instantané, plus élevé = apparition plus lente)

Colonnes de la galerie (côté gauche uniquement)

  • Ajustez le nombre de miniatures affichées par rangée (1 à 6)

Taille des images de la galerie

  • Ajustez finement la taille des images séparément pour Bureau et Mobile


🏷 Étiquette En Promotion

  • Basculer la visibilité

  • Définir la couleur de fond et la couleur du texte

  • Ajuster l'espacement/la marge autour de l'étiquette


🧾 Détails du produit

Chaque bloc peut être personnalisé :

  • En-tête : Taille du titre, couleur, marge

  • Prix : Afficher/masquer la devise, taille de la police, couleur du prix

  • Description : Définir un nombre maximal de mots (ajoute un basculement « Lire la suite »)

  • Variantes & Boutons:

    • Contrôler le rayon des coins et l'espacement

    • Masquer le bouton « Produit suivant » si vous ne le souhaitez pas


🪜 Accordéons produits

Ajoutez plusieurs sections repliables en utilisant le Accordéon Produit bloc :

  • Renommez les titres (par ex. « Guide des tailles », « Retours et échanges »)

  • Personnaliser l'espacement

  • Ajouter tout texte formaté ou HTML

💡 Astuce : Gardez les accordéons minimalistes. Utilisez au maximum 2–3 pour éviter de submerger les acheteurs.


➕ Ajouter des sections personnalisées

Vous pouvez ajouter des sections classiques du thème sous la mise en page produit, telles que :

  • Flux d’images défilantes

  • Inscriptions par e-mail

  • Collections mises en avant


🖼 Conseils sur la taille des images

Pour un alignement propre du titre produit, du prix et des boutons :

  • Téléchargez toutes les images produit au même rapport d'aspect

  • Recommandé : 1000px x 1000px pour les galeries carrées

Besoin d’aide ?

Mis à jour