Réussi
Collection
Créer une grille de collection personnalisable avec filtres, tri, style des cartes et bannières promotionnelles intégrées à la grille.
- Documentation Company XYZ sur les paramètres de l’interface de grille
- Documentation Shopify sur la personnalisation des sections
- Documentation Company XYZ sur les filtres
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur le bloc de bannière de collection
- Documentation Company XYZ sur les paramètres d’en-tête
- Documentation Company XYZ sur les paramètres des cartes produit
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres de séparateur
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez cette section pour transformer la collection actuelle en une grille de produits flexible avec des contrôles de navigation, des options d’affichage des cartes et des bannières promotionnelles facultatives dans la grille. Elle convient particulièrement aux pages de collection où les clients doivent parcourir rapidement les produits, affiner les résultats et repérer le contenu mis en avant sans quitter le listing.
Paramètres de base
Section intitulée « Paramètres de base »Cette section s’appuie toujours sur la collection active. Votre premier choix important consiste à déterminer comment gérer les produits indisponibles, car cela a une incidence à la fois sur la clarté de la navigation et sur la visibilité des produits.
Masquer les produits indisponibles permet de concentrer la grille sur ce qui peut être acheté immédiatement. Les déplacer à la fin est souvent plus adapté lorsque les réassorts sont fréquents ou lorsque vous souhaitez toujours que les clients découvrent l’ensemble de la gamme.
Si les clients attendent régulièrement les réassorts, afficher les produits indisponibles à la fin fonctionne généralement mieux que de les masquer complètement.
Paramètres de l’interface de grille
Section intitulée « Paramètres de l’interface de grille »Ces paramètres contrôlent la disposition de grille par défaut sur ordinateur et mobile, ainsi que la possibilité pour les clients d’ajuster eux-mêmes la grille. En savoir plus dans les paramètres de l’interface de grille.
Choisissez le nombre de colonnes par défaut en fonction de l’espace visuel dont chaque produit a besoin. Les cartes plus grandes conviennent mieux aux produits centrés sur l’image, tandis que les grilles plus denses aident les grands catalogues à sembler plus rapides à parcourir.
Activer l’interface de taille de grille donne aux acheteurs plus de contrôle sur leur manière de parcourir la collection. L’interface Sticky maintient ces contrôles visibles pendant le défilement des clients, ce qui est particulièrement utile sur les longues pages de collection. Pour un aperçu plus large du comportement de la section dans l’éditeur, consultez la documentation Shopify sur la personnalisation des sections
Paramètres de filtre
Section intitulée « Paramètres de filtre »Ces paramètres ajoutent des contrôles de filtrage et de tri pour aider les clients à restreindre et à réorganiser les résultats. Les filtres nécessitent une configuration supplémentaire avant d’être utiles, et le guide de configuration des filtres du thème est disponible.
Activez les filtres lorsqu’une collection est suffisamment vaste pour que les clients profitent d’un affinement par attributs communs. Pour les collections plus petites ou très sélectionnées, les filtres peuvent ajouter plus d’interface que de valeur.
Le filtre de disponibilité fonctionne mieux lorsque l’état du stock compte dans la manière dont les clients achètent. Le tri est une valeur par défaut solide pour la plupart des collections, mais laisser les filtres ouverts par défaut est plus utile lorsque l’affinage est susceptible d’être utilisé immédiatement.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces remplacements de couleur spécifiques à la section s’appliquent au contenu de l’en-tête propre à la section, comme l’icône, le texte et le sous-titre. Utilisez-les lorsque cette page de collection a besoin d’un aspect distinct sans modifier les couleurs générales de votre thème.
Conservez des remplacements intentionnels et faciles à lire. Si vous utilisez aussi un arrière-plan de section personnalisé, vérifiez soigneusement le contraste afin que le contenu de l’en-tête reste clair.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Bannière de collection
Bannière de collection
Section intitulée « Bannière de collection »Utilisez les blocs Bannière de collection pour placer du contenu promotionnel directement dans la grille de produits. En savoir plus sur le bloc Bannière de collection.
Ce bloc convient bien aux lancements, aux campagnes saisonnières, aux sélections éditoriales ou aux messages spécifiques à la collection. Vous pouvez ajouter jusqu’à deux bannières, mais une seule bannière de chaque taille s’affichera.
La visibilité de la bannière dépend de la taille de la collection. Une grande bannière nécessite au moins 6 produits, et une petite bannière nécessite au moins 11 produits.
Si la collection est trop petite pour la taille de bannière sélectionnée, la bannière n’apparaîtra pas.
Utilisez l’image d’arrière-plan ou la vidéo avec précaution afin que le message promotionnel reste lisible. Un support mobile séparé est utile lorsque les cadrages sur ordinateur ne se transposent pas bien sur des écrans plus petits.
Le contenu au premier plan peut inclure du texte, des boutons, des icônes et des médias d’appui tels qu’un logo ou une image promotionnelle. Si vous choisissez un style de lien sur tout le bloc, les liens à l’intérieur du texte du sous-titre seront supprimés.
Le bloc comprend aussi son propre contrôle de visibilité, ce qui est utile lorsque vous voulez qu’une bannière apparaisse uniquement sur ordinateur ou uniquement sur mobile.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’en-tête
Section intitulée « Paramètres d’en-tête »Utilisez la référence des paramètres d’en-tête partagée. Dans cette section, l’en-tête présente la collection avec une icône facultative, une légende, un titre, un texte d’accompagnement et un contenu de bouton.
C’est un bon endroit pour ajouter du contexte lorsque le titre de la collection est trop bref. Un bouton fonctionne mieux comme action secondaire, par exemple pour renvoyer vers une collection associée ou un guide d’achat utile.
Paramètres de carte
Section intitulée « Paramètres de carte »Utilisez la référence des paramètres de carte partagée. Ces paramètres remplacent la présentation par défaut de la carte produit pour cette section, notamment le style, le ratio de l’image, la densité du texte, le style du CTA, l’alignement et l’affichage des variantes.
Utilisez ces remplacements pour les adapter au comportement d’achat de la collection. Les catégories visuelles bénéficient souvent d’images plus fortes et de moins de texte, tandis que les catégories techniques ou fortement axées sur la comparaison ont généralement besoin de titres plus clairs, d’extraits et d’indices de variante plus explicites.
Certains paramètres sont plus importants avec certains styles de carte. Par exemple, l’alignement vertical central s’applique complètement uniquement à la disposition de carte de type bannière, et les sélecteurs de variantes fonctionnent mieux lorsque les données des options produit sont déjà cohérentes.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez la référence des paramètres d’espacement partagée. Ces contrôles ajustent l’espace au-dessus et au-dessous de la section de collection.
Un espacement plus serré aide les pages très riches en produits à paraître plus efficaces. Un espacement plus généreux fonctionne bien lorsque l’en-tête de section ou le traitement d’arrière-plan fait partie de l’histoire visuelle.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Utilisez la référence des paramètres d’arrière-plan de section partagée. Ces paramètres vous permettent d’ajouter une couleur, un dégradé, une image ou une vidéo derrière la section.
Les traitements d’arrière-plan peuvent rendre une collection plus éditoriale ou orientée campagne, surtout lorsqu’ils sont associés à des couleurs d’en-tête ou de carte personnalisées. Comme ils peuvent modifier le poids visuel de la page, prévisualisez-les sur différentes tailles d’écran avant de publier.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez la référence des paramètres de séparateur partagée. Les séparateurs supérieur et inférieur aident à définir la section lorsqu’elle se trouve entre des zones de contenu similaires.
Un séparateur discret suffit généralement. Utilisez des styles de ligne plus marqués uniquement lorsque la page a besoin de limites visuelles plus nettes.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez la référence des paramètres de largeur partagée. Ces paramètres contrôlent la largeur maximale du contenu et la largeur extérieure de la section.
Des mises en page plus larges peuvent afficher plus de produits par rangée et réduire le défilement. Des mises en page plus étroites peuvent sembler plus sélectionnées et rendre le contenu de l’en-tête plus facile à lire, surtout lorsque les arrière-plans ou les traitements promotionnels sont importants.
L’éditeur peut ne pas refléter entièrement les changements de largeur, alors prévisualisez la page réelle avant de finaliser les mises en page en pleine largeur ou en full-bleed.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Faites correspondre la densité de la grille aux produits. Utilisez moins de colonnes pour les produits centrés sur l’image et des grilles plus denses pour les grands catalogues où le repérage rapide compte.
- Activez les filtres uniquement lorsqu’ils sont utiles. Le filtrage apporte le plus de valeur sur les collections larges avec des attributs communs significatifs.
- Utilisez les remplacements de carte de manière stratégique. Ajustez le ratio de l’image, le texte et le style du CTA pour soutenir la manière dont les clients comparent les produits dans cette collection.
- Vérifiez les exigences de la bannière avant de publier. Assurez-vous que la collection contient suffisamment de produits pour la taille de bannière sélectionnée afin que les blocs promotionnels apparaissent réellement.
- Examinez séparément les versions ordinateur et mobile. La densité de la grille, les cadrages des médias et la visibilité des bannières peuvent varier selon la zone d’affichage, donc validez les deux mises en page avant de publier.
- Conservez des couleurs et des arrière-plans lisibles. Les valeurs de type par défaut préservent l’apparence de base, tandis que les remplacements plus marqués rendent la section plus autonome et doivent toujours être vérifiés en termes de contraste.
- Prévisualisez la mise en page en direct. Les changements de largeur, les contrôles Sticky et les médias d’arrière-plan donnent souvent une impression différente sur la page réelle que dans l’éditeur.