Vous souhaitez partager des actualités, des promotions ou des messages importants avec chaque visiteur qui arrive sur votre boutique ? 📢

Une barre d'annonce est l'un des moyens les plus simples pour attirer l'attention sans perturber l'expérience d'achat. Qu'il s'agisse d'une vente flash, d'une mise à jour sur les livraisons ou d'une invitation à s'inscrire à la newsletter, une barre bien placée tient vos clients informés dès leur arrivée.

Ce guide vous accompagne tout au long de la configuration — de la création de votre première barre à sa mise en ligne sur votre boutique 🚀

📍 Ce que vous allez apprendre

D'ici la fin de ce guide, vous saurez comment :

• Créer une nouvelle barre d'annonce
• Choisir le bon emplacement et le bon type de barre
• Ajouter votre message et votre appel à l'action
• Appliquer un design correspondant à votre marque
• Définir où et quand elle s'affiche
• La publier sur votre boutique

✅ Avant de commencer

Assurez-vous que l'intégration d'application Hoppy Announcement Bar est activée dans votre thème. Sans cela, votre barre ne s'affichera pas sur la boutique, quelle que soit la perfection de sa configuration.

Pour l'activer :

1. Accédez à Shopify Admin → Sales Channels → Online Store → Themes (Administration Shopify → Canaux de vente → Boutique en ligne → Thèmes)
2. Cliquez sur Edit Theme (Modifier le thème) sur votre thème actif
3. Sélectionnez App Embeds (Intégrations d'applications) dans la barre latérale gauche
4. Recherchez Announcement Bar/Banner (Barre d'annonce/bannière)
5. Activez-le en position ON (Activé)
6. Cliquez sur Save (Enregistrer)

💡 Déjà activé ? Vous êtes prêt·e !

⚙️ Étape 1 — Créer une nouvelle annonce

Ouvrez l'application Hoppy Banners depuis votre Shopify admin (administration Shopify).

Sur le tableau de bord, cliquez sur Create New Announcement (Créer une annonce).

Vous serez redirigé vers l'écran de sélection de l'emplacement.

📌 Étape 2 — Choisir un emplacement

L'emplacement détermine où votre barre d'annonce apparaîtra dans votre boutique.

Vous verrez six options :

• Storefront Page (Page de la boutique) — S'affiche sur votre boutique principale (accueil, produits, collections, etc.)
• Email Collection Bar (Barre de collecte d'e-mails) — Une barre axée sur la collecte d'e-mails des visiteurs
• Cart Page (Page du panier) — S'affiche sur la page dédiée au panier
• Cart Drawer (Tiroir du panier) — S'affiche dans le tiroir du panier coulissant
• Checkout Page (Page de paiement) — S'affiche lors du paiement (Shopify Plus uniquement)
• Custom Position (Position personnalisée) — Placez-la manuellement sur des pages de produits ou de collections spécifiques

Sélectionnez celle qui correspond à votre objectif. Pour la plupart des marchands, Storefront Page (Page de la boutique) est le meilleur point de départ.

Une fois sélectionné, cliquez sur Continue (Continuer).

🎨 Étape 3 — Choisir un préréglage (ou partir de zéro)

Ensuite, vous verrez une collection de préréglages visuels — des combinaisons prédéfinies de couleurs, de polices et de mises en page.

Vous pouvez :

• Choose a preset (Choisir un préréglage) pour démarrer rapidement votre design
• Ou cliquer sur Make your Own (Créer le vôtre) pour tout construire manuellement

Ne vous inquiétez pas — vous pourrez modifier chaque détail de conception plus tard. Les préréglages font simplement gagner du temps ⏱️

Après avoir sélectionné un préréglage (ou choisi de partir de zéro), l'éditeur s'ouvrira automatiquement.

📝 Étape 4 — Ajouter votre contenu

Vous arriverez dans l'onglet Content (Contenu). C'est ici que vous rédigez votre message et choisissez le comportement de la barre.

🏷️ Nom de l'annonce

Ceci est uniquement destiné à votre référence interne. Les clients ne le verront pas.

Utilisez quelque chose de reconnaissable, par exemple :

• Bannière des soldes d'été
• Alerte livraison gratuite
• En-tête Black Friday

💡 Un bon nommage facilite la gestion lorsque plusieurs barres sont actives simultanément.

📢 Type d'annonce

Cela contrôle la façon dont votre message est affiché. Il existe quatre types :

Choisir un type

• Simple (Simple) est parfait pour un message clair — comme « Livraison gratuite dès 50 $ d'achats. »
• Running (Défilant) fonctionne très bien pour créer un sentiment d'urgence ou pour les ventes flash. Lorsqu'il est sélectionné, vous verrez un curseur Animation Speed (Vitesse d'animation) et une case à cocher pour changer la direction du défilement.
• Multiple (Plusieurs messages) vous permet de faire défiler jusqu'à 20 diapositives différentes. Lorsqu'il est sélectionné, un curseur Display Duration (Durée d'affichage) apparaît pour contrôler le temps d'affichage de chaque diapositive.
• Email (E-mail) transforme la barre en outil de capture de leads. Lorsqu'il est sélectionné, les options d'appel à l'action standard sont remplacées par les champs Success Message (Message de confirmation) et Email Placeholder (Texte indicatif de l'e-mail).

💡 Vous pouvez toujours revenir et changer de type plus tard.

✍️ Titre et sous-titre

• Title (Titre) — C'est votre message principal. Il prend en charge la mise en forme enrichie (gras, italique, liens, couleurs).
• Subheading (Sous-titre) — Une ligne secondaire plus petite sous le titre.

ℹ️ Le champ Subheading (Sous-titre) est masqué si vous sélectionnez le type Running (Défilant), car les barres défilantes utilisent généralement une seule ligne de texte.

🔗 Appel à l'action (CTA)

Votre CTA indique aux clients quelle action effectuer ensuite.

Choisissez un CTA Type (Type d'appel à l'action) :

• No Call to Action (Aucun appel à l'action) — Aucun bouton ni lien
• Button (Bouton) — Un bouton cliquable avec un texte et un lien personnalisés
• Make entire bar clickable (Rendre toute la barre cliquable) — Toute la barre devient cliquable
• Coupon (Code promo) — Affiche un code promo avec un bouton copier dans le presse-papiers
• Trigger App Event (Déclencher un événement d'application) — Déclenche un événement personnalisé à utiliser avec d'autres applications

Si vous sélectionnez Button (Bouton), Make entire bar clickable (Rendre toute la barre cliquable) ou Trigger App Event (Déclencher un événement d'application), des champs pour le lien ou le texte du bouton apparaissent. Si vous sélectionnez Coupon (Code promo), un champ Coupon Code (Code promo) apparaît ainsi qu'une case à cocher pour afficher une icône de copie.

🚪 Icône de fermeture

Activez cette option si vous souhaitez que les clients puissent fermer la barre.

Lorsqu'elle est activée, deux champs supplémentaires apparaissent :

• Appear again after (Réapparaître après) — Combien de temps avant que la barre ne réapparaisse pour ce visiteur
• Unit (Unité) — Heures ou jours

Cela est utile si vous ne souhaitez pas importuner les visiteurs réguliers avec le même message.

🎭 Icônes de bannière

Les icônes de bannière vous permettent d'ajouter des icônes sociales ou de marque cliquables directement dans la barre d'annonce pour améliorer l'engagement et offrir un accès rapide à des plateformes externes.

Cela est particulièrement utile pour promouvoir des profils de réseaux sociaux, des communautés ou des liens externes importants sans alourdir la barre avec du texte supplémentaire.

📌 Nombre maximum d'icônes autorisé

Vous pouvez ajouter jusqu'à 6 Banner Icons (icônes de bannière) dans une seule configuration de barre d'annonce.

Cela permet de conserver une mise en page épurée et équilibrée sur les appareils de bureau et mobiles.

🖥️ Visibilité sur ordinateur et mobile

Chaque icône peut être configurée pour s'afficher sur :

• Ordinateur
• Mobile
• Ou les deux simultanément

Cela vous offre plus de flexibilité selon l'apparence souhaitée de la barre d'annonce sur différentes tailles d'écran.

🔄 Remplacer une icône

Les icônes peuvent être remplacées à tout moment à l'aide de la Icon Library (bibliothèque d'icônes) intégrée.

Comportements disponibles

• Parcourir les icônes disponibles dans la Icon Library (bibliothèque d'icônes)
• Remplacer instantanément les icônes existantes
• Mettre à jour les icônes sans affecter le reste de la configuration

⚠️ Important :

Les téléchargements d'icônes personnalisées ne sont pas pris en charge pour le moment. Seules les icônes disponibles dans la Icon Library (bibliothèque d'icônes) peuvent être utilisées.

🔗 Appel à l'action (CTA)

Chaque icône de bannière peut éventuellement inclure son propre comportement d'appel à l'action.

Options disponibles

• No call to action (Aucun appel à l'action)
• Add Link (Ajouter un lien)

➕ Ajouter un lien

Lorsque Add Link (Ajouter un lien) est sélectionné :

→ Un champ CTA Link (Lien CTA) apparaît

Cela permet à l'icône de rediriger les visiteurs vers des pages externes ou internes.

Exemples d'utilisation

• Profils de réseaux sociaux
• Discussions WhatsApp
• Communautés Discord
• Collections de produits
• Pages de destination promotionnelles

⚠️ Remarques importantes

• Chaque icône peut avoir son propre comportement CTA indépendant
• Certaines icônes peuvent rester non cliquables tandis que d'autres redirigent les visiteurs
• Supprimer une icône ne supprime que cette icône spécifique et n'affecte pas les icônes restantes
• La disposition des icônes peut affecter l'espacement et la visibilité sur les petits écrans mobiles

💡 Pour une meilleure expérience en boutique, évitez de surcharger la barre d'annonce avec trop d'icônes et de liens simultanément.

🎨 Étape 5 — Choisir un design

Cliquez sur l'onglet Design (Conception) pour styliser votre barre.

Pour une configuration rapide, concentrez-vous sur ces éléments essentiels :

• Template (Modèle) — Choisissez parmi plus de 20 styles prédéfinis ou conservez votre préréglage
• Visibility (Visibilité) — Choisissez si elle s'affiche sur Desktop and Mobile (Ordinateur et mobile), Desktop Only (Ordinateur uniquement) ou Mobile Only (Mobile uniquement)
• Background (Arrière-plan) — Sélectionnez une Single Color (couleur unie), un Gradient (dégradé) ou un Pattern (motif)
• Typography (Typographie) — Choisissez une police et définissez la couleur du titre
• Button (Bouton) — Ajustez la couleur du bouton, la couleur du texte et le rayon des coins (si vous utilisez un CTA de type bouton)

💡 Pour une personnalisation plus poussée du design — y compris les animations, le CSS personnalisé, les effets de bouton avancés et le style des icônes sociales — consultez la documentation dédiée Design & Styling (Conception et style).

📍 Étape 6 — Définir la position et la visibilité

Cliquez sur l'onglet Placement (Emplacement) pour contrôler où et quand votre barre apparaît.

📐 Position d'affichage

Cela définit l'emplacement physique de la barre :

• Top Push (Pousser vers le haut) — Pousse le contenu de la page vers le bas
• Top Push (Sticky) (Pousser vers le haut - fixe) — Reste fixe en haut lors du défilement
• Top Overlap (Chevauchement en haut) — Flotte au-dessus du haut de la page
• Top Overlap (Sticky) (Chevauchement en haut - fixe) — Flotte et reste fixe lors du défilement
• Bottom Overlap (Sticky) (Chevauchement en bas - fixe) — Apparaît en bas de la fenêtre d'affichage
• Manual (Manuel) — Vous la placez vous-même à l'aide d'un extrait de code ou d'un bloc d'application

ℹ️ Si vous sélectionnez Manual (Manuel), la liste déroulante de ciblage de page est désactivée et un extrait de code vous est fourni pour le coller dans votre thème.

🎯 Ciblage de page

Décidez sur quelles pages la barre apparaît :

• Every page (Toutes les pages)
• Home page only (Page d'accueil uniquement)
• All products (Tous les produits)
• Products in specific collections (Produits dans des collections spécifiques)
• Specific products (Produits spécifiques)
• All collections (Toutes les collections)
• Specific collections (Collections spécifiques)

Si vous choisissez une option « spécifique », un bouton Select Products (Sélectionner des produits) ou Select Collections (Sélectionner des collections) apparaît afin que vous puissiez choisir précisément où elle s'affiche.

⏰ Planification

Vous souhaitez que la barre soit publiée plus tard ou s'arrête automatiquement ? Définissez une Start Date (Date de début) et une End Date (Date de fin).

Si ces champs sont laissés vides, la barre apparaît immédiatement et reste en ligne jusqu'à ce que vous la dépubliiez manuellement.

💡 Des options de ciblage avancées — y compris les balises clients, la géolocalisation, les sources UTM et les délais basés sur le temps passé sur le site — sont disponibles dans le même onglet. Elles sont détaillées dans la documentation Advanced Targeting (Ciblage avancé).

🚀 Étape 7 — Publier votre barre

Une fois que tout est conforme à vos attentes, il est temps de mettre en ligne.

Cliquez sur Publish (Publier) dans le coin supérieur droit.

Une bannière de confirmation apparaîtra. Si votre App Embed (intégration d'application) est déjà activée, tout est prêt ! 🎉

Si l'App Embed (intégration d'application) n'est pas activée, la bannière vous le rappellera et fournira un lien rapide pour l'activer dans l'éditeur de thème.

⚠️ Important : le fait d'enregistrer seul ne rend pas la barre visible pour les clients. Vous devez cliquer sur Publish (Publier).

🎉 Résultat final

Une fois publiée avec succès :

✅ Votre barre d'annonce apparaît sur les pages sélectionnées
✅ Les clients voient votre message dès leur arrivée
✅ Votre CTA génère des clics, des inscriptions ou des ventes
✅ Le design s'intègre parfaitement à l'image de marque de votre boutique
✅ Vous pouvez modifier, dupliquer ou dépublier à tout moment depuis le tableau de bord

📚 Documentation connexe

Vous souhaitez aller plus loin ? Consultez ces guides dédiés :

• Design & Styling (Conception et style) — Personnalisation avancée des couleurs, polices, animations et CSS personnalisé
• Advanced Targeting (Ciblage avancé) — Géolocalisation, balises clients, filtrage UTM et règles basées sur le temps passé sur le site
• Translations (Traductions) — Gérer des barres d'annonce multilingues
• Troubleshooting (Dépannage) — Que faire si votre barre ne s'affiche pas

Bonne annonce ! 🥂

Mis à jour le : 01/09/2026