Vous souhaitez contrôler totalement l’apparence de votre barre d’annonces ? 🎨

Bien que les paramètres de conception intégrés couvrent la plupart des besoins de personnalisation, la fonctionnalité Custom CSS (CSS personnalisé) vous permet d’affiner le style au-delà des options standard.

Cela est utile pour les marchands qui souhaitent respecter précisément les directives de leur marque, ajuster les espacements, personnaliser la typographie ou résoudre des conflits de style propres à un thème.

⚠️ Avant de commencer

Avant d’utiliser le Custom CSS :

• Assurez-vous que votre barre d’annonces a déjà été créée.
• Disposez de connaissances de base en CSS ou de l’aide d’un développeur.
• Sachez que le Custom CSS peut remplacer les paramètres de conception standard.

ℹ️ La plupart des marchands n’ont jamais besoin de Custom CSS. Utilisez-le uniquement lorsque les options de conception intégrées ne permettent pas d’obtenir l’apparence souhaitée.

🛠️ Étape 1 — Ouvrir l’onglet Design

Ouvrez l’application Hoppy Announcement Bar et accédez à la barre d’annonces que vous souhaitez personnaliser.

Puis :

➡️ Cliquez sur l’onglet Design (Conception).

Faites défiler vers le bas jusqu’à trouver la section Custom CSS.

🎨 Étape 2 — Activer le Custom CSS

Dans la section Custom CSS :

➡️ Cliquez sur Apply (Appliquer).

Une fois activé, un éditeur CSS apparaît avec un squelette CSS préconfiguré.

Ce squelette inclut tous les sélecteurs pris en charge, ce qui facilite le ciblage des différents éléments de la barre d’annonces sans avoir à identifier manuellement les noms de classes.

✍️ Étape 3 — Ajouter votre Custom CSS

L’éditeur fournit des sélecteurs prêts à l’emploi pour les principaux éléments de la barre d’annonces.

Sélecteurs disponibles

Sélecteurs spécifiques aux mobiles

Pour cibler spécifiquement les appareils mobiles, utilisez la variation .mobile.

Exemples :

• .futureblink-announcement-bar.mobile .title
• .futureblink-announcement-bar.mobile .cta-button
• .futureblink-announcement-bar.mobile .close-btn

Exemple de CSS

Pour mettre le titre en majuscules avec un espacement supplémentaire :

.futureblink-announcement-bar .title {
text-transform: uppercase;
letter-spacing: 2px;
}

Pour que le bouton d’appel à l’action occupe toute la largeur sur mobile :

.futureblink-announcement-bar.mobile .cta-button {
width: 100%;
}

💡 Vous pouvez utiliser toutes les propriétés CSS valides au sein des sélecteurs fournis.

👀 Étape 4 — Prévisualiser vos modifications

Après avoir saisi votre CSS :

➡️ Cliquez sur Apply.

L’aperçu en direct se met à jour automatiquement afin que vous puissiez immédiatement vérifier vos modifications.

Si des ajustements sont nécessaires :

➡️ Modifiez le CSS directement dans l’éditeur.

➡️ Consultez l’aperçu mis à jour.

⚙️ Fonctionnement du Custom CSS

L’application applique automatiquement un traitement supplémentaire pour garantir que votre style fonctionne correctement.

Injection automatique de !important

Toutes les déclarations CSS reçoivent automatiquement la priorité !important sur la boutique en ligne pour éviter que le style du thème ne remplace vos modifications.

Gestion automatique des mobiles

Les sélecteurs utilisant la variation .mobile sont automatiquement enveloppés dans des media queries mobiles lors du rendu sur votre boutique en ligne.

Priorité de remplacement de la conception

Le Custom CSS prend généralement le pas sur les paramètres de conception standard configurés ailleurs dans l’application.

💾 Étape 5 — Enregistrer et publier

Une fois que le style vous convient :

➡️ Cliquez sur Save (Enregistrer).

➡️ Cliquez sur Publish (Publier).

⚠️ L’enregistrement seul ne met pas à jour votre boutique en ligne.

La configuration doit également être publiée avant que les clients puissent voir les modifications.

🔄 Réinitialiser le Custom CSS

Si vous souhaitez revenir aux paramètres de conception par défaut :

➡️ Ouvrez la section Custom CSS.

➡️ Cliquez sur Reset (Réinitialiser).

Cela supprime votre CSS personnalisé et restaure le contrôle aux paramètres de conception standard.

💡 Conseils utiles

Commencez petit

Apportez une modification à la fois pour mieux identifier l’effet de chaque règle CSS.

Utilisez l’aperçu en direct

Vérifiez toujours les modifications dans l’aperçu avant de publier.

Testez les mises en page mobiles

Même si votre CSS semble correct sur ordinateur, vérifiez également l’apparence sur les appareils mobiles.

Conservez une sauvegarde

Pour des personnalisations CSS importantes, envisagez de conserver une copie de votre code en dehors de l’application.

❓ Résolution des problèmes

Si votre CSS ne s’applique pas comme prévu :

➡️ Vérifiez que Apply a bien été activé.

➡️ Confirmez que la barre d’annonces a bien été Saved (Enregistrée) et Published (Publiée).

➡️ Vérifiez que les noms de sélecteurs correspondent exactement aux noms de classes fournis.

➡️ Testez dans une fenêtre de navigation privée pour écarter les problèmes de cache du navigateur.

Pour des besoins de style avancés, envisagez de faire appel à un développeur Shopify ou à l’équipe d’assistance de votre thème.

🎉 Résultat final

✅ Votre barre d’annonces utilise un style entièrement personnalisé.

✅ Les conflits avec le thème sont minimisés grâce à la gestion automatique de la priorité CSS.

✅ Les mises en page mobiles et bureau peuvent être stylées indépendamment.

✅ La barre d’annonces peut être adaptée pour correspondre plus précisément à l’identité visuelle de votre marque.

Le Custom CSS offre une flexibilité maximale lorsque les paramètres de conception standard ne suffisent pas, permettant de créer une expérience de boutique en ligne plus soignée et cohérente. 🚀

Mis à jour le : 01/09/2026