# 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 :** * 📧 **Envoyez-nous un e-mail à :** * 💻 **Discutez en direct avec nous :** Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/plain-jane-docs-v2-fr/readme-1/pages-and-menus/collection-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.