Si vous vendez sur Shopify, le design de votre bouton d’appel à l’action (CTA) est primordial. Qu’il mène à une page promotionnelle, à une inscription à une newsletter VIP ou à un lien d’affiliation, un bouton qui attire l’œil est cliqué plus souvent qu’un bouton qui se fond dans la page — et sur une boutique en ligne, plus de clics signifient plus de ventes.
Les thèmes Shopify OS 2.0, y compris Dawn, disposent de blocs de boutons natifs, mais ils vous offrent peu de contrôle sur l’apparence de ces boutons. Le bloc vous permet de définir le libellé, le lien et le choix entre un style plein ou avec contour, tandis que les couleurs proviennent des paramètres globaux de votre thème. Cela garde votre boutique cohérente (ce qui est tout l’intérêt des paramètres de thème), mais cela signifie aussi qu’un bouton censé se démarquer ressemblera à tous les autres boutons de votre site.
Obtenir un bouton autonome avec ses propres couleurs, son effet de survol ou son icône nécessite l’une de ces deux approches. Vous pouvez ajouter un bloc Liquid personnalisé dans votre éditeur de thème et écrire vous-même le HTML et le CSS, ou vous pouvez utiliser un widget hébergé gratuit qui gère la mise en forme et vous fournit un code d’intégration à coller.
Si vous souhaitez un bouton CTA personnalisé et optimisé pour la conversion sur votre boutique Shopify sans modifier le code du thème ni payer un développeur, ce guide explique comment ajouter un bouton dans Shopify en utilisant les deux méthodes.
Option 1 : Utiliser le Liquid personnalisé et le CSS
La méthode standard pour intégrer un design de bouton unique dans une boutique Shopify sans installer d’application tierce consiste à écrire le code vous-même. L’éditeur de thème de Shopify comprend une section Liquid personnalisé où vous pouvez ajouter votre propre HTML et CSS, ce qui vous permet de définir un bouton et de le styliser exactement comme vous le souhaitez sans modifier directement les fichiers de votre thème.
Voici comment ajouter un bouton dans Shopify en utilisant le Liquid personnalisé et le CSS :
- Depuis votre interface d’administration Shopify, allez dans Boutique en ligne dans le menu de gauche. Cliquez ensuite sur l’icône crayon à côté de Boutique en ligne ou cliquez sur Modifier le thème à l’écran.
- Dans la barre latérale de gauche, cliquez sur Ajouter une section, recherchez Liquid personnalisé et sélectionnez-le. Un champ de texte apparaît à droite, où vous placerez votre code.
- Ajoutez le HTML de votre bouton ainsi qu’un bloc <style> contenant votre CSS, puis cliquez sur Enregistrer dans le coin supérieur droit. Vos modifications apparaissent dans l’aperçu au fur et à mesure de votre travail.
Une mise en garde lors de l’utilisation de cette méthode : écrire vous-même la mise en forme implique un risque d’erreurs. Les règles rédigées sans sélecteurs à portée limitée peuvent affecter d’autres éléments de la page, et le Liquid personnalisé ajouté à votre en-tête ou à votre pied de page s’affiche sur chaque page de votre boutique — une petite erreur peut donc avoir un impact plus large que le seul bouton que vous souhaitiez styliser. Shopify recommande également de dupliquer votre thème comme sauvegarde avant de modifier le code, ce qui reflète la façon dont la plateforme perçoit ce risque.
Engager un développeur peut résoudre le problème technique, mais ajoute un coût plus difficile à justifier pour un seul bouton, surtout lorsque vous souhaitez tester plusieurs versions et que chaque modification implique une nouvelle demande.
Option 2 : Ajouter un widget de bouton gratuit et personnalisable (recommandé)
Vous voulez contrôler le design sans prendre de risque ? Un widget de bouton gratuit et hébergé est une alternative au Liquid personnalisé dans Shopify, avec ses propres couleurs, son état de survol et son icône. Vous pouvez personnaliser le bouton dans un générateur visuel, copier le code d’intégration et le coller dans un bloc Liquid personnalisé de votre éditeur de thème.
Le widget Bouton de Jotform offre les options de style que le bloc natif de Shopify laisse de côté. Vous définissez indépendamment les couleurs de l’arrière-plan, du texte et du survol, ajoutez une icône avant ou après le libellé, et ajustez le rayon des angles, la hauteur, la marge intérieure et l’ombre portée.
Voici comment ajouter un bouton dans Shopify en utilisant le widget Bouton de Jotform :
- Sur votre page Espace de travail Jotform, cliquez sur Créer, sélectionnez Widget de site web, recherchez « Bouton », puis cliquez sur Utiliser le widget.
- Sous l’onglet Général, choisissez l’action de votre bouton, saisissez les informations demandées (e-mail, numéro de téléphone, lien URL, etc.) et rédigez le libellé de votre bouton. Ajoutez une seconde ligne ou du texte environnant si votre offre a besoin de contexte.
- Sous l’onglet Styles, définissez vos couleurs, activez une icône et choisissez sa position, puis ajustez la forme et la taille. L’onglet Disposition détermine si le bouton est en ligne ou flottant, et s’il apparaît sur ordinateur, sur mobile ou sur les deux.
- Cliquez sur Publier dans la barre de navigation supérieure, puis cliquez sur Copier le code dans la section Intégrer du menu de gauche.
Vous pouvez également cliquer sur Plateformes et sélectionner Shopify pour obtenir des instructions d’intégration spécifiques à la plateforme.
- Pour intégrer votre bouton personnalisé dans Shopify, ouvrez votre éditeur de thème, sélectionnez votre modèle de page, cliquez sur Ajouter une section ou Ajouter un bloc, choisissez Liquid personnalisé, collez votre code d’intégration et cliquez sur Enregistrer dans le coin supérieur droit.
Avec cette option, puisque vous stylisez le bouton dans Jotform plutôt que directement dans le thème de votre site web, vos modifications restent distinctes des paramètres globaux de votre thème. Tester une couleur ou un libellé différent revient à modifier le widget plutôt qu’à modifier à nouveau le code du thème. Pour la configuration complète, consultez comment ajouter un bouton à un site web.
Dynamisez votre boutique Shopify avec des widgets intelligents et sans serveur
Un bouton est l’une des nombreuses fonctionnalités que vous pouvez ajouter à votre site sans engager de développeur ni payer pour une autre application mensuelle. Pour une alternative d’appel à l’action Shopify, le répertoire des widgets de site web gratuits de Jotform propose plus de 150 options, dont plusieurs ciblent les mêmes lacunes de boutique en ligne que le bouton.
Par exemple, un widget Barre d’annonce place votre seuil de livraison gratuite ou vos dates de promotion en haut de chaque page, là où les clients le voient avant de finaliser leur achat. Un widget Bouton d’achat dirige les clients directement vers l’URL d’un produit, d’un panier ou d’une page de paiement avec un CTA d’achat, ce qui convient à une page de destination de campagne ou à une vente incitative après achat. Et la catégorie e-commerce propose des fiches produits et des tableaux de tarifs. Il existe également une intégration Jotform-Shopify qui vous permet de collecter les informations clients en parallèle de votre boutique.
Chaque widget s’intègre de la même manière que le bouton, ce qui vous évite de payer un abonnement à une application supplémentaire chaque fois que vous souhaitez ajouter une fonctionnalité simple.
En tant que marque e-commerce, votre temps et votre budget devraient être consacrés à des choses comme l’approvisionnement en produits et l’amélioration de vos tunnels publicitaires, et non à écrire du Liquid personnalisé pour qu’un bouton se distingue des autres. Le widget Bouton de Jotform vous offre un CTA que vous pouvez restyler en une minute sans toucher à votre thème. Essayez-le gratuitement dès aujourd’hui.
Cet article s’adresse aux propriétaires de boutiques Shopify, aux dropshippers et aux responsables e-commerce qui souhaitent ajouter des boutons d’appel à l’action hautement personnalisés et optimisés pour la conversion, sans être limités par les paramètres de thème ni avoir à écrire du code Liquid personnalisé.
Envoyer un commentaire: