Page liste de collections

Pour Plain Jane et Plain Jane Interactive

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. Cliquez sur Personnaliser les 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 renvoyer à une collection spécifique et répondre 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 un collection à afficher

  • Attribuer images mises en avant et mobile

  • Contrôler les effets au survol et l’alignement du texte

  • Ajuster couleurs, ombres, 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 extraites directement de la configuration de la collection dans l’admin Shopify.

  1. Aller à Admin Shopify > Produits > Collections

  2. Cliquez sur la collection que vous souhaitez utiliser

  3. Téléchargez une image mise en avant

  4. Revenez à l’éditeur de thème pour continuer à styliser la carte

🎛 Paramètres clés (par carte de collection)

✅ Bascule de visibilité

  • Afficher l’image de la collection

  • Afficher l’en-tête

  • Afficher la description

  • Basculer le contenu spécifique au survol (Image, En-tête, Description)

🌀 Effets de la carte (bureau seulement)

  • Activer l’inclinaison

  • Activer l’éblouissement à l’inclinaison

💡 Les effets s’affichent uniquement sur le site en direct, 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 :

  • 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 des cartes sur ordinateur: 740px x 350px

  • Dimensions des cartes 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, rappelez-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.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

PrécédentCollection avec barre latéraleSuivantPage produit

Mis à jour