L'onglet Design (Conception) vous donne le contrôle total de l'apparence de votre barre d'annonce dans votre boutique. Des couleurs d'arrière-plan et de la typographie aux animations de boutons, au style des icônes et au CSS personnalisé — pratiquement chaque détail visuel peut être ajusté pour correspondre à votre marque.

Vous pouvez lancer rapidement avec un modèle prêt à l'emploi ou personnaliser chaque pixel manuellement. Dans les deux cas, la barre s'intégrera naturellement à votre boutique 🎨

La plupart des paramètres liés aux couleurs incluent :

• Un Color Picker (sélecteur de couleurs) pour une sélection visuelle
• Une Hex Code Input (saisie du code hexadécimal) pour des couleurs de marque exactes

⚠️ Avant de commencer

Pour configurer les paramètres de l'onglet Design (Conception) :

→ Ouvrir une barre d'annonce existante
→ Ou en créer une nouvelle d'abord

Cliquez ensuite sur l'onglet Design dans l'éditeur.

ℹ️ Certaines options n'apparaissent que pour des types ou configurations de barre spécifiques. Par exemple, les animations de transition ne s'affichent que pour les barres Multiple (Multiples), et le style du coupon n'apparaît que lorsque le CTA Coupon est utilisé. Ces champs conditionnels sont indiqués ci-dessous pour que vous sachiez exactement quand les attendre.

🎨 Template (Modèle)

