Réussi
Produits en vedette
Mettez en avant des produits sélectionnés dans une grille ou un diaporama flexible.
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur les paramètres de mise en page
- Documentation Company XYZ sur les paramètres des commandes du diaporama
- Documentation Company XYZ sur les paramètres des en-têtes
- Documentation Company XYZ sur les paramètres des cartes produit
- Documentation Company XYZ sur les variantes de produit
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres des arrière-plans de section
- Documentation Company XYZ sur les paramètres des séparateurs
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez Featured products pour mettre en avant un ensemble précis d’articles n’importe où sur la page. Il convient particulièrement aux sélections soignées comme les nouveautés, les choix saisonniers, les guides cadeaux ou les mises en avant de campagne, lorsque vous souhaitez garder un contrôle total sur les produits affichés. Pour un aperçu plus général du fonctionnement des sections et des blocs, consultez documentation Shopify sur les sections et les blocs
Paramètres de base
Section intitulée « Paramètres de base »Commencez par sélectionner les produits que vous souhaitez mettre en avant. Comme cette section est organisée manuellement, elle fonctionne mieux lorsque vous souhaitez un assortiment de produits délibéré plutôt qu’un flux qui change automatiquement.
Paramètres de mise en page
Section intitulée « Paramètres de mise en page »Les paramètres de mise en page contrôlent le nombre de cartes produit affichées sur ordinateur, tablette et mobile, ainsi que le fait que chaque appareil utilise une grille ou un diaporama. Cela vous offre beaucoup de flexibilité lorsque vous voulez des rangées faciles à comparer sur les grands écrans et une navigation par balayage sur les petits. Pour plus de détails sur le contrôle de la mise en page, consultez documentation Company XYZ sur les paramètres de mise en page.
Le nombre de colonnes sur tablette peut suivre le paramètre de bureau lorsque la valeur tablette est laissée à 0. C’est utile lorsque vous voulez une mise en page cohérente sur grand écran sans gérer un nombre de colonnes distinct sur tablette.
Choisissez le nombre de colonnes en fonction de la quantité de détails produits que chaque carte doit contenir. Un nombre réduit de colonnes laisse plus d’espace aux images produit, aux titres et aux actions, tandis qu’un nombre plus élevé crée une mise en page de merchandising plus dense.
Si vous affichez davantage de détails sur les cartes, évitez de pousser le nombre de colonnes trop haut. Les mises en page denses peuvent rendre les informations produit et les actions plus difficiles à parcourir, surtout sur tablette et mobile.
Paramètres du diaporama
Section intitulée « Paramètres du diaporama »Les paramètres du diaporama contrôlent le mouvement, la lecture automatique, la boucle, la navigation, la pagination et le comportement d’aperçu des diapositives lorsque la mise en page diaporama est activée sur un appareil. Ces paramètres sont particulièrement utiles lorsque vous souhaitez une expérience de navigation plus guidée qu’une grille de produits fixe. Pour plus de détails sur le contrôle du diaporama, consultez documentation Company XYZ sur les contrôles du diaporama.
Le style d’animation est le principal point de décision. Fade crée une présentation plus épurée, un élément à la fois, tandis que l’animation par défaut est préférable lorsque vous voulez voir plusieurs produits dans le même carrousel.
La lecture automatique peut ajouter du mouvement, mais elle ne doit pas accélérer la découverte des produits. Un délai de lecture automatique plus lent fonctionne généralement mieux lorsque les cartes incluent des titres de produit, des extraits ou des options de variante.
La navigation et la pagination aident les utilisateurs à comprendre combien de contenu est disponible. L’aperçu de la diapositive suivante peut rendre le carrousel plus interactif, mais il n’est pas disponible avec l’animation fade.
L’animation fade impose une disposition à diapositive unique et masque certaines fonctionnalités du diaporama, comme la pagination et les aperçus de diapositives. Utilisez l’animation par défaut lorsque vous souhaitez un carrousel multi-cartes plus traditionnel.
Paramètres de couleur des cartes
Section intitulée « Paramètres de couleur des cartes »Utilisez ces paramètres pour remplacer les couleurs des cartes pour cette section uniquement. Ils sont utiles lorsque les produits en vedette doivent adopter un aspect spécifique à une campagne sans modifier les cartes produit dans le reste de la boutique.
Les paramètres de superposition de bannière s’appliquent uniquement lorsque le style de carte est défini sur Banner. Pour les autres styles de carte, concentrez-vous sur les couleurs d’arrière-plan, de bordure, de titre et de texte de la carte afin de conserver des détails produit clairs et lisibles.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces paramètres contrôlent les couleurs de l’icône, du titre et du sous-titre au niveau de la section. Utilisez-les lorsque le contenu d’introduction doit correspondre à une palette de campagne ou se distinguer du style de texte par défaut.
Si vous utilisez également une image, un dégradé ou une vidéo d’arrière-plan de section, revoyez ces couleurs de texte une fois l’arrière-plan en place. Un contraste qui semble correct sur un fond uni peut ne plus être suffisant une fois les médias ajoutés.
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 les contrôles d’en-tête partagés pour ajouter une structure et un contexte avec une icône, une légende, un titre, un texte d’accompagnement et un bouton facultatifs. Cela peut améliorer la clarté et aider le groupe de produits à paraître plus intentionnel, surtout dans des mises en page éditoriales ou promotionnelles. Pour plus de détails sur le contrôle de l’en-tête, consultez documentation Company XYZ sur les en-têtes.
Le bouton d’en-tête peut se placer au-dessus ou au-dessous du texte, avec un positionnement distinct sur mobile et un traitement mobile pleine largeur en option. Gardez le bouton centré sur une prochaine étape claire, comme consulter une gamme de produits plus large.
Paramètres de carte
Section intitulée « Paramètres de carte »Utilisez les contrôles de carte partagés pour remplacer la présentation par défaut de vos cartes produit dans cette section uniquement. Vous pouvez ajuster le style de carte, le format d’image, la densité du texte, le traitement du bouton, l’alignement du texte et le comportement du sélecteur de variantes. Pour plus de détails sur les cartes produit, consultez documentation Company XYZ sur les cartes produit.
C’est l’endroit principal pour équilibrer la mise en avant visuelle du merchandising avec le niveau de détail produit. Si la section est axée sur l’image, simplifiez le texte et les actions ; si elle est axée sur la comparaison, gardez les titres et les appels à l’action cohérents et faciles à parcourir.
L’affichage du sélecteur de variantes nécessite une configuration supplémentaire pour fonctionner correctement. Pour plus de détails sur la configuration, consultez documentation Company XYZ sur les variantes de produit.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez les contrôles d’espacement partagés pour ajuster l’espace au-dessus et au-dessous de la section sur ordinateur et mobile. Pour plus de détails sur le contrôle de l’espacement, consultez documentation Company XYZ sur l’espacement de section.
Un espacement plus important peut aider un groupe de produits en vedette à paraître plus premium ou plus autonome, tandis qu’un espacement plus serré fonctionne bien lorsque cette section accompagne du contenu voisin. Un espacement mobile distinct est utile si des cartes empilées ou des mises en page de diaporama donnent à la section une hauteur excessive.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Utilisez les contrôles d’arrière-plan partagés pour ajouter une couleur, un dégradé, une image ou une vidéo derrière la section. Pour plus de détails sur le contrôle de l’arrière-plan, consultez documentation Company XYZ sur les arrière-plans de section.
Les médias d’arrière-plan peuvent donner à la section un aspect plus éditorial, mais ils ont aussi un impact sur la lisibilité. Utilisez les superpositions avec précaution et vérifiez que le texte de l’en-tête et les cartes produit ressortent toujours clairement par rapport à l’arrière-plan.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez les contrôles de séparateur partagés pour ajouter un séparateur supérieur ou inférieur autour de la section. Pour plus de détails sur le contrôle des séparateurs, consultez documentation Company XYZ sur les séparateurs.
Les séparateurs sont utiles lorsque cette section se trouve entre des contenus visuellement similaires et qu’une limite plus claire est nécessaire. Gardez-les discrets si vos cartes ou vos arrière-plans créent déjà une séparation visuelle forte.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les contrôles de visibilité partagés pour afficher ou masquer la section selon la taille de l’appareil. Pour plus de détails sur le contrôle de la visibilité, consultez documentation Company XYZ sur la visibilité.
C’est utile lorsque votre stratégie de merchandising diffère selon la taille de l’écran. Si vous masquez la section sur une plage d’appareils, assurez-vous que les mêmes produits apparaissent toujours à un endroit approprié sur cette plage.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez les contrôles de largeur partagés pour gérer à la fois la largeur du contenu et la largeur externe de la section. Pour plus de détails sur le contrôle de la largeur, consultez documentation Company XYZ sur les largeurs de mise en page.
La largeur du contenu influence la croissance possible de la zone produit, tandis que la largeur de section compte surtout lorsque vous utilisez des arrière-plans ou que vous souhaitez que le conteneur externe s’étende davantage. Les changements de largeur sont plus faciles à évaluer dans la vue de la page en direct, où les espacements et le comportement bord à bord sont plus précis.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Composez une histoire produit claire. Choisissez des produits qui vont ensemble par thème, public ou cas d’usage afin que la section paraisse intentionnelle.
- Adaptez la mise en page à l’objectif. Utilisez des grilles pour faciliter la comparaison et des mises en page de diaporama pour une expérience de navigation plus guidée et adaptée au balayage.
- Vérifiez les deux vues d’appareil. L’ordinateur et le mobile peuvent différer en matière de mise en page, d’alignement, de navigation et de comportement des médias ; vérifiez donc chaque point de rupture après vos modifications.
- Traitez les remplacements de médias avec précaution. Les choix distincts de médias pour ordinateur et mobile peuvent modifier le recadrage, le chargement, le comportement de repli et la lisibilité, surtout lorsque des arrière-plans ou des superpositions sont impliqués.
- Conservez des proportions cohérentes dans le contenu des cartes. Plus vous affichez de colonnes, plus chaque carte doit être simple afin de garder les titres, les prix et les actions faciles à parcourir.
- Vérifiez les actions commerciales dans leur contexte. Les détails produit, les variantes sélectionnées, la quantité, la disponibilité et les actions de panier configurées peuvent tous influer sur ce que les clients peuvent ajouter ou faire depuis la section.