# 3. Création et personnalisation de votre page Collections

{% embed url="<https://www.youtube.com/watch?v=_KZdEQFOLfM>" %}

### Ce que vous apprendrez

* Comment créer et organiser des collections dans Shopify
* Comment créer et attribuer des menus aux pages de collection
* Comment utiliser et personnaliser la « Collection Classique » et la « Collection avec barre latérale » dans les thèmes Plain Jane v3 et Interactive v2
* Comment modifier les paramètres de conception tels que les espacements, polices, couleurs et options d'affichage des produits

### 🛠️ Premiers pas : configuration de base de Shopify

Cette section est destinée aux débutants qui configurent leur boutique pour la première fois.

#### 1. Créer des collections de produits

1. Allez dans votre **Admin Shopify** > **Produits** > **Collections**.
2. Cliquer sur **Créer une collection**.
3. Nommez votre collection (par ex., `Hauts`, `Bas`, `Accessoires`).
4. Définissez le **type** sur `Manuel`.

   > ⚠️ Les collections manuelles vous permettent de contrôler l'ordre des produits manuellement.
5. Cliquer sur **Enregistrer**, puis utilisez le **Parcourir** bouton pour ajouter des produits.

Répétez pour chaque catégorie.

#### 2. Créer un menu pour la barre latérale de votre collection

1. Aller à **Boutique en ligne** > **Navigation**.
2. Cliquer sur **Ajouter un menu**.
3. Nommez-le quelque chose comme `Menu Boutique`.
4. Ajoutez des liens tels que :
   * `Hauts` → Lien vers votre `Hauts` collection
   * `Bas` → Lien vers votre `Bas` collection
   * `Vêtements d'extérieur`, `Chaussures`, etc.
5. Vous pouvez faire glisser des éléments pour les imbriquer (par ex., `Shorts` sous `Bas`).
6. Cliquer sur **Enregistrer le menu**.

***

### 🎨 Personnalisation du thème : pages de collection

Ces instructions s'appliquent à la fois à **Plain Jane v3** et **Interactive v2** thèmes.

1. Accédez à **Boutique en ligne** > **Thèmes** > **Personnaliser**
2. Utilisez le sélecteur de page déroulant pour passer à **Collections** modèle

#### Section Collection Classique

1. Aller à **Boutique en ligne** > **Thèmes** > **Personnaliser**.
2. Depuis le panneau de gauche, sélectionnez la **Page de collection** modèle.
3. Recherchez une section intitulée **Collection Classique**.

**Paramètres clés :**

* **Sélectionner le menu** : Assignez le `Menu Boutique` personnalisé que vous avez créé.
* **Position du menu** : Choisissez `Gauche` ou `Droite`.
* **Alignement du texte** : Options pour `Gauche`, `Centre`, ou `Droite`.
* **Taille de police et espacements** : Ajustez les espacements du menu et des liens.
* **Couleurs du menu** : Personnalisez les couleurs de fond et de texte.
* **Afficher titres/prix des produits** : Activez ou désactivez la visibilité et ajustez la taille et la couleur de la police.
* **Cadres des produits** : Ajoutez des bordures et des effets au survol.
* **Rayon d'arrière-plan du produit** : Ajustez les coins de carrés à arrondis.
* **Rendre l'arrière-plan transparent** : Fonctionne mieux avec des PNGs transparents.

#### Options de recherche et de tri

* **Position** : Aligner les icônes `Gauche`, `Centre`, ou `Droite`.
* **Couleurs** : Personnalisez les couleurs des icônes et du menu déroulant.
* **Paramètres de superposition de recherche**:
  * Ajuster **opacité de l'arrière-plan**
  * Définir **couleur de fond de la zone de recherche**
* **Menu de tri** : Choisissez comment les produits sont triés : `En vedette`, `Les plus récents`, `Prix`, etc.

#### Étiquettes de promotion

* Afficher les étiquettes de réduction comme « En solde »
* Personnaliser la couleur du texte de l'étiquette **taille de la police**, **couleur de fond**, et **téléchargement de produits avec PNGs**

#### 💡 Astuce : Utilisez des PNGs transparents si vous souhaitez contrôler les couleurs d'arrière-plan à l'aide de l'éditeur de thème.

> 🧭 Collection avec barre latérale (optionnelle)

***

### Vous voulez une mise en page plus traditionnelle ? Utilisez plutôt la Collection avec barre latérale.

Dans le même

1. modèle, **Page de collection** masquez **la** section. `Collection Classique` Activez plutôt la Collection avec barre latérale
2. **Paramètres de la collection avec barre latérale :** Attribuez un

**Menu**

* Position de la barre latérale : `Télécharger l'arrière-plan de la barre latérale`
* (appelé un « skin ») `Gauche` ou `Droite`
* **ombres** défilement fixe
* Ajuster **opacité**, **comportement**, et **💡 Astuce : Les barres latérales fixes restent visibles lors du défilement.** Tous les autres paramètres d'affichage comme les infos produit, les étiquettes et les icônes de recherche/tri fonctionnent de la même manière que dans la section Collection Classique.

> ✅ Remarques finales

dans l'éditeur de thème après avoir effectué des modifications.

***

### Si les modifications n'apparaissent pas immédiatement, essayez d'actualiser la page.

* Cliquez toujours **Enregistrer** Gardez des tailles d'images produits cohérentes (par ex., 1000x1000px) pour des mises en page alignées.
* Si les modifications n'apparaissent pas immédiatement, essayez d'actualiser la page.
* Conservez des tailles d'images produits cohérentes (par ex., 1000x1000 px) pour des mises en page alignées.

### **Besoin d’aide ?**

* 💬 **Pour l'assistance technique, rejoignez-nous 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