Héros

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation de Company XYZ sur l’utilisation de la vidéo
3. Documentation de Company XYZ sur les paramètres de couleurs
4. Documentation de Company XYZ sur le bloc Heading
5. Documentation de Company XYZ sur le bloc Rich text
6. Documentation de Company XYZ sur le bloc Button
7. Documentation de Company XYZ sur le bloc Breadcrumbs
8. Documentation de Company XYZ sur le bloc Icon with text
9. Documentation de Company XYZ sur le bloc Image
10. Documentation de Company XYZ sur le bloc Search
11. Documentation de Company XYZ sur le bloc Separator
12. Documentation de Company XYZ sur le bloc Share/print UI
13. Documentation de Company XYZ sur le bloc Video
14. Documentation Shopify sur l’éditeur de thème
15. Documentation de Company XYZ sur les paramètres d’espacement de section
16. Documentation de Company XYZ sur les paramètres de séparateurs
17. Documentation de Company XYZ sur les paramètres de visibilité
18. Documentation de Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Hero est une section de bannière flexible, basée sur des blocs, conçue pour des introductions de page percutantes. Vous pouvez combiner contenu, actions, éléments utilitaires et médias, puis façonner la présentation globale avec des images au niveau de la section, des couleurs de superposition, des espacements et des contrôles de largeur. Pour un aperçu plus large de l’organisation du contenu modifiable du thème, consultez documentation Shopify sur les sections et les blocs

Paramètres d’image

Ce groupe contrôle le traitement visuel principal du hero. Vous pouvez placer l’image mise en avant derrière le contenu, la positionner à gauche ou à droite, ou supprimer entièrement l’image de section lorsque les blocs doivent assurer la mise en page seuls.

Une image mobile séparée vous aide à préserver la composition sur les écrans plus petits. Si vous n’en ajoutez pas, le mobile utilise l’image mise en avant principale.

Vous pouvez également utiliser une vidéo mise en avant pour une présentation plus immersive. Comme elle se lance automatiquement en sourdine, elle fonctionne mieux comme support visuel d’ambiance que comme contenu dépendant de l’audio. Pour obtenir des conseils sur la vidéo, consultez documentation Company XYZ sur l’utilisation de la vidéo.

Si du texte se superpose à du contenu image ou vidéo, utilisez les paramètres de superposition pour préserver la lisibilité. Les médias chargés nécessitent généralement une superposition plus marquée que des visuels simples ou peu contrastés.

Paramètres de couleur

Ces paramètres remplacent uniquement les choix de couleurs plus larges pour cette section. Utilisez-les lorsque le hero a besoin de son propre traitement d’icône, de titre, de texte ou de superposition, sans affecter le reste de la page.

La couleur, le dégradé et l’opacité de la superposition sont les contrôles les plus importants lorsque le contenu apparaît au-dessus des médias. Augmentez l’intensité de la superposition lorsque le message devient difficile à lire, et réduisez-la lorsque les médias doivent rester plus visibles. Pour le comportement partagé des couleurs, consultez documentation Company XYZ sur les paramètres de couleur.

Types de blocs pris en charge

1. Breadcrumbs
2. Button
3. Heading
4. Icon with text
5. Image
6. Rich text
7. Search
8. Separator
9. Share/print UI
10. Video

Types de blocs

Titre

Utilisez le bloc Heading pour le message principal du hero ou pour un titre d’accompagnement. Il inclut le niveau de titre, l’alignement, une icône facultative et des contrôles de couleur au niveau du bloc. Voir Titre.

Gardez un texte court et direct. Sur la plupart des pages, un titre bien visible associé à un court bloc de texte est plus facile à parcourir qu’un empilement de plusieurs grands titres.

Attention

Évitez d’utiliser plusieurs titres H1 sur la même page. Réservez le niveau de titre le plus élevé au titre principal de la page lorsque c’est nécessaire.

Texte riche

Utilisez Rich text pour du texte d’accompagnement, de courtes introductions, du texte lié ou un bref contenu explicatif sous le titre principal. Voir Texte riche.

De courts paragraphes fonctionnent généralement mieux dans un hero. Si vous ajoutez une couleur d’arrière-plan au bloc, vérifiez qu’elle reste équilibrée par rapport aux médias et à la superposition de la section.

Bouton

Utilisez les blocs Button pour les actions principales, comme acheter, parcourir une collection ou aller plus loin dans la page. Vous pouvez contrôler le style, la disposition de l’icône, l’alignement et le comportement de largeur sur mobile. Voir Bouton.

La plupart des mises en page hero fonctionnent mieux avec une action principale. Ajoutez des boutons supplémentaires uniquement lorsqu’ils prennent en charge un parcours secondaire clair.

Fil d’Ariane

Les Breadcrumbs aident les visiteurs à comprendre leur position dans des structures de page plus profondes. Dans cette section, ils se placent généralement au-dessus du message principal et fournissent du contexte sans prendre le dessus sur la mise en page. Voir Fil d’Ariane.

Utilisez le lien parent facultatif lorsque le chemin par défaut a besoin d’une hiérarchie plus claire. Gardez un style discret afin que le message du hero reste au premier plan.

Icône avec texte

Utilisez Icon with text pour de courts points de valeur, des signes de confiance ou des points forts concis. Voir Icône avec texte.

Ces blocs fonctionnent mieux lorsque chaque élément est similaire en longueur et en ton. Gardez le texte bref pour que l’ensemble reste facile à parcourir.

Image

Le bloc Image ajoute un média autonome dans le flux de contenu, distinct de l’image mise en avant au niveau de la section. C’est utile pour les logos, les détourages de produits, les visuels de campagne ou les visuels d’accompagnement. Voir documentation Company XYZ sur le bloc Image.

