Une page de collection mal configurée, c’est des visiteurs qui repartent sans cliquer. Les pages statiques bâclées (FAQ, Contact, Retours), c’est de l’abandon de panier évitable. Voici les paramètres clés à régler une bonne fois pour toutes sur Shopify.
En 30 secondes
Cette leçon couvre la configuration des collections et des pages dans Shopify : mise en page des grilles produits, paramètres d’affichage mobile/desktop, images en survol et personnalisation des pages statiques (Contact, FAQ, Retours). C’est rapide à faire, mais les bons réglages dès le départ évitent de tout reprendre plus tard.
Pourquoi soigner les collections et les pages statiques
Les collections, c’est la vitrine de ta boutique. Un visiteur qui arrive sur ta page de catégorie doit comprendre en moins de 3 secondes ce que tu vends et avoir envie de cliquer. Les pages statiques (Contact, FAQ, Retours) rassurent l’acheteur et réduisent l’abandon de panier. Négliger ces deux éléments, c’est perdre des conversions gratuitement.
Configurer la page « Liste des collections »
Comme le précise Jérôme : « je vais aller très rapidement parce que je n’ai pas besoin de cette page mais toi fais le sérieusement ». Ne bâcle pas cette étape.
- Accède à l’éditeur de thème Shopify → section Liste des collections.
- Choisis le rapport d’image : préfère Portrait ou Carré selon ton identité visuelle. Évite le format paysage pour les vignettes de collection.
- Règle le nombre de colonnes sur desktop : entre 3 et 4 colonnes est le sweet spot. En dessous de 3, c’est trop aéré ; au-dessus de 5, c’est illisible.
- Sur mobile, reste sur 2 colonnes. Une seule colonne prend trop de place et force le scroll.
- Pour personnaliser l’image d’une collection, va dans Produits → Collections et ajoute une image directement dans la fiche collection. Sans ça, Shopify prend automatiquement la première image du premier produit.
Configurer la page « Collection » (grille produits)
C’est la page que voit ton client quand il clique sur une catégorie. Chaque réglage ici impacte directement le taux de clic sur tes produits.
- Active l’affichage de la description de collection pour le SEO et la clarté.
- Laisse 16 produits par page — c’est un bon équilibre entre choix et temps de chargement.
- Choisis 4 colonnes sur desktop (ou 3 si tes images sont très détaillées).
- Passe le format d’image en Portrait pour les produits verticaux (vêtements, cosmétiques, livres).
- Active « Afficher la deuxième image en survol » — c’est l’un des réglages les plus impactants pour le taux de clic.
- Active le filtrage ET le tri (deux options séparées dans l’éditeur). Pour des filtres avancés personnalisés, installe une application dédiée.
- Règle les marges : Jérôme recommande 100 pixels de marge inférieure pour aérer le contenu.
La stratégie des deux images produit
Jérôme insiste sur ce point : « je te conseille fortement d’afficher la deuxième image en survol ». Voici comment structurer tes visuels pour maximiser l’impact :
| Image 1 (principale) | Image 2 (survol) |
|---|---|
| Fond blanc ou uni, produit centré | Photo lifestyle, produit en situation d’usage |
| Lumière neutre, pas de distraction | Personne qui utilise le produit, ambiance |
| Idéale pour la clarté et la confiance | Idéale pour le désir et la projection |
Exemples concrets de Jérôme : un haircare journal → autre page du carnet en image 2 ; un t-shirt → quelqu’un qui le porte ; un mètre ruban → le produit déroulé en action.
Configurer les pages statiques
Ces pages ne vendent pas directement, mais elles débloquent la vente en rassurant le visiteur hésitant.
- Page Contact : dans l’éditeur, ne rajoute pas de titre supplémentaire si le titre de la page est déjà affiché. Ajuste les marges (supprimer la marge supérieure pour coller au header, ajouter 100px en bas).
- Page FAQ : vérifie la taille du texte — Jérôme recommande petit plutôt que grand pour éviter un rendu trop imposant. Pas de gras sur le corps de texte, ça surcharge visuellement.
- Page Retours & Garanties : utilise le modèle de page par défaut, gère uniquement les marges. Pas besoin de sur-personnaliser.
Pour chaque page, pense à enregistrer avant de passer à la suivante — Shopify ne sauvegarde pas automatiquement.
Erreurs à éviter
- Mettre 5 colonnes ou plus sur desktop : les vignettes deviennent trop petites, les détails produits disparaissent.
- Laisser une seule colonne sur mobile : ça force un scroll interminable et nuit à l’expérience utilisateur.
- Ne pas ajouter d’image à la collection : Shopify prend alors la première image du premier produit, ce qui donne un résultat incohérent si les produits changent.
- Oublier d’activer le filtrage : sans filtre, un visiteur sur une collection de 50+ produits abandonne rapidement.
- Mettre deux images similaires pour le survol : l’effet est nul. La deuxième image doit apporter une information ou une émotion différente.
- Ajouter des sections inutiles dans les pages collections ou statiques : Jérôme le répète — « on veut super simple ». Chaque section superflue dilue l’attention.
- Utiliser une image de collection en format 16:9 si ton thème affiche des vignettes carrées ou portrait : le recadrage automatique va couper ton visuel.
Action cette semaine
- Ouvrir l’éditeur de thème Shopify et aller dans la section Liste des collections
- Régler les colonnes : 3 ou 4 sur desktop, 2 sur mobile
- Choisir le format d’image Portrait ou Carré selon tes produits
- Aller dans Produits → Collections et ajouter une image personnalisée à chaque collection
- Dans la section Collection, activer « Afficher la deuxième image en survol »
- Préparer pour chaque produit : image 1 fond blanc + image 2 lifestyle
- Activer le filtrage et le tri dans les paramètres de la grille produits
- Configurer les marges des pages Contact, FAQ et Retours (100px en bas minimum)
- Vérifier la taille du texte FAQ : opter pour petit si le rendu semble trop imposant
- Enregistrer après chaque modification de section
Pour aller plus loin
Leçon interactive complète (quiz, transcription, notes, chapitres) : https://app.cockpitlab.io/fr/formations/shopify/collections-et-pages-shopify-organiser-ton-catalogue-produits-video-27-41
Vidéo originale sur YouTube : Regarder
Chaîne cockpitLAB : Abonne-toi pour les prochaines formations
Discussion
Quel format d’image tu utilises pour tes collections, et sur combien de colonnes en desktop ?
N’hésite pas à poser tes questions ou partager ton expérience ci-dessous — la communauté te répond sous 24h en général.