Page collection

Pour Plain Jane et Plain Jane Interactive

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égorie fixe et des icônes de tri/recherche

Collection de la barre latérale

Comprend 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 Collection de la barre latérale 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. Cliquez sur Ajouter un menu et nommez-le (par ex. Menu Boutique)

  3. Ajoutez des liens pour vos catégories (par ex. Tops, Bas, Accessoires)

  4. (Facultatif) Imbriquez des éléments pour des menus déroulants de 2e/3e niveau

  5. Cliquez sur Enregistrer

Puis :

  1. Ouvrez le Éditeur de thème

  2. Sélectionnez Collections > [Votre collection] dans le menu déroulant en haut

  3. Cliquez sur Collection classique ou Collection de la barre latérale

  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 et espacement de la police : Ajustez l'espacement des liens de niveau supérieur et imbriqués

🎨 Paramètres de style

  • Couleurs du menu : Personnalisez les couleurs des liens, du survol et de l'arrière-plan

  • Titres & prix des produits : Afficher/masquer, ajuster la taille et changer les couleurs

  • Étiquettes produits : Activez les étiquettes "En promotion" avec couleurs et taille personnalisées

💡 Astuce : utilisez des dimensions d'image cohérentes (par ex. 1000x1000px) pour aligner les grilles de produits.

🖼 Style des images produits

  • Cadre du produit : Ajoutez un contour au survol avec couleur et épaisseur ajustables

  • Coins de l'image : Ajustez le rayon de l'arrière-plan pour des bords nets ou arrondis

  • Couleur d’arrière-plan : Fonctionne uniquement 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 l'option "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 : Personnaliser les couleurs des icônes et de l'arrière-plan

  • Superposition de la barre de recherche : Ajustez l'opacité et la couleur de l'arrière-plan

Lorsque les clients cliquent sur les icônes de filtre ou de tri :

  • L'icône de filtre ouvre une superposition de recherche déplaçable

  • L'icône de tri permet aux clients de trier par prix, nouveautés, 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 la 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 lors du défilement des utilisateurs

  • Ombre de la barre latérale : Ajoute une ombre subtile sur le bord pour 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 en front-end.

📌 Remarques sur les images des produits

  • Des 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

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édentDisposition du menu compact (menu global)SuivantCollection classique

Mis à jour