Exemples de boutiques Shopify

Design de pages de collection Shopify : 15 exemples

Une page de collection doit aider les clients à restreindre une gamme et à comparer les produits restants. Ces exemples incluent de petits catalogues visuels et des gammes plus vastes avec des filtres techniques. Choisissez les contrôles en fonction des différences que les acheteurs doivent comprendre.

15 exemples Dernière révision

FINEX

Chargement de la capture d'écran complète…

FINEX

Chargement de la capture d'écran complète…

FINEX

Cartes d'ustensiles de cuisine blanches sur fond sombre

FINEX détache ses cartes de produits blanches d'un fond sombre et texturé, avec des liens de catégorie au-dessus et du contenu sur le savoir-faire en dessous. Les silhouettes des ustensiles restent faciles à identifier. Une petite gamme de produits similaires peut être comparée dans la grille sans avoir besoin de beaucoup de filtres.

Pour votre boutique

Rendez les produits faciles à comparer, même lorsque la page a une identité visuelle forte.

Visiter le site web

Jinx

Chargement de la capture d'écran complète…

Jinx

Des filtres pour les protéines et l'étape de la vie

Jinx combine des raccourcis visuels avec des filtres de catégorie, de protéines et d'étape de la vie. Les cartes produits se trouvent sous des titres de catégorie bien lisibles. Les contrôles et les titres utilisent la même structure, ce qui aide les clients à restreindre la gamme d'aliments pour animaux en fonction de différences de produits concrètes.

Pour votre boutique

Choisissez des filtres basés sur les distinctions que les clients utilisent pour prendre une décision.

Visiter le site web

Ritual

Chargement de la capture d'écran complète…

Ritual

Des sous-catégories sous l'introduction

Ritual place des pilules de catégorie après le titre et la description de sa collection. Un encart promotionnel apparaît parmi les cartes produits, et des liens de catégorie plus larges se trouvent plus bas. La promotion nécessite un traitement visuel distinct pour que les acheteurs puissent la différencier d'un article qu'ils comparent.

Pour votre boutique

Séparez la navigation, la comparaison de produits et la promotion au sein de la grille.

Visiter le site web

GSI Outdoors

Chargement de la capture d'écran complète…

GSI Outdoors

Les mêmes informations sur une grille d'équipement dense

GSI Outdoors place une barre latérale de filtres sur desktop à côté de quatre colonnes de produits. Les photographies carrées, les titres bien en vue, les prix et les boutons uniformes se répètent sur toutes les cartes. La cohérence des informations et de l'espacement rend la grille compacte plus facile à balayer du regard.

Pour votre boutique

Standardisez les informations et l'espacement que les acheteurs comparent d'une carte à l'autre.

Visiter le site web

Unit Editions

Chargement de la capture d'écran complète…

Unit Editions

Une simple grille de couvertures de livres

Unit Editions présente ses livres sous un titre de collection court, avec peu d'éléments d'interface concurrents. Les couvertures apportent l'essentiel de la couleur et des informations visuelles. La gamme peut être parcourue directement ; un catalogue plus vaste ou moins distinct nécessiterait probablement des contrôles supplémentaires.

Pour votre boutique

Utilisez la structure la plus simple pour rendre la gamme compréhensible.

Visiter le site web

Café du Cycliste

Chargement de la capture d'écran complète…

Café du Cycliste

Filtres actifs visibles quand le tiroir se ferme

Café du Cycliste conserve les pilules de filtres appliqués à côté de « Filter & Sort » (Filtrer & Trier) au-dessus de sa grille de vêtements. Le tiroir contient des choix liés à la taille, au type et à la pratique cycliste. Les sélections visibles expliquent pourquoi les résultats actuels ne montrent qu'une partie de la gamme.

Pour votre boutique

Affichez les filtres actifs à côté des résultats lorsque le tiroir de filtres est fermé.

Visiter le site web

CW&T

Chargement de la capture d'écran complète…

CW&T

Lignes fines et grandes photographies de produits

CW&T sépare une grille d'images très serrée par de fines lignes sous une barre de titre noire. Des badges compacts fournissent les informations sur le produit. Un recadrage homogène et des étiquettes lisibles permettent de garder les objets identifiables dans cette mise en page épurée.

