Comment ajouter une bannière personnalisée à un site web Shopify

Une bannière promotionnelle accrocheuse est l’un des leviers de conversion les plus puissants pour les boutiques en ligne. C’est la première chose que voit un internaute en arrivant sur votre site : un appel à l’action (CTA) clair peut donc améliorer considérablement le taux d’ajout au panier et l’ensemble de vos ventes. Que vous souhaitiez orienter vos visiteurs vers les soldes du Black Friday, annoncer un seuil de livraison gratuite ou collecter des contacts en échange d’un code de réduction, la bannière promotionnelle est l’un des meilleurs outils pour y parvenir.

Mais pourquoi se contenter d’une bannière statique ? Un compte à rebours crée un sentiment d’urgence, les contenus multimédias donnent plus d’impact à la bannière et un formulaire de collecte d’e-mails permet de générer des prospects immédiatement. Malheureusement, Shopify ne facilite pas l’intégration de ces éléments. Les thèmes OS 2.0 de Shopify incluent bien des sections natives « barre d’annonce » et « bannière d’image », mais elles se limitent à du texte brut en haut de la page, ainsi qu’à deux images statiques, un peu de texte et deux boutons sur la bannière. 

Si vous souhaitez intégrer une bannière promotionnelle sur Shopify avec un formulaire de collecte de prospects qui s’affiche différemment sur mobile et sur ordinateur, ou encore avec un compte à rebours ou une vidéo, vous ne pourrez pas y parvenir sans écrire du code Liquid et JavaScript personnalisé. Shopify Magic, l’outil de création basé sur l’IA de Shopify, peut générer une bannière Liquid personnalisée sur Shopify, mais aucune assistance n’est proposée. Et si vous ne comprenez pas le code créé par Shopify Magic, la vitesse et l’accessibilité de votre boutique risquent d’en pâtir. 

La plupart des e-commerçants se retrouvent donc face à deux options : installer une application tierce premium depuis le Shopify App Store, ou utiliser un widget gratuit, léger et sans serveur, qui préserve la vitesse de votre page et l’architecture de votre thème. 

Voyons comment ajouter une bannière à un site Shopify.

Option 1 : installer une intégration dédiée depuis le Shopify App Store

Ajouter une barre d’annonce Shopify à votre boutique avec une application tierce de bannières ou de popups est efficace, mais cette solution présente des inconvénients. Nous y reviendrons plus tard.

Voici comment la mettre en place : 

1. Rendez-vous sur le Shopify App Store et recherchez une application de bannières ou de popups. J’ai choisi Essential Announcement Bar, mais vous pouvez opter pour n’importe quelle autre application. 

2. Cliquez sur Installer. 

3. Suivez le guide de prise en main ou de configuration afin de maîtriser les bases du plug-in. 

4. Configurez votre bannière ou votre popup dans l’application. Vous pouvez personnaliser le texte, le design, l’emplacement et d’autres fonctionnalités. Une fois terminé, cliquez sur Publier.

La barre d’annonce ou le popup apparaît désormais dans votre boutique. Jusqu’ici, tout va bien. 

Cependant, chaque application installée sur votre boutique Shopify ajoute son propre code CSS et JavaScript à votre vitrine. Cela peut avoir un impact sur vos Core Web Vitals, ralentir votre site, provoquer des latences lors du paiement et nuire à votre référencement. Si l’ajout d’une seule application pose rarement problème, en ajouter des dizaines peut avoir des conséquences réelles. Si vous pouvez réaliser une action sans installer d’application, vous gardez davantage de marge pour installer celles qui sont vraiment nécessaires. 

Par ailleurs, les applications tierces de Shopify peuvent nécessiter un abonnement payant. Une version gratuite proposera probablement des fonctionnalités limitées, ne fonctionnera que pour les 1 500 premières impressions par mois, affichera un filigrane ou ne sera tout simplement pas très efficace. Si vous voulez des fonctionnalités avancées, ou simplement une bannière propre et sans marque, capable de supporter un fort trafic pendant les fêtes, vous devrez généralement payer un abonnement mensuel. 

Si vous voulez vous assurer que votre bannière remplit sa mission et qu’elle est visible par tous vos clients, sans payer d’abonnement mensuel, il existe une meilleure option. 

Option 2 : ajouter un widget de bannière interactif et gratuit (recommandé)

