Réussi
Bannière de collection
Ajoutez une bannière promotionnelle à la grille de collection avec des contrôles flexibles sur les médias, les messages et les couleurs.
- Documentation Shopify sur les sections et les blocs
- Documentation de Company XYZ sur le bloc de bannière de collection
- Documentation de Company XYZ sur l’utilisation de vidéos
- Google Material Icons
- Documentation de Company XYZ sur les icônes
- Documentation de Company XYZ sur les paramètres de couleurs de la bannière
- Documentation Shopify sur la personnalisation des sections
- Documentation de Company XYZ sur les paramètres de visibilité
Utilisez ce bloc pour placer un message promotionnel directement dans la grille de collection. Il combine des médias d’arrière-plan, du contenu superposé, une image facultative au premier plan et des couleurs personnalisées afin que vous puissiez créer des campagnes spécifiques à la collection qui s’intègrent à la navigation des produits.
Pour une vue d’ensemble plus large du fonctionnement des blocs de thème, consultez la documentation Shopify sur les sections et les blocs
Ce bloc s’affiche uniquement lorsque la collection contient suffisamment de produits pour s’y insérer dans la grille. Une grande bannière nécessite au moins 6 produits, et une petite bannière nécessite au moins 11 produits.
Vous pouvez également utiliser le guide fourni par la source pour plus de détails : documentation Company XYZ sur le bloc Bannière de collection.
Paramètres principaux
Section intitulée « Paramètres principaux »Le principal paramètre de taille contrôle l’espace occupé par la bannière dans la grille. Comme une seule bannière de chaque taille s’affiche, choisissez la taille avec soin si vous prévoyez d’utiliser plus d’une bannière dans la même collection.
Utilisez une bannière Large lorsque la promotion doit se démarquer clairement. Utilisez Small lorsque vous voulez un moment promotionnel plus léger, qui ne concurrence pas autant les vignettes de produits.
Arrière-plan de la bannière
Section intitulée « Arrière-plan de la bannière »Ce groupe contrôle les médias derrière le contenu de la bannière. Vous pouvez utiliser une image ou une vidéo, avec des médias mobiles distincts lorsque la version pour ordinateur se recadre mal sur les petits écrans.
Si vous laissez vides les champs de médias mobiles, le média d’arrière-plan principal est réutilisé. C’est pratique pour des configurations simples, mais des ressources mobiles distinctes valent souvent la peine d’être utilisées lorsque le texte ou les points focaux nécessitent un cadrage plus serré.
L’ajustement de l’image d’arrière-plan modifie la façon dont les arrière-plans basés sur des images remplissent l’espace disponible. Utilisez un rendu full-bleed lorsque l’image est surtout atmosphérique, et un ajustement contenu lorsque l’ensemble de l’illustration doit rester visible.
Pour des conseils de configuration vidéo, consultez la documentation Company XYZ sur l’utilisation de la vidéo.
Premier plan de la bannière
Section intitulée « Premier plan de la bannière »Ce groupe contrôle le contenu superposé à l’arrière-plan, notamment l’alignement, l’icône, le texte et l’appel à l’action principal. Tout champ laissé vide reste masqué, ce qui facilite la création d’un simple libellé ou d’un message promotionnel plus complet.
L’alignement horizontal et vertical vous aide à positionner le contenu autour du point focal du média d’arrière-plan. Si l’image comporte déjà un sujet fort, placez le texte dans l’espace libre plutôt que de tout centrer par défaut.
Vous pouvez ajouter une icône avec un emoji ou un nom d’icône pris en charge pour un repère visuel rapide. Cela fonctionne bien pour les campagnes saisonnières, les messages à durée limitée ou de simples accents de marque. Des conseils sur les icônes fournis par la source sont disponibles ici : Google Material Icons et documentation Company XYZ sur les icônes.
Le titre, la légende et le sous-titre fonctionnent mieux avec une hiérarchie claire. Gardez le titre concis, utilisez la légende pour un léger contexte, et n’utilisez le sous-titre que lorsque le texte supplémentaire aide les clients à comprendre la promotion.
Les paramètres du bouton contrôlent la destination, le style, le placement de l’icône et la largeur mobile. Si vous choisissez un style de lien sur tout le bloc, la bannière elle-même devient la principale zone cliquable.
Médias au premier plan de la bannière
Section intitulée « Médias au premier plan de la bannière »Ce groupe ajoute une image facultative à côté du contenu au premier plan. Il est utile pour les logos, les détourages de produits, les badges ou les visuels de soutien qui doivent apparaître au-dessus de l’arrière-plan plutôt qu’à sa place.
Le style de l’image modifie le traitement visuel, tandis que le paramètre de largeur contrôle à quel point l’image domine dans la mise en page. Les largeurs plus petites conviennent généralement mieux aux logos, tandis que les largeurs plus grandes peuvent mettre en valeur des visuels de campagne marqués.
Vous pouvez également ajouter un lien distinct à l’image au premier plan. Utilisez-le avec prudence si la bannière inclut déjà un bouton ou un lien sur tout le bloc, afin que le bloc reste prévisible à utiliser.
Couleurs de la bannière
Section intitulée « Couleurs de la bannière »Ces paramètres remplacent uniquement le style de bannière plus large pour ce bloc. Ils sont utiles lorsqu’une campagne de collection nécessite une palette distincte, un contraste plus fort ou une présentation plus marquée que le style par défaut.
Vous pouvez affiner l’arrière-plan, la bordure, le texte, l’icône, le titre, le sous-titre et l’overlay de la bannière. La couleur générale du texte sert de solution de repli lorsque des couleurs de texte plus spécifiques ne sont pas définies.
La couleur et l’opacité de l’overlay sont particulièrement importantes lorsque l’image d’arrière-plan ou la vidéo entre en concurrence avec le message. Une opacité plus faible rend les médias plus visibles, mais peut rapidement réduire la lisibilité.
Pour en savoir plus sur ces contrôles de couleur partagés, utilisez la référence fournie par la source : documentation Company XYZ sur les paramètres de couleur de la bannière.
Paramètres standard de bloc
Section intitulée « Paramètres standard de bloc »Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Ce groupe partagé contrôle si le bloc apparaît sur ordinateur, sur mobile ou sur les deux. Il est utile lorsque vous souhaitez une combinaison de mise en avant différente sur les petits écrans ou que vous devez simplifier la grille sur une taille d’appareil.
Soyez attentif lorsque vous combinez les règles de visibilité avec la taille de la bannière et les exigences de nombre de produits, car la collection peut sembler différente selon les appareils si la bannière est masquée sur une taille d’écran. Pour un comportement plus large de l’éditeur, consultez la documentation Shopify sur la personnalisation des sections. Le guide de visibilité fourni par la source se trouve ici : documentation Company XYZ sur les paramètres de visibilité.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Vérifiez la taille de la collection. Si la bannière ne s’affiche pas, confirmez que la collection contient suffisamment de produits pour la taille de bannière sélectionnée.
- Gardez l’action claire. Utilisez une destination principale unique autant que possible afin que la bannière soit facile à comprendre et à cliquer.
- Concevez pour le contraste. Équilibrez les couleurs des médias, de l’overlay et du texte afin que le message reste lisible sur ordinateur et sur mobile.
- Utilisez des médias spécifiques au mobile lorsque nécessaire. Remplacez les ressources par des médias mobiles distincts lorsque le recadrage sur ordinateur masque du contenu important sur les petits écrans.
- Vérifiez les deux affichages. Les contrôles pour ordinateur et mobile peuvent modifier l’alignement, la visibilité et le comportement des médias, alors vérifiez la bannière dans les deux tailles avant de publier.
- Utilisez intentionnellement le style de remplacement. Laissez les couleurs et les médias vides lorsque vous voulez que le bloc hérite de l’apparence environnante, et définissez des remplacements explicites lorsque la bannière doit paraître plus autonome.