# Section affichage de collection

### Ce que vous apprendrez

* Comment mettre en avant des produits d’une collection
* Personnaliser la mise en page, la typographie, les espacements et les styles au survol des produits
* Utilisez la **Cycle automatique** fonctionnalité pour faire défiler automatiquement les images des produits

***

### Aperçu

Le **Section affichage de collection** dans les thèmes Plain Jane et Interactive vous permet de mettre en avant des produits de n’importe quelle collection Shopify. C’est une mise en page minimaliste, axée sur l’image, idéale pour présenter des lookbooks ou des sorties en vedette.

Cette section prend en charge :

* Affichage du titre
* Mises en page flexibles en grille (1 à 6 produits par ligne sur ordinateur, 1 à 3 sur mobile)
* Espacements personnalisés et effets au survol
* Images de produits à rotation automatique en utilisant la **Cycle automatique** fonctionnalité

> 💡 Astuce : Cette section est visuellement distincte de la **Section Liste de Collections**qui affiche plusieurs collections. Ici, vous mettez en avant des produits d’une seule collection.

***

### Comment l’utiliser

1. Dans le **Éditeur de thème**, cliquez **Ajouter une section** → **Affichage de la collection**.
2. Sous **Contenu et données**:
   * Choisissez une **Collection** de votre boutique Shopify.
   * Ajoutez un **Titre de la section** (optionnel).
3. Dans le **Mise en page et affichage** panneau :
   * Ajuster **Alignement du texte** (Gauche, Centre, Droite).
   * Activez ou désactivez l’affichage de **Titres**, **Prix**, **Prix comparatif**, et des étiquettes de statut produit telles que **En rupture**, **Précommande**, ou **Promotion**.
   * Définir **Produits par ligne** pour l’ordinateur et le mobile.

***

### Fonction Cycle automatique

> 🎯 Objectif : Améliorer l’attrait visuel en faisant défiler automatiquement les images des produits.

Lorsque vous activez **Cycle automatique** sous **Effet au survol de l’image**, les images de vos produits passeront d’un angle ou d’un style à l’autre (si plusieurs sont téléchargées sur le produit dans Shopify).

#### Comment l’activer

1. Faites défiler jusqu'à **Effet au survol de l’image**.
2. Sélectionnez :
   * `Faire défiler automatiquement toutes les images`
   * Ou limiter le nombre en utilisant le **Divers** menu déroulant : `Parcourir toutes les images en boucle`, `Limiter aux 2 premières`, etc.
3. Ajuster **Durée de transition des images** (par défaut : 550 ms).

> 💡 Astuce : Pour de meilleurs résultats, assurez-vous que vos produits ont plusieurs images dans Shopify. Cette fonctionnalité ne s’activera pas pour les produits n’ayant qu’une seule image.

***

### Typographie

Vous pouvez ajuster les tailles de police pour :

* Titre de la section
* Titre du produit
* Prix produit

Des contrôles sont disponibles séparément pour l’ordinateur et le mobile.

***

### Couleurs

Personnaliser :

* Couleur d'arrière-plan
* Couleur du titre de la section
* Couleur du titre du produit

***

### Espacement

Comprend des contrôles détaillés pour :

* Padding haut et bas (ordinateur et mobile)
* Espace entre le titre de la section et les produits
* Espace entre l’image du produit, le titre et le prix
* Espacements entre les produits et les lignes

***

### Bouton Voir tout

Vous pouvez ajouter un CTA renvoyant à la collection complète :

* Personnaliser **Couleur de fond du bouton**
* Personnaliser **Couleur du texte du bouton**

***

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