Réussi
Bouton
Créez un bouton d’appel à l’action flexible avec des options de style, d’icône, de lien et d’affichage sur mobile personnalisables.
Utilisez ce bloc pour ajouter un appel à l’action clair dans une section ou un bloc. Vous pouvez le garder simple avec du texte et un lien, ou le rendre plus visuel avec une icône, des styles alternatifs et des choix d’affichage spécifiques au mobile.
Paramètres de base
Section intitulée « Paramètres de base »Commencez par le texte et le lien du bouton, puis ajustez le style visuel pour qu’il corresponde au degré de mise en avant souhaité pour l’action. Les styles plus marqués conviennent mieux aux actions principales, tandis que les styles simples ou secondaires conviennent aux liens d’appui et aux actions moins mises en avant.
Vous pouvez ajouter un emoji ou le nom d’une icône prise en charge pour donner au bouton un repère visuel rapide. Dans la plupart des cas, l’icône doit accompagner le libellé plutôt que le remplacer.
Les contrôles de mise en page déterminent l’emplacement de l’icône, ou si le bouton n’affiche que l’icône. Les boutons avec icône seule fonctionnent mieux lorsque le sens est évident à partir du contenu environnant ou lorsque le symbole est largement reconnu.
Si vous utilisez une mise en page avec icône seule, assurez-vous que l’action reste facile à comprendre d’un coup d’œil. Les libellés textuels sont généralement plus clairs et plus accessibles.
Utilisez les variantes de taille plus petite ou plus grande lorsque le bouton par défaut semble disproportionné par rapport au contenu environnant. Les styles larges peuvent aider une promotion mise en avant à se distinguer, tandis que les styles petits s’intègrent mieux dans des mises en page compactes.
L’option mobile pleine largeur rend le bouton plus facile à toucher sur les petits écrans. C’est particulièrement utile dans les mises en page empilées ou les zones promotionnelles où un bouton en ligne étroit peut être facile à manquer.
Si le bouton pointe vers une destination externe, l’ouverture du lien dans un nouvel onglet peut aider les clients à conserver leur position. Pour les destinations internes, l’ouverture dans le même onglet semble généralement plus naturelle.
Paramètres standard de bloc
Section intitulée « Paramètres standard de bloc »Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Les paramètres de visibilité vous permettent d’afficher ou de masquer ce bloc sur ordinateur ou sur mobile. C’est utile lorsque vous souhaitez différents traitements de bouton selon la taille d’écran ou lorsque vous devez simplifier une mise en page mobile encombrée. Pour le comportement associé dans l’éditeur de thème, consultez documentation Shopify sur la personnalisation des sections
Voir Paramètres de visibilité pour le comportement partagé de ces contrôles.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Utilisez un texte d’action clair. Choisissez des libellés qui indiquent aux clients exactement ce qui se passera ensuite, par exemple Achetez maintenant, En savoir plus ou Réservez un rendez-vous.
- Adaptez la mise en avant à la priorité. Réservez les styles plus marqués ou plus grands à l’action principale et utilisez des styles plus discrets pour les liens secondaires.
- Faites en sorte que les icônes restent complémentaires. Ajoutez des icônes pour renforcer le sens, mais évitez de vous y fier uniquement, sauf si le contexte rend l’action sans ambiguïté.
- Optimisez pour les tapotements sur mobile. Activez l’affichage pleine largeur lorsque le bouton doit être plus présent ou plus facile à toucher sur les petits écrans.
- Vérifiez les solutions de repli de style. Laissez les couleurs et les remplacements visuels non définis lorsque vous souhaitez que le bouton hérite du style de repli de la zone environnante ; ajoutez un style explicite uniquement lorsque le bouton doit se distinguer de son conteneur.
- Vérifiez les états masqués. Si vous masquez le bloc sur ordinateur ou sur mobile, assurez-vous que la même action reste disponible ailleurs sur cet appareil.