La barre d'annonce avec 4 modes (simple, fade, marquee, timer), blocs multiples, options de sticky et personnalisation avancee.
Barre d'annonce (Announcement Bar)
La barre d'annonce est une bande fine en haut de votre site qui communique des informations importantes : promotions, livraison gratuite, délais, codes promo. Scale Theme propose 4 modes pour l'afficher, du plus simple au plus impactant.
Les 4 types d'annonce
| Type | Description | Idéal pour |
|---|---|---|
| Simple | Un seul message statique | Message court et clair |
| Fade | Plusieurs messages en rotation avec fondu | Plusieurs informations a communiquer |
| Marquee | Defilement continu de messages | Dynamisme, multiple messages, ambiance |
| Timer | Message avec compte à rebours intégré | Promotions limitées, urgence |
Simple
Un message unique affiché de manière statique. C'est le mode le plus courant et le plus lisible.
| Setting | Options | Défaut |
|---|---|---|
| Texte | Richtext inline | "Welcome to our store" |
| Lien | URL | - |
| Alignement | Gauche / Centre / Droite | Centre |
Quand un lien est défini, la barre entière devient cliquable. Une flèche s'affiche automatiquement à la fin du texte pour indiquer l'interactivité.
Fade
Plusieurs messages qui alternent avec un effet de fondu. Chaque message est un bloc "Marquee Item" que vous ajoutez dans l'éditeur Shopify.
| Setting | Options | Défaut |
|---|---|---|
| Durée d'affichage | 2 - 10 secondes | 4s |
Configuration des messages :
Chaque message est un bloc avec les settings suivants :
| Setting | Description | Défaut |
|---|---|---|
| Texte | Contenu du message | - |
| Image | Image/icône optionnelle | - |
| Position de l'image | Avant / Après le texte | Avant |
| Taille de l'image | Taille en pixels | 20px |
| Lien | URL de destination | - |
Le premier message s'affiche immédiatement, puis chaque message suivant apparaît après la durée configurée. Quand le dernier message est affiché, la rotation reprend au premier.
Marquee
Un défilement horizontal continu des messages, créant un effet de bandeau defilant. Idéal pour créer une ambiance dynamique.
| Setting | Options | Défaut |
|---|---|---|
| Vitesse de défilement | 5 - 60 secondes | 20s |
| Espacement des messages | 40 - 200px | 80px |
| Pause au survol | Oui / Non | Oui |
| Fondu aux bords | Oui / Non | Oui |
Les messages sont les mêmes blocs "Marquee Item" que pour le mode Fade. Le système duplique automatiquement les messages 6 fois pour assurer un défilement continu sans interruption visible.
Timer
Un message accompagne d'un compte à rebours intégré. Cree un sentiment d'urgence pour les promotions a durée limitée.
| Setting | Options | Défaut |
|---|---|---|
| Texte principal | Richtext inline | - |
| Texte secondaire | Texte (affiché après le timer) | - |
| Surcharger le timer | Oui / Non | Non |
| Date de fin | Date (YYYY-MM-DD) | 2025-12-31 |
| Heure de fin | Heure (HH:MM) | 23:59 |
| Couleur du timer | Accent 1 / Accent 2 / Texte / Background | Accent 1 |
| Lien | URL | - |
Le timer s'affiche au style minimalist entre le texte principal et le texte secondaire, créant une mise en page equilibree.
Blocs "Marquee Item"
Les blocs Marquee Item sont utilises par les modes Fade et Marquee. Chaque bloc représente un message individuel.
| Setting | Description | Défaut |
|---|---|---|
| Texte | Contenu du message | - |
| Image | Icône ou petite image | - |
| Position de l'image | Avant / Après le texte | Avant |
| Taille de l'image | Dimension de l'icône en px | 20px |
| Lien | URL de destination au clic | - |
Exemple de configuration recommandée
| Bloc | Texte | Icône |
|---|---|---|
| Bloc 1 | "Livraison gratuite des 50 EUR" | Icône camion |
| Bloc 2 | "10 000+ clients satisfaits" | Icône étoile |
| Bloc 3 | "Paiement 100% sécurisé" | Icône cadenas |
| Bloc 4 | "Retour gratuit 30 jours" | Icône flèche retour |
Sticky (fixe en haut)
| Setting | Options | Défaut |
|---|---|---|
| Barre sticky | Oui / Non | Non |
Quand active, la barre d'annonce reste fixee en haut de l'écran même quand l'utilisateur scrolle. Elle se positionne au-dessus du header avec un z-index: 110.
Couleurs et palette
| Setting | Options | Défaut |
|---|---|---|
| Palette de couleurs | Toutes les palettes | Background |
Alignement du texte
| Setting | Options | Défaut |
|---|---|---|
| Alignement | Gauche / Centre / Droite | Centre |
Disponible pour tous les types. L'alignement Centre est recommandé pour la lisibilité.
Largeur du conteneur
| Setting | Options | Défaut |
|---|---|---|
| Largeur | Pleine largeur / Normal / Etroit | Normal |
Bordure
La barre d'annonce peut avoir une bordure pour la separer visuellement du header.
| Setting | Options | Défaut |
|---|---|---|
| Position de la bordure | Aucune / Haut / Bas / Les deux | Aucune |
| Epaisseur | 1 - 3px | 1px |
| Style | Solide / Tirets / Points | Solide |
| Opacite | 10% - 100% | 20% |
Espacement
| Setting | Plage | Défaut |
|---|---|---|
| Padding vertical desktop | 4 - 30px | 8px |
| Padding vertical mobile | 4 - 20px | 6px |
Position dans la page
La barre d'annonce se place au-dessus du header dans la structure de la page. Dans l'éditeur Shopify, elle fait partie du groupe "Header" et ne peut pas être placée dans le footer où le contenu principal.
La hiérarchie visuelle est :
- Barre d'annonce (si présenté)
- Header
- Contenu de la page
Exemples de configurations
E-commerce classique (simple)
- Type : Simple
- Texte : "Livraison offerte des 50 EUR - Code: SCALE50"
- Lien : Page promotions
- Palette : Accent 1
Boutique dynamique (marquee)
- Type : Marquee
- Vitesse : 20s
- Espacement : 80px
- Messages : 4 blocs avec icônes (livraison, satisfaction, sécurité, retour)
- Pause au survol : Oui
- Fondu aux bords : Oui
Vente flash (timer)
- Type : Timer
- Texte : "Vente Flash -30%"
- Texte secondaire : "Code: FLASH30"
- Surcharger timer : Oui, avec la date de fin de promo
- Couleur timer : Accent 2
Multi-informations (fade)
- Type : Fade
- Durée : 4s
- Messages : 3 blocs alternant promo, livraison et garantie
- Palette : Background (discret)
Résumé des settings
| Catégorie | Setting | Options | Défaut |
|---|---|---|---|
| Type | Type d'annonce | Simple / Fade / Marquee / Timer | Simple |
| Contenu | Texte | Richtext inline | "Welcome..." |
| Contenu | Lien | URL | - |
| Fade | Durée d'affichage | 2 - 10s | 4s |
| Marquee | Vitesse | 5 - 60s | 20s |
| Marquee | Espacement | 40 - 200px | 80px |
| Marquee | Pause au survol | Oui / Non | Oui |
| Marquee | Fondu aux bords | Oui / Non | Oui |
| Timer | Surcharger timer | Oui / Non | Non |
| Timer | Date de fin | Date | 2025-12-31 |
| Timer | Heure de fin | Heure | 23:59 |
| Timer | Couleur du timer | Accent 1/2, Texte, Background | Accent 1 |
| Apparence | Palette de couleurs | Toutes | Background |
| Apparence | Alignement | Gauche / Centre / Droite | Centre |
| Apparence | Largeur conteneur | Full / Normal / Etroit | Normal |
| Bordure | Position | Aucune / Haut / Bas / Les deux | Aucune |
| Bordure | Epaisseur | 1 - 3px | 1px |
| Bordure | Style | Solide / Tirets / Points | Solide |
| Bordure | Opacite | 10 - 100% | 20% |
| Comportement | Sticky | Oui / Non | Non |
| Espacement | Padding desktop | 4 - 30px | 8px |
| Espacement | Padding mobile | 4 - 20px | 6px |
Prochaines étapes
- Header — Configurez le header qui contient la barre d'annonce
- Mega menu — Navigation avancée multi-colonnes
- Countdown timer — Ajoutez de l'urgence à vos annonces
- Palettes de couleurs — Personnalisez les couleurs de la barre