Collection en vedette

Liens en vedette

1. Documentation Company XYZ sur les paramètres de mise en page
2. Documentation Company XYZ sur les paramètres des commandes du diaporama
3. Documentation Company XYZ sur les paramètres des en-têtes
4. Documentation Company XYZ sur les paramètres des cartes produit
5. Documentation Company XYZ sur les paramètres d’espacement de la section
6. Documentation Company XYZ sur les paramètres d’arrière-plan de section
7. Documentation Company XYZ sur les paramètres des séparateurs
8. Documentation Company XYZ sur les paramètres de visibilité
9. Documentation Company XYZ sur les paramètres de largeur de la mise en page
10. Documentation Shopify sur la personnalisation des sections

Vidéos utiles

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Utilisez cette section pour afficher les produits d’une collection dans une grille ou un diaporama, avec un contrôle distinct de la mise en page pour l’ordinateur, la tablette et le mobile. Elle convient parfaitement aux rangées de produits de la page d’accueil, aux mises en avant de catégories sélectionnées et aux fonctionnalités promotionnelles de collection.

Paramètres de base

Commencez par sélectionner la collection que vous souhaitez afficher, puis choisissez le nombre de produits à inclure. Régler le nombre d’articles sur 0 affiche tous les articles disponibles de cette collection, jusqu’à la limite de la section, ce qui est utile pour les petites collections, mais peut donner une impression de surcharge si le contenu des cartes est détaillé.

Pour les détails de configuration dans l’éditeur de thème, consultez documentation Shopify sur la personnalisation des sections

Si vous souhaitez une présentation plus serrée et plus sélectionnée, utilisez un nombre d’articles plus faible et laissez la section servir d’aperçu. Lorsque l’ordre des produits compte, assurez-vous que la collection elle-même est organisée comme vous le souhaitez avant de l’utiliser ici.

Cette section affiche les produits d’une collection, et non une liste choisie manuellement. Si vous avez besoin d’une sélection précise de produits, utilisez plutôt une section conçue pour les produits vedettes.

Paramètres de mise en page

Paramètres de mise en page contrôlent le nombre de cartes de produits affichées et leur présentation en grille ou en diaporama selon la taille de l’appareil. Cela facilite la création d’une mise en page large, adaptée à la comparaison, sur les grands écrans, et d’une expérience de navigation plus compacte sur les plus petits.

La tablette peut hériter du nombre de colonnes de l’ordinateur lorsqu’elle est laissée sur 0, ce qui est utile lorsque les deux vues doivent rester alignées. Si vous passez un appareil en mode diaporama, vérifiez combien de cartes restent visibles à la fois afin que le texte, les prix et les images produits restent faciles à parcourir.

Une configuration courante consiste à utiliser une grille à plusieurs colonnes sur ordinateur et sur tablette, avec un diaporama sur mobile. Si vos cartes de produits incluent davantage de texte ou d’options de variante, les mises en page en grille semblent souvent plus claires que des carrousels plus serrés.

Paramètres du diaporama

Paramètres du diaporama s’appliquent chaque fois que la section utilise le mode diaporama sur un appareil. Utilisez-les pour contrôler le style d’animation, la vitesse, le défilement automatique, la navigation, la pagination, la boucle, et pour afficher ou non une partie de la diapositive suivante.

L’animation en fondu est le principal point de décision, car elle impose l’affichage d’une seule diapositive. Elle convient donc mieux à la mise en avant d’un produit à la fois qu’à la comparaison de plusieurs produits dans la même rangée.

Astuce

Utilisez l’animation par défaut lorsque vous souhaitez afficher plusieurs cartes dans une rangée que l’on peut faire glisser. Utilisez le fondu lorsque vous voulez une présentation plus ciblée, avec un produit à la fois.

Le défilement automatique peut très bien fonctionner pour des rangées de produits simples et très visuelles, mais il est moins efficace lorsque les clients ont besoin de temps pour comparer les détails des produits. L’aperçu de la diapositive suivante peut aider à signaler que d’autres produits sont disponibles, même s’il réduit l’espace accordé à la carte actuelle.

Paramètres de couleur

Ces paramètres remplacent les couleurs de l’en-tête de section pour l’icône, le texte principal et le sous-titre. Ils sont particulièrement utiles lorsque cette section se trouve sur un arrière-plan personnalisé ou a besoin d’une séparation visuelle plus marquée avec le contenu environnant.

Conservez des couleurs d’en-tête simples si les produits eux-mêmes doivent rester au centre de l’attention. Si vous utilisez aussi un arrière-plan marqué ou un style de carte promotionnel, trop de changements de couleur à la fois peuvent donner une impression de surcharge visuelle à la section.

Paramètres standard de section

Paramètres d’en-tête

Paramètres d’en-tête contrôlent le contenu d’introduction au-dessus de la collection, notamment l’alignement, l’icône, la légende, l’élément de titre, le texte d’accompagnement et un bouton facultatif. Dans cette section, l’en-tête est utile pour encadrer la collection avec une étiquette de catégorie, un message de campagne ou un lien permettant d’en voir davantage.

Utilisez le bouton pour proposer une étape suivante claire, comme afficher la collection complète. Gardez un libellé précis, et vérifiez la position et la largeur du bouton sur mobile si la section comporte déjà beaucoup d’éléments visuels.

