Section produit (vignette)

Pour Plain Jane et Plain Jane Interactive

Ce que vous apprendrez

  • Comment configurer la mise en page « Vignettes » 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 descriptions produit

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

Le mise en page Vignettes affiche les images produit dans une galerie verticale ou en grille avec des vignettes. 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 Vignettes

  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 retirer 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 = apparition plus lente)

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

  • Ajustez le nombre de vignettes affichées par ligne (1 à 6)

Taille des images de la galerie

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

🏷 Étiquette en promotion

  • Activer/désactiver la visibilité

  • Définir la couleur de fond et du texte

  • Ajuster l’espacement/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 police, couleur du prix

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

  • Variantes & Boutons:

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

    • Masquer le bouton « Produit suivant » si souhaité

🪜 Accordéons produit

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

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

  • Personnalisez l’espacement

  • Ajoutez n’importe quel texte formaté ou HTML

💡 Astuce : Gardez les accordéons minimalistes. Utilisez 2–3 maximum pour ne pas 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 en vedette

🖼 Conseils sur la taille des images

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

  • Téléversez toutes les images produit au même ratio d'aspect

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

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édentSection produit (vitrine)SuivantPage À propos

Mis à jour