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 comme les espacements, les polices, les couleurs et les options d'affichage des produits

🛠️ Pour commencer : Bases de la configuration Shopify

Cette section s'adresse aux débutants configurant leur boutique pour la première fois.

1. Créer des collections de produits

  1. Allez dans votre Admin Shopify > Produits > Collections.

  2. Cliquez sur Créer une collection.

  3. Nommez votre collection (par ex., Hauts, Bas, Accessoires).

  4. Définissez la type à Manuel.

    ⚠️ Les collections manuelles vous permettent de contrôler l'ordre des produits manuellement.

  5. Cliquez 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

  1. Aller à Boutique en ligne > Navigation.

  2. Cliquez sur Ajouter un menu.

  3. Donnez-lui un nom comme Menu Boutique.

  4. Ajoutez des liens tels que :

    • Hauts → Lien vers votre Hauts collection

    • Bas → Lien vers votre Bas collection

    • Vêtements d'extérieur, Chaussures, etc.

  5. Vous pouvez faire glisser les éléments pour les imbriquer (par ex., Shorts sous Bas).

  6. Cliquez sur Enregistrer le menu.

🎨 Personnalisation du thème : Pages de collection

Ces instructions s'appliquent aux deux Plain Jane v3 et Interactive v2 thèmes.

  1. Accédez à Boutique en ligne > Thèmes > Personnaliser les

  2. Utilisez le sélecteur de page déroulant pour passer à Collections modèle

Collections page template in theme customizer
Modèle de page Collections dans le personnalisateur de thème

Section Collection classique

  1. Aller à Boutique en ligne > Thèmes > Personnaliser les.

  2. Dans le panneau de gauche, sélectionnez le Modèle de page Collection .

  3. Recherchez une section intitulée Collection classique.

Paramètres clés :

Collection products display settings
Paramètres d'affichage des produits de la collection et options de personnalisation

  • Sélectionner le menu : Attribuez le Menu Boutique personnalisé que vous avez créé.

  • Position du menu : Choisir Gauche ou Droite.

  • Alignement du texte : Options pour Gauche, Centre, ou Droite.

  • Taille de la police et espacement : Ajustez l'espacement du menu et des liens.

  • Couleurs du menu : Personnalisez les couleurs d'arrière-plan et de texte.

  • Afficher les titres/prix des produits : Activez ou désactivez la visibilité et ajustez la taille et la couleur de la police.

  • Cadres produits : Ajoutez des bordures et des effets au survol.

  • Rayon de l'arrière-plan du produit : Ajustez les coins de nets à arrondis.

  • Rendre l'arrière-plan transparent : Fonctionne mieux avec des PNG transparents.

Collection layout options Classic vs Sidebar
Options de mise en page de la collection montrant les variantes Classique et Barre latérale

Options de recherche et de tri

  • Position : Aligner les icônes Gauche, Centre, ou Droite.

  • 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 d'arrière-plan 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 des étiquettes de réduction comme « En solde »

  • Personnaliser la couleur du texte de l'étiquette taille de la police, couleur du texte, et couleur d'arrière-plan

Téléverser des produits avec des PNG

💡 Astuce : Utilisez des PNG transparents si vous souhaitez contrôler les couleurs d'arrière-plan via l'éditeur de thème.

🧭 Collection avec barre latérale (optionnel)

Vous voulez une mise en page plus traditionnelle ? Utilisez plutôt la Collection avec barre latérale.

  1. Dans le même Modèle de page Collection modèle, masquer la Collection classique section.

  2. Activer la Collection avec barre latérale à la place.

Paramètres de la Collection avec barre latérale :

  • Attribuer un Menu

  • Position de la barre latérale : Gauche ou Droite

  • Téléverser l'arrière-plan de la barre latérale (appelé un « skin »)

  • Ajuster opacité, ombres, et défilement fixe comportement

💡 Astuce : Les barres latérales fixes restent visibles lors du défilement.

Tous les autres paramètres d'affichage tels que 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.

✅ Notes finales

  • Cliquez toujours sur Enregistrer 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.

  • Gardez des tailles d'images produits cohérentes (par ex., 1000x1000 px) pour des mises en page alignées.

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édent2. Configuration de votre page d'accueilSuivant4. Création et personnalisation de votre page produit

Mis à jour