• What it does (À quoi ça sert) : Applique instantanément un style visuel prédéfini à votre barre d'annonce.
• How to use (Comment l'utiliser) : Choisissez parmi plus de 25 modèles pour démarrer votre design sans toucher manuellement à chaque champ.

Chaque modèle pré-remplit :

• Le type, la couleur et les paramètres de dégradé de l'arrière-plan
• Les couleurs et tailles du titre et du sous-titre
• Les couleurs du bouton, la couleur du texte et le rayon des coins
• Le style de la bordure, des icônes et du coupon

Available templates include: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Important : Le choix d'un modèle écrasera la plupart des champs de conception. Vos paramètres Visibility (Visibilité) et Position (Position), configurés dans l'onglet Placement (Placement), sont conservés.

💡 Les modèles sont idéaux pour les campagnes saisonnières. Vous voulez un look Black Friday ? Sélectionnez le modèle Black Friday et affinez-le ensuite.

👀 Visibility (Visibilité)

• What it does (À quoi ça sert) : Contrôle sur quels appareils votre barre d'annonce s'affiche.
• Options :
• • Desktop and Mobile (Ordinateur et mobile) — Visible sur tous les appareils
  • Only Desktop (Ordinateur uniquement)
  • Only Mobile (Mobile uniquement)

Cela est utile lorsque vous souhaitez un message ou une mise en page différente pour les acheteurs sur ordinateur et sur mobile.

🖼️ Background Style (Style d'arrière-plan)

• What it does (À quoi ça sert) : Modifie l'apparence de l'arrière-plan de la barre d'annonce.
• Options Available (Options disponibles) :
• • Single Color (Couleur unique) — Une couleur d'arrière-plan unie
  • Gradient (Dégradé) — Deux couleurs mélangées selon un angle personnalisé
  • Patterns (Motifs) — Motifs d'arrière-plan décoratifs

🎨 Single Color (Couleur unique)

• Choisissez une couleur à l'aide du Color Picker (sélecteur de couleurs) ou saisissez manuellement un Hex Code (code hexadécimal).

🌈 Gradient (Dégradé)

• Gradient Angle Degree (Angle du dégradé en degrés) : Contrôle la direction du mélange (0–360°)
• Initial Color (Couleur initiale) : La couleur de départ
• Final Color (Couleur finale) : La couleur d'arrivée

💡 Un dégradé subtil peut ajouter de la profondeur sans être distrayant. Essayez des angles peu contrastés pour un look moderne.

✨ Patterns (Motifs)

La sélection de Patterns (Motifs) affiche un menu déroulant avec plus de 35 options d'arrière-plan intégrées :

• Decorative (Décoratifs) : Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Holiday & Seasonal (Fêtes et saisonniers) : Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Textured (Texturés) : Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Les motifs sont appliqués comme styles d'arrière-plan CSS. Certains utilisent du CSS pur ; d'autres utilisent des ressources image.

📐 Borders & Corners (Bordures et coins)

Cette section contrôle la forme et le contour de la barre.

• Bar Corner Radius (px) (Rayon des coins de la barre, en px) : Détermine l'arrondi des coins de la barre
• Bar Padding (px) (Marge intérieure de la barre, en px) : Espacement intérieur entre les bords de la barre et son contenu
• Border Size (px) (Épaisseur de la bordure, en px) : Épaisseur de la bordure extérieure
• Border Color (Couleur de la bordure) : La couleur de la bordure

💡 Un rayon des coins de 0 donne une barre rectangulaire nette. Des valeurs plus élevées créent des formes plus douces et modernes.

🔤 Typography (Typographie)

Cette section contrôle l'apparence de tout le texte dans la barre d'annonce.

📝 Title Styling (Style du titre)

• Title Size (px) (Taille du titre, en px) : La taille du message principal
• Title Color (Couleur du titre) : La couleur du message principal

📄 Subheading Styling (Style du sous-titre)

• Subheading Size (px) (Taille du sous-titre, en px) : La taille du texte secondaire
• Subheading Color (Couleur du sous-titre) : La couleur du texte secondaire

ℹ️ Le champ du sous-titre est masqué lorsque vous utilisez le type de barre Running (Défilante), car les barres défilantes utilisent généralement une seule ligne de texte.

🔠 Font (Police)

Choisissez parmi 63 polices disponibles, notamment :

• System fonts (Polices système) : Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, et plus encore
• Google Fonts (Polices Google) : Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, et bien d'autres

La première option est Use your theme font (Utiliser la police de votre thème), qui correspond automatiquement à la typographie existante de votre boutique.

💡 Pour la lisibilité, limitez-vous à 1–2 polices par barre. Une police d'affichage audacieuse pour le titre et une sans-serif épurée pour le sous-titre fonctionnent souvent bien.

🔘 Button Design (Conception du bouton)

Cette section personnalise le bouton d'appel à l'action.

ℹ️ Ces paramètres sont toujours disponibles dans l'onglet Design. Ils affectent la boutique uniquement lorsque votre type de CTA est réglé sur Button (Bouton), Full Bar (Barre complète) ou Trigger (Déclencheur).

🎨 Button Color (Couleur du bouton)

• Modifie la couleur d'arrière-plan du bouton CTA.

🔤 Button Text Size & Color (Taille et couleur du texte du bouton)

• Size (px) (Taille, en px) : Contrôle la taille du texte à l'intérieur du bouton
• Color (Couleur) : Modifie la couleur du texte du bouton

⭕ Corner Radius & Button Style (Rayon des coins et style du bouton)

Ces deux champs sont liés :

• Corner Radius (px) (Rayon des coins, en px) : Saisissez manuellement une valeur pour contrôler l'arrondi
• Button Style (Style du bouton) : Basculez rapidement entre les préréglages :
• • Square (Carré) → règle le rayon à 0 px
  • Rounded (Arrondi) → règle le rayon à 10 px
  • Fully Rounded (Entièrement arrondi) → règle le rayon à 30 px

Lorsque vous sélectionnez un préréglage de style, le rayon des coins se met à jour automatiquement. Lorsque vous saisissez un rayon personnalisé, le préréglage de style se met à jour pour correspondre :

• 0–9 px → Square (Carré)
• 10–29 px → Rounded (Arrondi)
• 30+ px → Fully Rounded (Entièrement arrondi)

💪 Font Weight (Graisse de la police)

• Contrôle l'aspect plus ou moins gras du texte du bouton
• Options : Normal, Bold, 100–900

✍️ Font Style (Style de police)

• Basculez entre : Normal, Italic, Underline

✨ Button Animation (Animation du bouton)

Ajoute une animation continue au bouton pour le faire ressortir.

Animations disponibles : None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Des animations subtiles comme Bounce ou Emitting attirent l'attention sans être agressives. Utilisez Flip ou Tada pour les campagnes à forte urgence.

🏷️ Coupon Design (Conception du coupon)

Cette section personnalise l'apparence de la zone de code coupon.

ℹ️ Cette section n'apparaît que lorsque :

• Une diapositive de contenu utilise Coupon comme type de CTA, ou
• Le type de barre est réglé sur Email (E-mail)

Available Settings (Paramètres disponibles)

• Coupon Border Style (Style de bordure du coupon) : Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, or None (tirets, pleine ligne, pointillés, double, rainure, relief, incrusté, dégagé, aucune)
• Coupon Border Color (Couleur de bordure du coupon) : La couleur du contour de la zone de coupon
• Coupon Text Color (Couleur du texte du coupon) : La couleur du texte du code coupon
• Coupon Background (Arrière-plan du coupon) : La couleur d'arrière-plan de la zone de coupon (prend en charge les arrière-plans transparents)

💡 Une bordure en pointillés avec un arrière-plan contrasté est le look classique d'un coupon. Essayez un arrière-plan semi-transparent si vous souhaitez que le motif ou le dégradé de la barre transparaisse.

🎆 Bar Animations (Animations de la barre)

Multiple Bar Transition (Transition entre barres multiples)

Disponible uniquement lorsque le type de barre est réglé sur Multiple (Multiple).

Contrôle la façon dont les diapositives se succèdent :

• Slide (Glissement) — Fait glisser horizontalement les annonces les unes après les autres
• Fade In (Fondu) — Fait apparaître en fondu enchaîné d'une diapositive à l'autre
• Cube (Cube) — Effet de rotation 3D en cube
• Flip (Retournement) — Effet de transition retournement de carte

ℹ️ Ce paramètre se trouve dans l'onglet Design, pas dans l'onglet Content (Contenu).

🎨 Icon Settings (Paramètres des icônes)

🚪 Close Icon Color (Couleur de l'icône de fermeture)

• Modifie la couleur de l'icône du bouton de fermeture.
• Visible uniquement lorsque l'option Close Icon (Icône de fermeture) est activée dans l'onglet Content (Contenu).

➡️ Arrow Icon Color (Couleur de l'icône de flèche)

• Modifie la couleur des flèches de navigation.
• Visible uniquement lorsque le type de barre est réglé sur Multiple (Multiple), car les flèches servent à naviguer entre les diapositives.

👥 Banner Icons (Social Icons) (Icônes de bannière (icônes sociales))

Cette section définit le style des icônes de réseaux sociales qui apparaissent dans la barre.

• Social Icon Size (px) (Taille de l'icône sociale, en px) : Ajuste la taille de l'icône
• Social Icon Color (Couleur de l'icône sociale) : Modifie la couleur de l'icône
• Social Icon Position (Position de l'icône sociale) : Place les icônes sur le côté Left (Gauche) ou Right (Droit) de la barre
• Use Original Social Icon Color (Utiliser la couleur d'origine de l'icône sociale) : Lorsqu'elle est activée, chaque plateforme conserve sa couleur de marque (bleu Facebook, dégradé Instagram, etc.) au lieu d'utiliser votre couleur personnalisée

ℹ️ Les icônes sociales sont configurées dans l'onglet Content (Contenu). L'onglet Design contrôle uniquement leur apparence.

💻 Custom CSS (For Advanced Users) (CSS personnalisé (pour utilisateurs avancés))

💡 Advanced Feature (Fonctionnalité avancée) : Si vous avez besoin d'un style qui n'est pas disponible dans les paramètres standard, vous pouvez écrire votre propre CSS directement dans l'éditeur.

Lorsqu'il est activé, un squelette CSS est fourni avec des classes cible prédéfinies :

• Conteneur entier de la barre : .futureblink-announcement-bar
• Texte du titre : .futureblink-announcement-bar .title
• Texte du sous-titre : .futureblink-announcement-bar .subheading
• Titre mobile : .futureblink-announcement-bar.mobile .title
• Sous-titre mobile : .futureblink-announcement-bar.mobile .subheading
• Bouton CTA : .futureblink-announcement-bar .cta-button
• Bouton CTA mobile : .futureblink-announcement-bar.mobile .cta-button
• Bouton de fermeture : .futureblink-announcement-bar .close-btn
• Flèches de navigation : .futureblink-announcement-bar .arrow
• Boutons Précédent/Suivant : .futureblink-announcement-bar .button-prev et .button-next

How custom CSS works on the storefront (Comment le CSS personnalisé fonctionne dans la boutique) :

• Tous les sélecteurs sont automatiquement limités à votre barre d'annonce spécifique
• Chaque déclaration reçoit la priorité !important pour remplacer les styles du thème
• Les sélecteurs mobiles (.mobile) sont automatiquement enveloppés dans une requête média mobile
• Le CSS est injecté sous forme de balise <style> lorsque la barre s'affiche

⚠️ Please note (Veuillez noter) : Le CSS personnalisé est puissant mais peut entrer en conflit avec les styles du thème. Testez attentivement sur ordinateur et mobile après avoir appliqué des modifications.

🛒 Checkout Design (Conception de la page de paiement)

Disponible uniquement pour les barres d'annonce placées sur la Checkout Page (Page de paiement) (Shopify Plus requis).

Lorsque l'onglet Placement (Placement) est réglé sur Checkout Page (Page de paiement), l'onglet Design complet est remplacé par un panneau simplifié :

• Checkout Title Size (Taille du titre de la page de paiement) — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color (Couleur du titre de la page de paiement) — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size (Taille du sous-titre de la page de paiement) — Mêmes options de taille
• Checkout Subheading Color (Couleur du sous-titre de la page de paiement) — Mêmes options de couleur

ℹ️ La conception de la page de paiement utilise les tonalités natives de Shopify pour un style cohérent dans l'environnement de paiement. Les dégradés, motifs, boutons et CSS personnalisé ne sont pas disponibles dans les barres de paiement.

🚀 Final Result (Résultat final)

Une fois configurés avec succès, les paramètres Design & Styling (Conception et style) vous aident à créer une barre d'annonce visuellement cohérente et professionnelle qui s'intègre naturellement à votre boutique.

Avec un style approprié :

✅ La barre s'aligne sur les couleurs et la typographie de votre marque
✅ Les messages importants deviennent plus visibles et lisibles
✅ Les boutons et CTA se démarquent sans être intrusifs
✅ Les motifs et dégradés d'arrière-plan ajoutent une personnalité visuelle
✅ Les transitions entre diapositives sont fluides et soignées
✅ Les expériences mobile et ordinateur sont optimisées indépendamment
✅ Les utilisateurs avancés peuvent étendre le style avec du CSS personnalisé

Utiliser efficacement ces options de conception et de style garantit que chaque barre d'annonce semble intentionnelle, conforme à votre marque et facile à utiliser pour vos clients ✨

Mis à jour le : 01/09/2026