# Page de collection

> **Ce que vous apprendrez**
>
> * La différence entre les mises en page Classic et Sidebar Collection
> * Comment connecter un menu personnalisé à vos pages de collection
> * Conseils pour afficher les produits et personnaliser les paramètres de conception

***

### 🧱 Options de mise en page des collections

Plain Jane inclut **deux types de mise en page** pour les pages de collection :

| Type de mise en page          | Description                                                                                           |
| ----------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Collection Classique**      | Design minimal avec un menu de catégories fixe et des icônes de tri/recherche                         |
| **Barre latérale Collection** | Inclut une barre latérale personnalisable avec des options avancées de mise en page et d'arrière-plan |

Vous pouvez basculer entre ces mises en page en activant/désactivant la `Collection Classique` ou `Barre latérale Collection` section dans le **Éditeur de thème**.

> 💡 Astuce : n'utilisez qu'une seule section de collection à la fois (masquez l'autre).

***

### 🔗 Connecter un menu de collection personnalisé

Pour créer un menu de navigation personnalisé pour votre page de collection :

1. Aller à **Boutique en ligne > Navigation** dans l'administration Shopify
2. Cliquer sur **Ajouter un menu** et nommez-le (par ex. `Menu Boutique`)
3. Ajoutez des liens pour vos catégories (par ex. Hauts, Bas, Accessoires)
4. (Optionnel) Imbriquez des éléments pour des menus déroulants de second/tiers niveau
5. Cliquer sur **Enregistrer**

Puis :

1. Ouvrez le **Éditeur de thème**
2. Sélectionnez **Collections > \[Votre collection]** dans le menu déroulant du haut
3. Cliquez sur `Collection Classique` ou `Barre latérale Collection`
4. Sous **Sélectionner le menu de collection**, choisissez le menu que vous venez de créer

***

### ⚙️ Paramètres clés de la mise en page

#### 🧭 Paramètres du menu

* **Position** : Gauche ou droite
* **Alignement du texte** : Gauche, centré ou droite
* **Taille de la police et espacement** : Ajustez l'espacement des liens de niveau principal et imbriqués

#### 🎨 Paramètres de style

* **Couleurs du menu** : Personnalisez les couleurs des liens, du survol et de l'arrière-plan
* **Titres et prix des produits** : Afficher/masquer, ajuster la taille et changer les couleurs
* **Étiquettes produit** : Activez les étiquettes « En promotion » avec couleurs et tailles personnalisées

> 💡 Astuce : utilisez des dimensions d'image cohérentes (par ex. 1000x1000 px) pour aligner les grilles de produits.

***

### 🖼 Style des images produit

* **Cadre du produit** : Ajoutez un contour au survol avec couleur et épaisseur ajustables
* **Coins de l'image** : Ajustez le rayon d'arrière-plan pour des bords nets ou arrondis
* **Couleur d'arrière-plan** : Ne fonctionne que si les images sont téléchargées avec transparence `.png`

```
Pour activer des couleurs d'arrière-plan personnalisées :
- Utilisez des PNG transparents
- Désactivez « Rendre l'arrière-plan transparent »
```

***

### 🔍 Contrôles de recherche et de tri

* **Position de l'icône** : Gauche, centré ou droite
* **Basculer la visibilité** : Masquer ou afficher les icônes individuellement
* **Paramètres de couleur** : Personnalisez les couleurs des icônes et de l'arrière-plan
* **Superposition de la barre de recherche** : Ajustez l'opacité et la couleur d'arrière-plan

Lorsque les clients cliquent sur les icônes de filtre ou de tri :

* L'icône Filtre ouvre une superposition de recherche déplaçable
* L'icône Trier permet aux clients de trier par prix, nouveauté, A-Z ou mis en avant

***

### 🧰 Extras de la collection avec barre latérale (uniquement pour la mise en page Sidebar)

* **Télécharger un habillage de barre latérale** : Ajoutez une image d'arrière-plan ou un motif
* **Opacité de la barre latérale** : Contrôlez la transparence de la barre latérale
* **Barre latérale fixe** : Activez la position fixe lorsque les utilisateurs font défiler
* **Ombre de la barre latérale** : Ajoute une ombre subtile sur le bord pour donner de la profondeur

***

### 🛠 Tri manuel des produits

> ⚠️ Important : pour contrôler l'ordre des produits dans une collection, définissez le type de tri sur **Manuel**.

Étapes :

1. Aller à **Produits > Collections** dans l'administration Shopify
2. Choisissez votre collection et cliquez sur **Trier > Manuel**
3. Faites glisser et réorganisez les produits selon vos besoins

Cet ordre se reflétera sur la page de collection côté front.

***

### 📌 Remarques sur les images produit

* Les titres/prix de produits mal alignés sont généralement causés par des tailles d'image incohérentes
* Utilisez des images carrées uniformes (par ex. 1000x1000) pour un meilleur alignement visuel

***

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