Paramètres de carte

Paramètres de carte vous permettent de remplacer, uniquement pour cette section, la présentation par défaut de la carte produit. Vous pouvez ajuster le style de la carte, le ratio d’image, le traitement du texte, le style de l’appel à l’action, l’alignement du texte et le comportement facultatif du sélecteur de variante.

Ces remplacements sont utiles lorsque cette fonctionnalité de collection doit avoir une fonction différente de vos listes de produits standard. Par exemple, une carte de type bannière peut sembler plus promotionnelle, tandis qu’un style plus simple peut mieux convenir à une lecture rapide et à la comparaison.

Note

Certaines options de carte fonctionnent mieux ensemble. Par exemple, l’alignement vertical du texte au milieu ne s’applique qu’aux cartes de type bannière, et sur mobile la carte utilise une action produit avec icône uniquement pour le paramètre de style du bouton de carte.

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de la section sur ordinateur et sur mobile. Dans une rangée de collection, l’espacement influe sur le fait que la section donne l’impression d’être une fonctionnalité autonome ou une partie d’un parcours de navigation plus dense.

Utilisez un espacement plus serré lorsque cette section se trouve entre d’autres sections axées sur les produits. Augmentez l’espacement lorsque vous souhaitez que la collection paraisse plus éditoriale ou mieux séparée visuellement.

Paramètres d’arrière-plan de section

Paramètres d’arrière-plan de section vous permettent d’ajouter une couleur d’arrière-plan, un dégradé, une image ou une vidéo derrière la section. Cela peut transformer une simple rangée de produits en une fonctionnalité promotionnelle plus marquée, surtout lorsqu’elle est associée à un en-tête.

Si vous utilisez des arrière-plans d’image ou de vidéo, assurez-vous que les cartes de produits et le texte restent faciles à lire. Les superpositions sont particulièrement utiles lorsque l’arrière-plan présente un fort contraste ou beaucoup de détails.

Attention

Les arrière-plans marqués peuvent entrer en concurrence avec les images des produits. Si les clients doivent fournir plus d’efforts pour parcourir les produits, simplifiez l’arrière-plan ou réduisez son intensité.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne facultative au-dessus ou au-dessous de la section. Ils sont utiles lorsque vous souhaitez une limite discrète entre cette fonctionnalité de collection et le contenu voisin.

Utilisez les séparateurs avec parcimonie si la section a déjà un arrière-plan marqué ou un style de carte distinctif. Un simple séparateur suffit généralement à améliorer la structure sans ajouter de bruit visuel.

Paramètres de visibilité

Paramètres de visibilité contrôlent si la section apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque votre approche de merchandising sur mobile doit différer sensiblement de votre mise en page sur ordinateur.

Utilisez cette option pour des mises en page alternatives délibérées, plutôt que pour de petits ajustements visuels. Si le contenu est essentiellement le même dans les deux versions, il est généralement plus simple de maintenir une seule section responsive bien réglée.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur maximale du contenu et la largeur externe de la section. Dans cette section, les changements de largeur influent sur la densité des cartes, l’espace de respiration du diaporama et sur l’importance visuelle de la collection sur les grands écrans.

Les mises en page plus larges peuvent accueillir davantage de colonnes ou des cartes produit plus grandes, tandis que les mises en page plus étroites peuvent donner à une collection sélectionnée une apparence plus ciblée. Si vous utilisez une section pleine largeur ou full-bleed avec un arrière-plan de section, prévisualisez le résultat sur la boutique en ligne active, car le cadre de l’éditeur peut rendre les changements de largeur trompeurs.

Notes d’utilisation

1. Faites correspondre la mise en page à l’objectif. Utilisez une grille pour comparer facilement les produits et un diaporama pour une présentation plus compacte ou plus éditoriale.
2. Limitez le nombre de produits si nécessaire. Une sélection plus réduite crée généralement une rangée mise en avant plus claire que l’affichage de tous les articles disponibles.
3. Utilisez les remplacements de carte avec intention. Remplacez le style de carte uniquement lorsque cette collection doit sembler nettement différente de vos listes de produits par défaut.
4. Considérez le fondu comme un mode de mise en avant. Le fondu fonctionne mieux lorsque vous voulez que les clients se concentrent sur une carte produit à la fois plutôt que sur plusieurs simultanément.
5. Vérifiez chaque taille d’appareil. Examinez ensemble le nombre de colonnes, le comportement du diaporama et le placement du bouton de l’en-tête afin que la section reste équilibrée sur ordinateur, tablette et mobile.
6. Examinez ensemble les choix de médias et de couleurs. Des médias distincts sur ordinateur et mobile, des remplacements explicites de couleur et des médias d’arrière-plan peuvent modifier le recadrage, la lisibilité et le style de secours, alors testez la section sur les deux tailles d’affichage.
7. Gardez un contenu de navigation intentionnel. Si l’en-tête ou les contrôles associés amènent les clients vers des menus, des tiroirs ou des liens imbriqués, assurez-vous que les éléments réorganisés ou masqués n’empêchent pas le parcours attendu pour les clients.
8. Testez les actions commerciales en contexte. La sélection des produits, le choix de la variante, la quantité et la disponibilité peuvent modifier ce que les clients peuvent faire depuis la carte, alors vérifiez le résultat avec les produits que vous prévoyez de mettre en avant.