# 3. Création et personnalisation de votre page Collections {% embed url="" %} ### 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
Collections page template in theme customizer

Modèle de page Collections dans le personnalisateur de thème

#### 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 :**
Collection products display settings

Paramètres d'affichage des produits de la collection et options de personnalisation

* **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.
Collection layout options Classic vs Sidebar

Options de mise en page de la collection montrant les variations Classique et avec barre latérale

#### 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 :** * 📧 **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/plain-jane-interactive/getting-started/3.-creating-and-customizing-your-collections-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.