Si vous souhaitez une bannière dynamique à fort taux de conversion, avec des contenus multimédias, des coupons, des formulaires et des comptes à rebours, sans payer d’abonnement mensuel, sans ralentir votre site et sans vous soucier des Core Web Vitals, la solution la plus intelligente consiste à utiliser un code d’intégration hébergé fiable, comme le widget Bannière de Jotform. Tout le travail lourd s’effectue en dehors de votre boutique Shopify : vous obtenez ainsi une bannière irréprochable et responsive, sans aucun des inconvénients d’une application tierce installée. C’est le meilleur widget de bannière gratuit pour Shopify. 

Voici comment le mettre en place :

1. Rendez-vous sur le widget Bannière de Jotform et connectez-vous à votre compte Jotform. Si vous n’en avez pas, vous pouvez vous inscrire gratuitement.

2. Ajoutez un badge, un titre et une description à votre bannière. Vous pouvez rendre l’ensemble cliquable et y ajouter des fonctionnalités comme un bouton d’appel à l’action, un compte à rebours, un coupon et un formulaire de collecte d’e-mails. 

3. Utilisez l’onglet Style pour modifier l’apparence de votre bannière. Vous pouvez définir une police personnalisée, utiliser du code CSS personnalisé et désactiver la marque Jotform.

4. Utilisez l’onglet Mise en page pour contrôler l’affichage des éléments sur votre bannière. Vous pouvez également choisir si elle est visible sur ordinateur, sur mobile ou sur les deux. 

5. Passez à l’onglet Paramètres, où vous pouvez donner un titre à votre bannière. Vous pouvez aussi l’activer ou la désactiver, ce qui est pratique si vous souhaitez préparer à l’avance des bannières pour les soldes des fêtes. 

6. Passez à l’onglet Publier, puis cliquez sur Copier le code pour récupérer le code d’intégration de votre bannière. 

7. Retournez sur Shopify. Sélectionnez Boutique en ligne dans la barre latérale, puis Modifier le thème. 

8. Cliquez sur Ajouter une section, puis sur Liquid personnalisé. 

9. Collez le code d’intégration dans la zone Liquid personnalisé. Vous pouvez ensuite positionner la bannière d’annonce où vous le souhaitez et configurer son apparence. 

10. Une fois terminé, cliquez sur Enregistrer : votre bannière est alors en ligne sur votre site. 

Le principal avantage du widget Bannière de Jotform est qu’il vous offre un contrôle visuel inégalé sur la bannière, sans abonnement premium ni compétences en programmation. Grâce à l’éditeur facile à utiliser, vous pouvez personnaliser l’image d’arrière-plan de la bannière, voire intégrer une vidéo YouTube ou Vimeo. Vous pouvez également ajouter des boutons d’appel à l’action, un compte à rebours ou un formulaire d’inscription par e-mail, le tout gratuitement.

Pour installer votre bannière personnalisée sur Shopify, il vous suffit de copier-coller le code d’intégration dans Shopify. Comme Jotform génère la bannière en dehors de votre serveur, elle n’entre pas en conflit avec les styles globaux de Shopify et n’affecte pas la vitesse de chargement de vos pages. Vous obtenez une bannière performante qui assure le bon déroulement de vos campagnes. 

Boostez votre boutique Shopify avec des widgets intelligents et sans serveur

Le répertoire des widgets de site web Jotform regorge d’excellents widgets de site web gratuits, dont le widget Bannière de Jotform. Avec les widgets Jotform, votre widget de flux Instagram peut montrer votre produit en situation, les témoignages peuvent souligner sa popularité, les notifications de vente peuvent mettre en lumière chaque achat et un guide des tailles peut aider vos clients à trouver le produit qui leur convient. De nombreux autres outils gratuits peuvent maximiser vos conversions d’ajout au panier tout en gardant votre boutique rapide et légère.

En vous épargnant une partie des tracas liés à la vente sur Shopify, les widgets de site web Jotform vous permettent de consacrer votre temps et votre budget à la recherche de produits de qualité, au marketing en ligne et à la construction d’une boutique e-commerce prospère. Inutile de payer pour une simple bannière sur une page produit. 

Si vous souhaitez aller plus loin avec Shopify, découvrez l’intégration complète Jotform + Shopify. Elle vous permet d’ajouter des formulaires à votre boutique Shopify, d’encaisser des paiements et bien plus encore.