ℹ️ Note: Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien.

Hoppy Announcement Bars & Banners vous offre quatre façons distinctes d'afficher des messages sur votre boutique. Chaque type se comporte différemment, prend en charge différentes configurations de contenu et est conçu pour des cas d'usage spécifiques.

Choisir le bon type dès le début de votre configuration vous évite de refaire votre travail et garantit que votre annonce se comporte exactement comme prévu sur la boutique en ligne.

⚠️ Avant de commencer

Le type d'annonce est sélectionné dans l'onglet Content (Contenu) lors de la création ou de la modification d'une annonce.

Vous pouvez changer de type à tout moment, mais gardez à l'esprit :

• Certains champs apparaîtront ou disparaîtront selon le type sélectionné
• Les éléments de contenu peuvent être raccourcis ou développés lors du passage entre certains types
• Les paramètres de conception et de placement restent communs à tous les types

ℹ️ Le type d'annonce n'est pas le même que le placement. Le placement contrôle où la barre apparaît. Le type contrôle comment la barre se comporte.

📋 Les quatre types d'annonces

1️⃣ Annonce simple

Le type Simple affiche un seul message statique. C'est le format le plus couramment utilisé car il est simple et fonctionne pour presque tous les cas d'usage.

Ce qu'il fait

• Affiche une seule annonce avec un titre, un sous-titre et un appel à l'action facultatif
• Reste statique sur la page jusqu'à ce que le client quitte la page ou la ferme
• Prend en charge tous les types d'appel à l'action : bouton, clic sur toute la barre, coupon, déclenchement d'événement ou aucun appel à l'action

Champs de contenu disponibles

• Title (Titre) — Le message principal. Prend en charge le formatage de texte enrichi.
• Subheading (Sous-titre) — Une ligne secondaire sous le titre.
• Call to action type (Type d'appel à l'action) — Choisissez comment les clients interagissent avec la barre.

Comportement de l'appel à l'action

