Les points clés
- Le moyen le plus simple d’ajouter un bouton est via l’éditeur de thème (Theme Editor) — la plupart des sections ont un bloc bouton intégré que vous pouvez ajouter.
- Pour un placement de bouton personnalisé en dehors des sections existantes, vous aurez besoin de code ou d’un outil IA comme Fudge.
- Lier un bouton à une page, un produit ou une URL externe se fait dans le panneau des paramètres du bouton, dans l’éditeur de thème.
- Les boutons d’ajout au panier “sticky” et les CTA dans le header nécessitent des modifications de code.
Les boutons font partie des demandes de personnalisation les plus courantes sur Shopify. Que vous vouliez un CTA dans votre section hero, un bouton de lien dans une section de contenu, ou un bouton “Acheter maintenant” sticky — voici comment les ajouter.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons aussi développé Fudge — un éditeur de boutique IA noté 5.0 sur le Shopify App Store.
Comment ajouter un bouton dans l’éditeur de thème Shopify
La plupart des sections Shopify prennent nativement en charge les blocs de boutons. C’est la méthode la plus rapide.
Sur le même sujet : Rendre les boutons Shopify plus faciles à cliquer.
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Naviguez jusqu’à la page et la section où vous voulez le bouton.
Étape 3. Cliquez sur la section pour ouvrir ses paramètres. Cherchez un bloc Bouton (Button) ou une option Ajouter un bloc (Add block) dans la barre latérale gauche.
Étape 4. Ajoutez le bloc bouton. Entrez l’étiquette du bouton (le texte affiché) et le lien (où il mène lorsqu’on clique dessus).
Étape 5. Enregistrez.
Si vous ne voyez pas d’option bouton dans une section, c’est que le modèle de cette section n’en inclut pas. Vous devrez soit passer à une section qui en propose, soit ajouter un bouton via du code ou avec Fudge.
Comment lier un bouton à une page sur Shopify
Dans l’éditeur de thème, quand vous cliquez sur un bloc bouton, vous verrez un champ Lien (Link). Vous pouvez le lier à :
- Une page — tapez
/pages/votre-slug-de-pageou utilisez le sélecteur de page - Un produit —
/products/handle-du-produit - Une collection —
/collections/handle-de-collection - Une URL externe — collez l’URL complète
- Une adresse email —
mailto:[email protected]
Le sélecteur de lien de l’éditeur de thème affiche une liste de vos pages, produits et collections, avec une fonction de recherche.
Voir aussi : Ajouter des CTA sur une page de collection Shopify.
Comment ajouter un bouton dans le contenu d’une page Shopify
Si vous modifiez une page classique (Boutique en ligne → Pages) et que vous voulez ajouter un bouton dans le contenu texte :
Étape 1. Cliquez sur l’icône insérer un lien dans la barre d’outils de l’éditeur de page (elle ressemble à un maillon de chaîne).
Étape 2. Entrez le texte de votre lien et l’URL.
Cela crée un texte avec un lien (hypertexte), pas un vrai bouton. Pour lui donner l’apparence d’un bouton, vous devrez appliquer une classe CSS ou utiliser une option de votre thème.
Pour avoir un bouton CTA au design propre au sein du contenu d’une page, il est préférable d’ajouter un bloc bouton via l’éditeur de thème (si votre thème prend en charge les sections sur les pages) plutôt que d’utiliser l’éditeur de page basique.
Comment ajouter un bouton “sticky” sur Shopify
Un bouton d’ajout au panier sticky — qui suit l’utilisateur lorsqu’il scrolle sur une page produit — est un vrai boost de conversion. Cependant, il n’est pas inclus par défaut dans la plupart des thèmes.
Pour en ajouter un, vous avez deux options :
Option 1 — Une application Shopify. Il existe plusieurs apps d’ajout au panier sticky sur l’App Store. C’est la méthode la plus rapide et sans modifier le code.
Option 2 — Du code sur mesure via Fudge. Décrivez ce que vous voulez à Fudge:
“Ajoute une barre d’ajout au panier sticky sur mes pages produits, qui s’affiche quand l’utilisateur scrolle après le bouton d’ajout au panier principal. Affiche le titre du produit, le prix et un bouton d’achat.”
Fudge génère le code et l’ajoute à votre thème sous forme de brouillon. Vous n’avez plus qu’à vérifier et publier.
Sur le même sujet : Ajouter du JavaScript personnalisé sur Shopify.
Comment ajouter un bouton dans le header Shopify
Ajouter un bouton CTA dans le header de votre boutique (ex : “Acheter maintenant” ou “Prendre RDV”) nécessite généralement de modifier la section “header” de votre thème.
Dans l’éditeur de thème : naviguez jusqu’à la section header et vérifiez si elle a un bloc Bouton ou un bloc CTA. Certains thèmes (comme Dawn) l’incluent, d’autres non.
Si votre thème ne prend pas en charge les boutons dans le header nativement, il faudra du code — vous devrez modifier le fichier header.liquid ou la section équivalente pour y ajouter un élément de bouton avec le lien et le design souhaités.
C’est une demande courante. Vous pouvez tout simplement le demander à Fudge : “Ajoute un bouton ‘Démarrer’ sur le côté droit du header, avec un lien vers /pages/contact.”
Sur le même sujet : L’éditeur de Page Fudge.
Comment changer le texte d’un bouton sur Shopify
Le texte d’un bouton peut être modifié dans l’éditeur de thème lorsque vous ajoutez ou éditez un bloc bouton. Cliquez sur le bloc depuis les paramètres de la section et modifiez le champ Étiquette (Label).
Pour les boutons qui gérés par les paramètres linguistiques de votre thème (comme “Ajouter au panier” ou “Acheter maintenant”), allez dans Boutique en ligne → Thèmes → Actions → Modifier les langues (Edit languages). Cherchez la phrase que vous voulez modifier et changez-la directement ici. Pour un guide complet, lisez notre article sur comment changer le texte d’un bouton sur Shopify.
