# Page de liste de collections > **Ce que vous apprendrez** > > * Comment configurer et styliser votre page Liste de collections > * Comment personnaliser les cartes de collection 3D > * Où attribuer les collections, les images et les effets visuels *** ### 🧭 Où le trouver Dans l'éditeur de thème Shopify : 1. Aller à **Boutique en ligne > Thèmes** 2. Cliquer sur **Personnaliser** sur votre thème actif 3. Utilisez le menu déroulant en haut pour naviguer vers `Liste de collections` *** ### 🗂 Aperçu de la section La page Liste de collections est une grille stylisée de collections sélectionnées utilisant des **Cartes de collection 3D**. Chaque carte peut être liée à une collection spécifique et réagir au survol de la souris avec des effets visuels et des superpositions de texte. #### 🧱 Blocs de carte de collection Chaque carte vous permet de : * Sélectionner une **collection** à afficher * Attribuer **images vedettes** et **pour le bureau et le mobile** * Contrôler **les effets au survol** et l' **alignement du texte** * Ajuster **couleurs**, **comportement**, **l'espacement**, et **l'animation au survol** *** 🖼️ Définir l'image mise en avant > ⚠️ Les images mises en avant pour les cartes de collection sont récupérées directement depuis la configuration de la collection dans l'administration Shopify. 1. Aller à **Administration Shopify > Produits > Collections** 2. Cliquez sur la collection que vous souhaitez utiliser 3. Téléchargez une image mise en avant 4. Retournez dans l'éditeur de thème pour continuer à styliser la carte *** ### 🎛 Paramètres clés (par carte de collection) #### ✅ Commutateurs de visibilité * `Afficher l'image de la collection` * `Afficher l'en-tête` * `Afficher la description` * Activer/désactiver le contenu spécifique au survol (Image, En-tête, Description) #### 🌀 Effets de carte (bureau uniquement) * `Activer l'inclinaison` * `Activer l'éblouissement d'inclinaison` > 💡 Les effets s'affichent uniquement sur le **site en ligne**, pas dans l'aperçu de l'éditeur de thème. #### 🎨 Couleurs * Couleur d'arrière-plan * Couleur d'arrière-plan au survol * Couleurs de l'en-tête et de la description (par défaut et au survol) #### 🎯 Alignement et position Ajuster **en-tête** et **description** alignement et positionnement en pixels à l'aide de : * `curseurs Haut/Bas` et `Gauche/Droite` curseurs * Options séparées pour **par défaut** et **survol** états *** ### 📐 Paramètres de conception de la carte * **Courbure de la carte** : Arrondit les coins de la carte (par ex., `30px`) * **Titre et description personnalisés au survol** : Superposition de texte optionnelle au survol * **Arrière-plan de la carte au survol** : Téléchargez une image d'arrière-plan alternative * **Superpositions en dégradé** : Ajoutez des dégradés haut/bas au survol avec couleur + opacité *** ### 📏 Taille des images * **Dimensions de la carte sur bureau**: `740px x 350px` * **Dimensions de la carte sur mobile**: `315px x 350px` > ⚠️ Assurez-vous que toutes vos cartes de collection utilisent des tailles d'image cohérentes pour une mise en page propre *** ### 🎵 Astuce bonus Si vous utilisez la **Lecteur de musique** section avec la Liste de collections, souvenez-vous : > ⚠️ Le lecteur de musique **ne fonctionne qu'avec des `.mp3` URL de fichier directes.** Les liens vers des plateformes de streaming (par ex., Spotify, Apple Music) ne fonctionneront pas. *** ### **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-list-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.