# Section produit (Vignette)

> **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 ?**

* 💬 **Rejoignez notre communauté sur Discord :** <https://discord.gg/hcc2GvgZc6>
* 📧 **Envoyez-nous un e-mail à :** <support@openspaces.design>
* 💻 **Discutez en direct avec nous :** Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web