Comment ajouter une barre d'annonce à Shopify

Une barre d’annonce Shopify (également appelée hello bar, bannière promotionnelle ou bannière fixe) est une fine bannière affichée en haut d’un site web, au-dessus de la navigation. Elle est souvent utilisée pour annoncer aux utilisateurs des avantages susceptibles d’encourager une vente — par exemple, une vente flash ou une date limite pour bénéficier de la livraison gratuite.  

Certains thèmes Shopify Online Store 2.0, y compris le thème Dawn par défaut, sont fournis avec une barre d’annonce native. C’est un bon point de départ, mais plutôt limité. Avec le thème Dawn, vous pouvez personnaliser la palette de couleurs de base, ajouter ou supprimer des icônes de réseaux sociaux, et ajouter une seule ligne de texte ou de liens par annonce rotative.

Si vous imaginez quelque chose de plus dynamique, comme plusieurs lignes de texte, des boutons, un code promo à copier en un clic ou un compte à rebours qui crée un sentiment d’urgence, l’éditeur natif ne vous permettra pas d’y parvenir. 

Pour créer une barre d’annonce personnalisée et à fort taux de conversion dans Shopify, vous pouvez soit installer une application tierce depuis le Shopify App Store, soit utiliser un widget Barre d’annonce gratuit et léger qui maintient votre site rapide et votre budget intact. Nous explorons ici comment procéder des deux façons.

Watch on youtube

How to Add an Announcement Bar to Shopify

Option 1 : Installer une application de bannière Shopify dédiée

La méthode la plus courante utilisée par les marchands pour ajouter une bannière fixe dans Shopify consiste à se rendre sur le Shopify App Store et à installer une application marketing tierce. 

Voici à quoi ressemble généralement cette configuration :

1. Recherchez une application « barre d’annonce » ou « bannière promotionnelle » sur le Shopify App Store.

2. Installez l’application et ajoutez-la à votre thème via le processus d’intégration de l’application.

3. Personnalisez le texte, les couleurs et le comportement de votre bannière dans le tableau de bord de l’application.

Le flux de travail pour personnaliser la bannière dépendra du plug-in. L’image précédente vous donne un aperçu de la façon dont vous pouvez personnaliser la largeur d’une bannière à l’aide du plug-in Attrac.

Bien que ce soit la voie choisie par défaut par de nombreux marchands, elle présente deux inconvénients qu’il vaut la peine de connaître avant de vous engager :

1. Les applications de bannière tierces peuvent ajouter du JavaScript : Elles le font pour alimenter les animations, les messages rotatifs ou les comptes à rebours, et ce code se charge souvent près du haut de la page. Selon la manière dont l’application est conçue, cela peut ralentir la vitesse de la page et affecter les Core Web Vitals. Consultez les avis et voyez ce que les autres propriétaires de boutiques disent de l’impact réel d’une application sur les performances avant de l’installer.
2. De nombreuses hello bars gratuites dans Shopify sont limitées : Le forfait gratuit est conçu pour vous faire franchir la porte, et les fonctionnalités que vous souhaitez réellement — comme les comptes à rebours, le géociblage ou simplement la suppression du filigrane de l’application — sont réservées à un abonnement mensuel.

Si vous préférez éviter tout cela, un widget de site web gratuit est présenté juste après.

Option 2 : Ajouter un widget de barre d’annonce gratuit et personnalisable (recommandé)

Si vous voulez une bannière promotionnelle dynamique et bien stylisée avec toutes les fonctionnalités dont vous avez besoin — et que vous la voulez gratuitement tout en préservant la vitesse de votre site — la meilleure solution est l’intégration d’un widget hébergé fiable. 

C’est là qu’intervient le widget Barre d’annonce de Jotform. Il fonctionne efficacement comme une alternative aux applications de bannière promotionnelle Shopify.

Sa configuration est simple :

1. Créez votre bannière dans l’éditeur de widget Jotform, en ajoutant votre texte et tous les boutons d’appel à l’action ou comptes à rebours dans les paramètres Généraux.

2. Personnalisez les couleurs et la mise en page pour qu’elles correspondent à votre thème Shopify.

3. Cliquez sur Continuer et copiez l’extrait d’intégration en cliquant sur Copier le code.

4. Collez l’extrait dans un bloc Liquid personnalisé ou HTML personnalisé de votre éditeur de thème Shopify. 

L’avantage ici est que vous pouvez entièrement personnaliser la mise en page et faire correspondre exactement les couleurs de votre thème Shopify, le tout sans mises à niveau premium. 

Et comme le widget est une intégration de barre d’annonce Shopify hors serveur, tout le travail complexe — comme les animations, les comptes à rebours, le style, et plus encore — se déroule en dehors de votre thème Shopify. Cela signifie que vous bénéficiez de

• Un style propre qui fonctionne indépendamment des styles globaux du site Shopify, pour qu’il n’y ait aucun conflit avec votre thème
• Des temps de chargement rapides, car aucun code bloquant le rendu ne ralentit la vitesse de votre page
• Aucun frais récurrent ajouté à votre facture d’hébergement juste pour afficher un compte à rebours ou une autre fonctionnalité intéressante

Boostez votre boutique Shopify avec des widgets intelligents et sans serveur

Une barre d’annonce n’est qu’un début. Jotform s’intègre à Shopify et propose une collection complète de widgets de site web gratuits qui offrent la même flexibilité avec la même approche hors serveur.

Voici quelques-uns qui valent le coup d’œil si vous développez une boutique Shopify :

• Un widget Avis Google pour afficher les commentaires des clients directement sur vos pages produits et instaurer la confiance avant le paiement
• Un widget Compteur de visiteurs pour afficher l’activité de la page en temps réel et ajouter une preuve sociale aux fiches à fort trafic
• Un widget Compte à rebours pour renforcer le sentiment d’urgence sur les offres à durée limitée, semblable à ce que vous intégreriez dans votre barre d’annonce
• Un widget Popup pour recueillir des inscriptions par e-mail ou promouvoir un code de réduction sans page de destination dédiée

En tant que marque de e-commerce en pleine croissance, vous avez tout intérêt à consacrer votre budget marketing à vendre sur Shopify, à vous approvisionner en produits et à acquérir des clients — plutôt qu’à payer des frais d’application récurrents juste pour qu’une bannière s’affiche correctement. Les outils gratuits et hors serveur comme le widget Barre d’annonce de Jotform vous permettent de déployer une barre promotionnelle premium et à fort taux de conversion en quelques minutes — et une fois en ligne, vous pouvez porter votre attention sur le prochain widget qui aidera votre boutique à se développer. Essayez-le dès aujourd’hui.