Page de 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é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 : https://discord.gg/hcc2GvgZc6

• 📧 Envoyez-nous un e-mail à : [email protected]

• 💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web