3. Création et personnalisation de votre page Collections
Pour Plain Jane et Interactive
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
Allez dans votre Admin Shopify > Produits > Collections.
Cliquer sur Créer une collection.
Nommez votre collection (par ex.,
Hauts,Bas,Accessoires).Définissez le type sur
Manuel.⚠️ Les collections manuelles vous permettent de contrôler l'ordre des produits manuellement.
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
Aller à Boutique en ligne > Navigation.
Cliquer sur Ajouter un menu.
Nommez-le quelque chose comme
Menu Boutique.Ajoutez des liens tels que :
Hauts→ Lien vers votreHautscollectionBas→ Lien vers votreBascollectionVêtements d'extérieur,Chaussures, etc.
Vous pouvez faire glisser des éléments pour les imbriquer (par ex.,
ShortssousBas).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.
Accédez à Boutique en ligne > Thèmes > Personnaliser
Utilisez le sélecteur de page déroulant pour passer à Collections modèle
Section Collection Classique
Aller à Boutique en ligne > Thèmes > Personnaliser.
Depuis le panneau de gauche, sélectionnez la Page de collection modèle.
Recherchez une section intitulée Collection Classique.
Paramètres clés :
Sélectionner le menu : Assignez le
Menu Boutiquepersonnalisé que vous avez créé.Position du menu : Choisissez
GaucheouDroite.Alignement du texte : Options pour
Gauche,Centre, ouDroite.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.
Options de recherche et de tri
Position : Aligner les icônes
Gauche,Centre, ouDroite.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
modèle, Page de collection masquez la section.
Collection ClassiqueActivez plutôt la Collection avec barre latéraleParamè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 »)
GaucheouDroiteombres 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 : 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
Mis à jour