Pour votre boutique

Utilisez un cadrage d'image cohérent et des étiquettes claires pour soutenir une interface épurée.

Visiter le site web

Intelligentsia

Chargement de la capture d'écran complète…

Intelligentsia

Contrôles de filtres juste au-dessus du café

Intelligentsia place le filtrage et le tri au-dessus de la grille, qui se transforment en un bouton « Filtres » et un sélecteur de tri sur mobile. La visite enregistrée incluait également des pop-ups promotionnelles. Vérifiez si un visiteur qui vient pour la première fois peut accéder aux contrôles sans subir plusieurs interruptions.

Pour votre boutique

Placez les filtres près de la grille et vérifiez que les pop-ups promotionnelles ne bloquent pas l'accès.

Visiter le site web

Heart Coffee Roasters

Chargement de la capture d'écran complète…

Heart Coffee Roasters

Une petite barre d'outils pour une gamme compacte

Heart Coffee Roasters donne à sa collection Beans un titre sobre, des contrôles de présentation fixes (sticky) et des cartes produits sur des fonds pastel ou neutres. La barre d'outils reste disponible tandis que les photographies et les noms font le gros du travail pour distinguer les cafés.

Pour votre boutique

Adaptez la complexité des contrôles à la complexité de la gamme.

Visiter le site web

Helinox

Chargement de la capture d'écran complète…

Helinox

Filtrer les chaises selon leurs contraintes physiques

Helinox propose des filtres de type de siège, de poids une fois emballé, de limite de poids, de modèle et de couleur. Les cartes affichent des pastilles de couleur et la disponibilité. Ces attributs permettent aux visiteurs de vérifier les contraintes pratiques tout en comparant l'apparence, en particulier lorsqu'une chaise doit convenir à un voyage spécifique ou à une limite de transport.

Pour votre boutique

Proposez des filtres sur les mesures et limites qui affectent la façon dont le produit peut être utilisé.

Visiter le site web

TRNK

Chargement de la capture d'écran complète…

TRNK

Une barre latérale de filtres qui libère de l'espace à côté de la grille

TRNK ouvre une barre latérale sur desktop à partir d'une barre d'outils compacte et ajuste la grille de meubles à côté. Les visiteurs peuvent passer de l'introduction de la catégorie au filtrage détaillé. Des étiquettes claires et un changement de mise en page réversible les aident à ne pas se perdre.

Pour votre boutique

Gardez la grille de produits lisible lorsque les filtres sont ouverts et rendez la barre latérale facile à fermer.

Visiter le site web

Smith Teamaker

Chargement de la capture d'écran complète…

Smith Teamaker

Des contrôles qui restent disponibles tout au long de la liste de thés

Smith Teamaker fait suivre sa photographie de catégorie d'une barre d'outils persistante. Des encarts éditoriaux apparaissent parmi les produits, et un bouton « Charger plus » allonge la liste. Les clients peuvent affiner une longue sélection sans retourner en haut de page, à condition que le contenu supplémentaire reste distinct des cartes de thés.

Pour votre boutique

Gardez les contrôles utiles à portée de main sans les laisser dominer le catalogue.

Visiter le site web

Borough Kitchen

Chargement de la capture d'écran complète…

Borough Kitchen

Un guide d'achat sous la grille des ustensiles de cuisine

Borough Kitchen présente brièvement ses ustensiles de cuisine, avec un lien vers un guide d'achat plus long sous les produits. Les filtres, le tri et le nombre de produits restent près de la grille. Le bouton « Charger plus » montre la progression, permettant aux clients prêts à acheter de naviguer avant de lire le guide détaillé.

Pour votre boutique

Proposez un guide d'achat détaillé sans retarder l'accès aux produits.

Visiter le site web

Momentous

Chargement de la capture d'écran complète…

Momentous

Des parcours distincts par catégorie et par objectif

Momentous propose une navigation par catégorie et par objectif sur desktop, avec des options imbriquées là où c'est nécessaire. Sur mobile, l'affinement se trouve derrière « Sort & Filters ». Les deux parcours nécessitent des sélections distinctes et compréhensibles afin qu'un visiteur puisse utiliser soit sa connaissance des produits, soit un objectif pour commencer.

