Boutons

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation de Company XYZ sur le bloc de bouton
3. Documentation de Company XYZ sur les paramètres des en-têtes
4. Documentation de Company XYZ sur les paramètres des arrière-plans de section
5. Documentation de Company XYZ sur les paramètres d’espacement de section
6. Documentation de Company XYZ sur les paramètres des séparateurs
7. Documentation de Company XYZ sur les paramètres de visibilité
8. Documentation de Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Utilisez Buttons pour placer une ou plusieurs actions claires partout où les clients ont besoin d’une prochaine étape évidente. Cela fonctionne bien pour les appels à l’action des pages d’atterrissage, les groupes de liens rapides, les incitations promotionnelles ou de simples raccourcis de navigation. Pour un aperçu plus large du fonctionnement des sections et des blocs dans l’éditeur, consultez documentation Shopify sur les sections et les blocs

Paramètres principaux

Les contrôles principaux de la section déterminent comment le groupe de boutons est réparti sur ordinateur et sur mobile. Des paramètres d’alignement distincts vous permettent de conserver une présentation plus large sur ordinateur tout en resserrant la disposition pour les petits écrans.

Disposition bascule le groupe entre une ligne horizontale et une colonne verticale. Les lignes conviennent mieux à un petit ensemble de libellés courts, tandis que les colonnes sont plus faciles à parcourir lorsque les libellés sont plus longs ou que chaque action a besoin de plus d’espace.

Lorsque vous ajoutez plus d’un bouton, Largeur des boutons aide à contrôler le rythme visuel. Conservez des largeurs mixtes lorsque les libellés varient sensiblement en longueur, et utilisez des largeurs égales lorsque vous souhaitez un groupe de boutons plus épuré et plus uniforme.

Astuce

Si les boutons semblent trop serrés sur mobile, essayez une disposition en colonne avant de réduire le texte des boutons. Les actions empilées sont souvent plus faciles à parcourir et à toucher.

Types de blocs pris en charge

1. Button

Bloc Button

Un bloc Button ajoute une autre action à la section avec son propre texte, lien, style, icône, comportement de largeur sur mobile et visibilité par appareil. En savoir plus sur le Bouton.

Utilisez des blocs Button lorsque vous voulez plusieurs actions dans le même groupe, comme des appels à l’action principaux et secondaires ou une courte liste de liens de destination. Vous pouvez aussi masquer des boutons individuels selon l’appareil, ce qui est utile lorsque le mobile et l’ordinateur ont besoin d’ensembles d’actions légèrement différents.

Si vous utilisez plusieurs blocs Button ensemble, gardez une hiérarchie visuelle évidente. Une action principale forte et une ou deux actions de soutien fonctionnent généralement mieux que plusieurs boutons d’importance égale.

Paramètres spécifiques à la section

Paramètres de couleur

Les paramètres de couleur remplacent les couleurs par défaut de l’icône, du texte et du sous-titre pour cette section uniquement. Ils sont particulièrement utiles lorsque vous ajoutez un arrière-plan personnalisé et avez besoin d’un contraste plus fort ou d’un traitement de couleur plus intentionnel.

Ajustez ces couleurs ensemble plutôt qu’une par une. Si la zone de titre devient plus difficile à lire sur l’arrière-plan, mettez d’abord à jour les couleurs du texte et du sous-titre avant de modifier le style des boutons.

Si vous utilisez un arrière-plan ou un overlay personnalisé, vérifiez toujours que le texte du titre, les icônes et les boutons restent faciles à lire d’un coup d’œil.

Paramètres standard de section

Paramètres d’en-tête

Paramètres d’en-tête contrôlent le contenu d’introduction facultatif au-dessus du groupe de boutons. Dans cette section, ils peuvent aussi inclure un bouton intégré, ce qui est utile lorsque vous souhaitez une disposition simple avec titre et action sans vous appuyer uniquement sur des blocs Button.

Utilisez la zone de titre lorsque les boutons ont besoin de contexte, comme un court message promotionnel ou une instruction. Le bouton intégré possède ses propres contrôles de style, d’icône, de lien, de placement et de largeur sur mobile, et ces paramètres ne s’appliquent qu’à ce bouton au niveau de la section.

Si vous combinez le bouton intégré avec des blocs Button, décidez quelle action doit être mise en avant. Gardez un bouton visuellement dominant afin que la section ne donne pas l’impression d’une liste de choix concurrents.

Note

Les boutons composés uniquement d’une icône sont à réserver de préférence aux cas où leur signification ne laisse aucun doute. Les libellés textuels sont généralement plus clairs et plus faciles à parcourir.

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

Paramètres d’arrière-plan de section vous permettent de placer le groupe de boutons sur une couleur, un dégradé, une image ou une vidéo. Cela peut transformer une simple zone d’action en une section promotionnelle plus marquée, mais les arrière-plans affectent aussi la lisibilité et l’espacement.

Utilisez des arrière-plans plus clairs pour les introductions riches en texte, ou augmentez l’intensité de l’overlay lorsque l’image d’arrière-plan concurrence les boutons. Des médias d’arrière-plan spécifiques au mobile peuvent aider à garder la section plus épurée sur les petits écrans.

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de la section. Réduisez l’espacement lorsque Buttons complète le contenu à proximité, ou augmentez-le lorsque vous souhaitez que les actions se distinguent comme leur propre destination.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne facultative au-dessus ou au-dessous de la section. Utilisez des séparateurs lorsque vous souhaitez une séparation visuelle légère sans introduire un traitement de fond complet.

Paramètres de visibilité

Paramètres de visibilité contrôlent si l’ensemble de la section apparaît sur ordinateur, sur mobile, ou sur les deux. C’est utile lorsque vous voulez une section d’action dédiée au mobile plutôt que d’essayer de faire fonctionner une seule disposition partout.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur du contenu et la largeur extérieure de la section. Des largeurs de contenu plus étroites peuvent donner à un petit groupe de boutons une impression plus intentionnelle, tandis que des largeurs de section plus grandes sont plus efficaces lorsque vous associez la section à un arrière-plan fort.

Attention

Les changements de largeur peuvent apparaître différemment dans l’éditeur que sur la page en ligne, en particulier avec des dispositions en pleine largeur ou full-bleed. Prévisualisez la page elle-même avant de finaliser l’espacement et l’alignement.

Conseils d’utilisation

1. Gardez la liste courte. Utilisez cette section pour un ensemble ciblé d’actions plutôt qu’un long menu de liens.
2. Faites correspondre la disposition à la longueur des libellés. Choisissez une ligne pour un texte de bouton court et une colonne lorsque les boutons ont besoin de plus d’espace.
3. Mettez une action prioritaire en avant. Rendez le bouton le plus important visuellement plus fort et gardez les actions secondaires plus discrètes.
4. Vérifiez séparément l’affichage sur ordinateur et sur mobile. L’alignement, la largeur, la visibilité et les choix de médias peuvent modifier la disposition et la lisibilité de la section selon les zones d’affichage.
5. Utilisez le style par défaut de manière intentionnelle. Des valeurs vides, transparentes ou autrement neutres conservent généralement le style de repli, tandis que des couleurs ou des médias explicites rendent la section plus autonome.
6. Vérifiez le comportement des médias avant de publier. Si vous utilisez des médias différents sur ordinateur et sur mobile, confirmez le recadrage, le chargement et la lisibilité du texte pour les deux tailles.