Utilisez ses options de rapport d’aspect, de largeur maximale, de légende et de superposition pour que l’image s’intègre intentionnellement dans le hero. Si vous utilisez déjà un média de section très présent, évitez d’ajouter une autre image qui concurrence l’attention.

Recherche

Le bloc Search fait du hero un point d’entrée centré sur la recherche. Il fonctionne particulièrement bien pour les grands catalogues, les pages orientées aide ou les pages d’accueil où les visiteurs commencent souvent par une recherche. Voir Recherche.

Ce bloc comprend aussi ses propres paramètres de contenu et de présentation de résultats de type bannière, ce qui peut en faire l’élément focal principal. Gardez le contenu du hero à proximité minimal lorsque la recherche est la tâche principale.

Note

Les résultats prédictifs ne s’appliquent que lorsque la configuration requise de recherche prédictive est active. Si cette configuration n’est pas en place, les options d’affichage associées n’affecteront pas l’expérience.

Bloc Séparateur

Utilisez les blocs Separator pour ajouter de l’espace entre les éléments du hero. Ils sont utiles lorsque vous avez besoin de plus d’espacement interne sans modifier l’espacement supérieur et inférieur global de la section. Voir Bloc Séparateur.

Même à hauteur minimale, un petit espace subsiste entre les éléments. Utilisez ce bloc pour une séparation intentionnelle plutôt que d’essayer de créer une pile sans espace.

UI de partage/impression

Ce bloc ajoute des actions compactes de partage et d’impression près du haut de la page. Il est surtout utile dans les mises en page éditoriales, guides ou orientées utilitaires, où ces actions sont importantes tôt. Voir UI de partage/impression.

Placez-le à un endroit où il semble disponible sans distraire. Il doit soutenir le hero, et non concurrencer l’appel à l’action principal.

Vidéo

Le bloc Video place la vidéo directement dans le flux des blocs, ce qui est utile lorsque la vidéo fait partie du message lui-même plutôt que d’un simple traitement d’arrière-plan. Il prend en charge les légendes, les superpositions, le comportement de lecture automatique, les images poster, les limites de largeur et les rapports d’aspect responsives. Voir documentation Company XYZ sur le bloc Video.

Les courts extraits fonctionnent généralement mieux dans cet espace. Si vous utilisez la lecture automatique ou des superpositions, testez à la fois les états en pause et en lecture pour que les légendes et les contrôles restent clairs.

Paramètres standard de section

Pour les contrôles de l’éditeur qui s’appliquent à toutes les sections, consultez documentation Shopify sur l’éditeur de thème

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et en dessous du contenu du hero sur ordinateur et mobile. Dans cette section, l’espacement influence fortement le caractère proéminent et immersif du hero avant que les visiteurs n’atteignent la section suivante.

Utilisez davantage d’espacement lorsque le hero doit évoquer une campagne ou sembler généreux. Réduisez-le lorsque le contenu est bref ou lorsque vous souhaitez un accès plus rapide à la page en dessous.

Paramètres de séparateur

Paramètres de séparateur ajoutent des lignes facultatives en haut ou en bas de la section. Elles aident à définir plus clairement le hero lorsque les sections adjacentes ont des couleurs ou un poids visuel similaires.

Si vous laissez la couleur du séparateur transparente, le comportement standard de couleur de bordure est utilisé. Les séparateurs discrets fonctionnent généralement mieux lorsque le hero présente déjà des images marquées ou un fort contraste.

Paramètres de visibilité

Paramètres de visibilité vous permettent de masquer la section sur ordinateur ou mobile. C’est utile lorsque vous souhaitez des mises en page différentes en haut de page selon la taille de l’écran.

Utilisez cette option avec précaution si vous créez des versions alternatives du même message. L’objectif est d’adapter la mise en page, pas de dupliquer le contenu inutilement.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur maximale du contenu et la largeur externe de la section. Dans Hero, cela influence à la fois la lisibilité du texte et l’impression d’ampleur du traitement d’arrière-plan.

La largeur du contenu est le principal contrôle de lisibilité. La largeur de la section importe surtout lors de l’utilisation de médias d’arrière-plan ou lorsque vous souhaitez que l’enveloppe du hero paraisse plus contenue ou plus ample.

Notes d’utilisation

1. Gardez le message ciblé. Utilisez un titre clair, un court texte d’accompagnement et une action principale pour que le hero soit facile à comprendre d’un coup d’œil.
2. Choisissez l’emplacement des médias avec intention. Les médias d’arrière-plan conviennent aux visuels atmosphériques, tandis qu’un placement à gauche ou à droite fonctionne mieux lorsque l’image a besoin de plus d’espace dédié.
3. Prévoyez le mobile séparément. Ajoutez une image spécifique au mobile lorsque le recadrage desktop ne se transpose pas bien, et vérifiez la largeur et l’alignement des boutons sur les écrans plus petits.
4. Vérifiez les deux états pour la recherche. Le hero peut paraître différent avant et après une requête, alors vérifiez l’état vide et l’état avec requête saisie pour confirmer que le bon contenu reste mis en avant.
5. Vérifiez le comportement responsive. Les contrôles desktop et mobile peuvent modifier l’alignement, la visibilité et la présentation des médias, alors prévisualisez les deux tailles d’écran avant de publier.
6. Protégez le contraste du texte. Ajustez la couleur et l’opacité de la superposition avant de modifier toutes les couleurs du contenu, en particulier avec des images chargées ou des vidéos en lecture automatique.
7. Prévisualisez les changements de largeur sur la page en ligne. Les mises en page larges et full-bleed peuvent sembler très différentes hors de l’éditeur, surtout lorsque le hero se trouve en haut d’une page.