Pour votre boutique

N'utilisez des parcours de navigation parallèles que s'ils répondent à des questions différentes des clients.

Visiter le site web

Athletic Brewing

Chargement de la capture d'écran complète…

Athletic Brewing

Un tiroir de filtres dédié sur mobile

Athletic Brewing regroupe la disponibilité, le style de bière, la saveur, la saison et la taille dans un tiroir mobile de Filtrage et Tri. Le nombre de produits apparaît en haut, avec le tri et le bouton Appliquer en dessous. Des contrôles clairs pour réinitialiser et revenir en arrière sont importants lors de l'affinage d'une gamme dense sur un petit écran.

Pour votre boutique

Regroupez clairement les filtres sur mobile et rendez leur application ou suppression simple.

Visiter le site web

Comment fonctionnent les collections dans Shopify ?

Une collection regroupe des produits afin que les clients puissent parcourir une gamme avant d’ouvrir une page de produit individuelle. Shopify vous permet d’ajouter des produits manuellement ou d’inclure des produits correspondants via des conditions. Le contenu de la collection et sa mise en page sont des choix distincts. La documentation sur les collections de Shopify explique la configuration.

Organisez la gamme en fonction de la façon dont les clients font leur choix. Jinx utilise les protéines et l’étape de vie, tandis que Momentous propose des parcours basés sur la catégorie et les objectifs. Une collection utile a un objectif clair. Si deux groupes contiennent presque les mêmes produits, donnez aux acheteurs une raison claire d’en utiliser un plutôt que de les laisser deviner face à des noms similaires.

Exemples de pages de collection Shopify avec des filtres utiles

Le meilleur filtre pour une catégorie peut être inutile pour une autre. Helinox permet aux acheteurs de filtrer les chaises en fonction de contraintes physiques ; Intelligentsia place des filtres pour le café au-dessus de sa sélection. Commencez par les attributs que les clients utilisent pour inclure ou exclure des produits, puis affichez les mêmes termes sur les fiches produits pour que les comparaisons restent claires.

Sur mobile, rendez les filtres appliqués visibles une fois le tiroir fermé, comme le fait Café du Cycliste. Vérifiez les cas avec zéro résultat, plusieurs filtres actifs et le retour depuis une page produit. Une petite gamme peut ne nécessiter qu’un tri utile et des fiches cohérentes. Pour les catalogues plus vastes, les exemples de filtres montrent des façons de rendre le filtrage et la réinitialisation d’une sélection plus clairs.

Questions fréquentes

Quand une collection a-t-elle besoin de filtres ?

Lorsque la gamme est difficile à parcourir et que ses attributs offrent des moyens pertinents de la restreindre. Une petite collection peut ne nécessiter que des fiches claires et un tri utile.

Où doit-on placer la description d'une collection ?

Une brève introduction peut se trouver au-dessus des produits. Placez les explications plus longues sous la grille ou derrière un lien clair pour que les clients puissent choisir quand les lire.

Faut-il utiliser un bouton "Charger plus" ou une pagination ?

Les deux peuvent fonctionner. Vérifiez l'accessibilité au clavier, les indicateurs de progression, l'accès au pied de page et si le retour depuis un produit conserve la position de l'acheteur.

Comment organiser mes produits dans une collection Shopify ?

Choisissez un regroupement que les clients reconnaissent, puis classez les produits en fonction de l'objectif de cette collection. Gardez les éléments de comparaison importants cohérents sur toutes les fiches. Les filtres doivent affiner les différences pertinentes telles que la taille, la compatibilité ou l'usage prévu.

Comment ajouter des produits à une collection Shopify ?

Vous pouvez ajouter des produits manuellement ou les inclure via des conditions. Une collection peut également inclure des produits d'autres collections ou provenant d'applications. Ces choix déterminent l'appartenance ; le modèle de votre thème contrôle la façon dont les clients voient et parcourent la sélection.

Faites le changement dans votre thème

Donnez à Fudge un objectif et une référence. Il suggère des modifications pour votre boutique, prépare un brouillon dans votre thème Shopify et vous fait un retour. Vous examinez chaque changement avant sa mise en ligne.

Découvrez comment fonctionne l'éditeur de boutique

Collections associées

Toutes les collections