ℹ️ Lorsque Trigger App Event (Déclencher un événement d'application) est sélectionné, un champ supplémentaire Trigger ID (ID de déclenchement) apparaît. Cet ID doit correspondre au nom d'événement configuré dans l'application réceptrice.

Meilleures utilisations

• Annonces de soldes à l'échelle de la boutique
• Mises à jour des politiques de livraison
• Offres à durée limitée
• Promotions générales

2️⃣ Annonce en ligne défilante

Le type Running crée un ticker horizontal continu qui défile — semblable à une bande d'informations. Le texte du titre défile en boucle sur la barre.

Ce qu'il fait

• Affiche un seul message de titre qui défile en continu de manière fluide
• La direction et la vitesse sont entièrement configurables
• Le champ de sous-titre est masqué car ce format repose sur une seule ligne défilante

Champs de contenu disponibles

• Title (Titre) — Le message qui défile sur la barre. Prend en charge le texte enrichi.
• Animation speed (Vitesse d'animation) — Un curseur de 1 à 80 contrôlant la vitesse de déplacement du texte.
• Run left to right (Défiler de gauche à droite) — Une case à cocher qui inverse la direction de défilement par défaut.

Comment fonctionne la vitesse d'animation

• Les valeurs faibles = défilement plus lent, plus lisible
• Les valeurs élevées = défilement plus rapide
• La vitesse est calculée dynamiquement en fonction de la longueur du texte du titre

Comportement de l'appel à l'action

Les annonces en ligne défilante prennent en charge le bouton, le coupon, le déclencheur et l'absence d'appel à l'action. L'option Make entire bar clickable (Rendre toute la barre cliquable) enveloppe la zone défilante dans un lien.

Si un bouton ou un coupon est utilisé, il apparaît de manière statique à côté du texte défilant.

Meilleures utilisations

• Alertes de ventes flash
• Dates limites de livraison urgentes
• Slogans de marque répétitifs
• Rappels sensibles au temps

⚠️ Important : Les barres en ligne défilante fonctionnent mieux avec des titres courts. Des messages très longs peuvent créer un rythme de défilement irrégulier sur les petits écrans.

3️⃣ Annonces rotatives multiples

Le type Multiple vous permet d'empiler plusieurs annonces dans une seule barre qui les fait défiler automatiquement. Les clients voient un message à la fois, avec des flèches de navigation pour parcourir manuellement.

Ce qu'il fait

• Fait défiler plusieurs diapositives d'annonces
• Chaque diapositive a son propre titre, sous-titre et appel à l'action
• Avance automatiquement selon une durée d'affichage configurable
• Inclut une navigation par flèches gauche/droite

Champs de contenu disponibles

• Announcement display duration (Durée d'affichage de l'annonce) — Un curseur de 1 à 10 secondes contrôlant le temps pendant lequel chaque diapositive reste visible avant la rotation automatique.
• Announcement #1, #2, #3... — Chaque diapositive est un bloc de contenu indépendant avec son propre titre, sous-titre et appel à l'action.
• Add new announcement (Ajouter une nouvelle annonce) — Ajoute des diapositives supplémentaires.

Limites des diapositives

• Minimum : 2 diapositives
• Maximum : 20 diapositives

Vous pouvez réorganiser les diapositives à l'aide des flèches haut/bas, et en supprimer si vous en avez plus de 2.

Comportement de l'appel à l'action

Chaque diapositive peut avoir son propre appel à l'action indépendant. Une diapositive peut avoir un bouton, une autre peut afficher un coupon, et une troisième peut ne pas avoir d'appel à l'action.

Types d'appel à l'action pris en charge par diapositive : bouton, clic sur toute la barre, coupon, déclencheur ou aucun.

Effets d'animation

La transition entre les diapositives est contrôlée par le paramètre Animation dans l'onglet Design :

• Slide (Glissement) — Transition horizontale standard
• Fade (Fondu) — Fondu enchaîné fluide entre les diapositives
• Cube (Cube) — Effet de rotation 3D en cube
• Flip (Retournement) — Transition style retournement de carte

Meilleures utilisations

• Mettre en avant plusieurs promotions à la fois
• Annoncer différentes catégories de produits
• Faire tourner des messages sur la livraison, les retours et la confiance
• Mettre en avant plusieurs coupons sans encombrer la page

4️⃣ Bannière de collecte d'e-mails

Le type Email transforme la barre d'annonce en formulaire de collecte de leads. Il affiche un champ de saisie d'e-mail et un bouton d'envoi, puis affiche un état de succès après la soumission.

Ce qu'il fait

• Affiche un titre, un sous-titre et un champ de saisie d'e-mail
• Affiche un Success Message (Message de succès) après qu'un client a soumis son e-mail
• Peut inclure un code promo en récompense de l'abonnement

Champs de contenu disponibles

• Title (Titre) — Le message principal invitant les clients à s'abonner.
• Subheading (Sous-titre) — Texte d'accompagnement sous le titre.
• Button text (Texte du bouton) — Le libellé du bouton d'envoi. Par défaut Subscribe (S'abonner) s'il est laissé vide.
• Success Message (Message de succès) — Le texte de confirmation affiché après une soumission d'e-mail réussie.
• Email Placeholder (Espace réservé de l'e-mail) — Le texte d'indice à l'intérieur du champ d'e-mail vide.

Comportement de l'appel à l'action

Les barres de collecte d'e-mails prennent en charge deux modes d'appel à l'action :

• Button (Bouton) — Un bouton d'envoi standard. La barre collecte l'e-mail et affiche l'état de succès.
• Coupon (Coupon) — Affiche un code promo à côté ou à la place du champ de saisie, avec un bouton de copie facultatif.

Les options Make entire bar clickable (Rendre toute la barre cliquable) et Trigger App Event (Déclencher un événement d'application) ne sont pas disponibles pour ce type, car la barre est centrée sur la soumission du formulaire.

Aperçu de l'état de succès

Dans l'aperçu de l'application, vous verrez deux états de barre superposés :

1. Le formulaire actif de collecte d'e-mails
2. La barre de message de succès

Sur la boutique en ligne, les clients ne voient l'état de succès qu'après avoir soumis leur e-mail.

Meilleures utilisations

• Constituer des listes de newsletters
• Offrir des codes de réduction en échange d'e-mails
• Inscriptions à la liste d'attente avant le lancement
• Promouvoir des programmes VIP ou de fidélité

🔀 Comment la sélection du type affecte les paramètres visibles

Le choix d'un type d'annonce modifie dynamiquement les champs qui apparaissent dans l'onglet Content (Contenu). Voici une référence rapide :

Champs qui apparaissent selon le type

Limites des éléments de contenu

• Simple, Running, Email — Seul le premier élément de contenu est utilisé. Même si plusieurs éléments existent dans le modèle de données, seul le premier est affiché.
• Multiple — Tous les éléments de contenu sont utilisés comme diapositives individuelles.

⚠️ Si vous passez de Multiple à Simple, les diapositives supplémentaires sont conservées en arrière-plan mais ne s'affichent pas. Elles réapparaîtront si vous revenez à Multiple.

🎯 Explication des types d'appels à l'action

Le comportement de l'appel à l'action est globalement cohérent entre les types d'annonces, avec quelques exceptions spécifiques à chaque type.

No call to action (Aucun appel à l'action)

La barre est purement informative. Aucun bouton, lien ou zone cliquable n'est affiché.

Button (Bouton)

Un bouton cliquable apparaît. Vous configurez :

• Button text (Texte du bouton) — Ce que dit le bouton
• Link (Lien) — Où le bouton redirige

Make entire bar clickable (Rendre toute la barre cliquable)

Toute la zone d'annonce devient un lien. Cliquer n'importe où sur la barre redirige vers l'URL configurée.

ℹ️ Si votre barre contient des éléments cliquables imbriqués comme des icônes sociales, ceux-ci fonctionnent toujours indépendamment. Le clic sur toute la barre ne les remplace pas.

Coupon (Coupon)

Affiche une boîte de code promo stylisée. Vous configurez :

• Coupon Code (Code promo) — Le code de réduction réel
• Show copy button (Afficher le bouton de copie) — Ajoute une icône de copie en un clic à côté du code

Trigger App Event (Déclencher un événement d'application)

Au lieu de rediriger vers une URL, le bouton envoie un CustomEvent du navigateur. Vous configurez :

• Trigger ID (ID de déclenchement) — La chaîne du nom d'événement (par exemple, my-app:open-modal)

D'autres applications ou scripts de thème personnalisés écoutant ce nom d'événement peuvent y répondre.

⚠️ Les appels à l'action de déclenchement ne sont pas disponibles sur les barres de collecte d'e-mails, car l'action principale de la barre est la soumission du formulaire.

🎨 Comportement de conception selon le type

La plupart des paramètres de conception s'appliquent universellement, mais certains se comportent différemment selon le type.

Paramètre Animation (onglet Design)

• Simple & Email — L'animation contrôle l'effet d'entrée lors du premier chargement de la barre.
• Running — La vitesse d'animation est contrôlée dans l'onglet Content (Contenu), pas dans l'onglet Design.
• Multiple — L'animation contrôle l'effet de transition entre les diapositives (glissement, fondu, cube, retournement).

Icônes sociales

Des icônes de bannière peuvent être ajoutées à tous les types. Vous contrôlez la visibilité séparément pour ordinateur et mobile.

• Les icônes apparaissent de manière statique à côté du contenu
• Chaque icône peut renvoyer à une URL ou rester non cliquable

Icône de fermeture

Tous les types prennent en charge l'icône de fermeture. Lorsqu'elle est activée, vous pouvez configurer :

• Appear again after (Réapparaître après) — Combien d'heures ou de jours avant que la barre ne réapparaisse pour un visiteur qui revient

Si aucun délai de réapparition n'est défini, la barre reste masquée de façon permanente après avoir été fermée.

📱 Comportement mobile

Les quatre types de barres d'annonce sont entièrement responsives. Cependant, des ajustements de mise en page se produisent automatiquement :

• Les barres de collecte d'e-mails s'empilent verticalement sur mobile — le champ de saisie et le bouton apparaissent sur des lignes séparées
• Les barres rotatives multiples réduisent l'espacement des flèches et diminuent légèrement la taille des polices
• Les barres en ligne défilante maintiennent leur vitesse de défilement mais compressent la taille des icônes si les icônes sociales sont activées
• Les barres simples avec des boutons peuvent centrer le texte sur les petits écrans selon le type d'appel à l'action

Vous pouvez remplacer l'apparence mobile à l'aide du panneau Custom CSS (CSS personnalisé) dans l'onglet Design si nécessaire.

💡 Exemples de cas d'usage

Exemple 1 — Barre simple avec coupon

• Type : Simple
• Title (Titre) : « Les soldes d'été sont lancées ☀️ »
• Subheading (Sous-titre) : « Utilisez le code SUNNY pour 20 % de réduction »
• CTA : Coupon
• Coupon code (Code promo) : SUNNY
• Résultat : Une barre propre et statique avec un code de réduction copiable.

Exemple 2 — Ticker défilant pour l'urgence

• Type : Running
• Title (Titre) : « La livraison gratuite se termine ce soir à minuit ⏰ »
• Animation speed (Vitesse d'animation) : 25
• CTA : None (Aucun)
• Résultat : Un message d'urgence défilant en continu en haut de la boutique.

Exemple 3 — Diapositives multiples pour différentes collections

• Type : Multiple
• Diapositive 1 : « Jusqu'à 50 % de réduction sur les chaussures → » avec un bouton lien vers /collections/shoes
• Diapositive 2 : « Nouveautés en accessoires → » avec un bouton lien vers /collections/accessories
• Diapositive 3 : « Retours gratuits sur toutes les commandes » sans appel à l'action
• Display duration (Durée d'affichage) : 4 secondes
• Résultat : Une seule barre qui fait défiler automatiquement trois promotions distinctes.

Exemple 4 — Collecte d'e-mails avec récompense par coupon

• Type : Email
• Title (Titre) : « Rejoignez la liste VIP »
• Subheading (Sous-titre) : « Bénéficiez de 15 % de réduction sur votre première commande »
• Button text (Texte du bouton) : « Obtenir mon code »
• Success Message (Message de succès) : « Bienvenue ! Votre code WELCOME15 est prêt. »
• Email Placeholder (Espace réservé de l'e-mail) : « Entrez votre e-mail »
• Résultat : Une barre de collecte de leads qui récompense les abonnés avec un coupon instantané.

⚠️ Notes importantes et limitations

Changement de type

Le passage d'un type à l'autre ne supprime pas votre contenu. Cependant :

• Le passage de Multiple à Simple masque les diapositives supplémentaires
• Le passage de Running à Simple fait réapparaître le champ de sous-titre
• Le passage à Email masque les champs Trigger ID s'ils étaient précédemment définis

Pensez toujours à vérifier votre contenu après avoir changé de type.

Longueur de la ligne défilante

Des titres très longs dans les barres défilantes peuvent provoquer un timing de défilement irrégulier, en particulier sur mobile. Testez avec la longueur réelle de votre message avant de publier.

Minimum de diapositives multiples

Vous ne pouvez pas publier une annonce Multiple avec moins de 2 diapositives. Si vous n'avez besoin que d'un seul message, utilisez plutôt le type Simple.

État de succès de la barre d'e-mail

L'état de succès n'apparaît qu'après qu'un client a soumis un e-mail. L'aperçu dans l'application montre les deux états superposés à titre de référence, mais les clients en ligne voient d'abord le formulaire.

Clic sur toute la barre et éléments imbriqués

Lorsque Make entire bar clickable (Rendre toute la barre cliquable) est activé, cliquer sur les icônes sociales ou le bouton de copie fonctionne toujours comme prévu. Le clic sur toute la barre ignore ces éléments interactifs imbriqués.

🎉 Résultat final

Comprendre les quatre types de barres d'annonce vous aide à associer le bon format à votre objectif :

✅ Simple — Idéal pour les promotions statiques uniques
✅ Running — Idéal pour l'urgence et les messages en ticker répétitifs
✅ Multiple — Idéal pour faire tourner plusieurs offres dans un seul placement
✅ Email — Idéal pour collecter des leads et développer des listes d'abonnés

Chaque type prend en charge le même système de conception, les mêmes règles de placement, la planification et la logique de ciblage. La différence réside purement dans la façon dont le contenu est présenté et avec lequel on interagit.

Choisir le bon type dès le départ garantit que votre annonce s'intègre naturellement à votre boutique et transmet le bon message dans le bon format 🚀

Mis à jour le : 10/09/2026