ℹ️ 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.

Envie que votre barre d’annonce apparaisse à un endroit précis que le positionnement automatique ne couvre pas ? 🎯

Le placement personnalisé vous donne un contrôle total sur l’emplacement exact où s’affiche votre barre — que ce soit à l’intérieur d’une section spécifique de votre thème, sous votre navigation, dans une zone de description de produit, ou partout ailleurs où vous pouvez ajouter un extrait de code ou un bloc d’application.

Ce guide vous accompagne pour configurer une barre d’annonce avec placement manuel afin qu’elle s’affiche exactement là où vous le souhaitez ✨

✅ Avant de commencer

Assurez-vous que l’intégration d’application Hoppy Announcement Bar est activée dans votre thème. Même avec un placement personnalisé, cette intégration charge les scripts et styles nécessaires.

Pour l’activer :

1. Allez dans Shopify Admin (Admin Shopify) → Sales Channels (Canaux de vente) → Online Store (Boutique en ligne) → Themes (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
5. Activez-le en le passant à ON (Activé)
6. Cliquez sur Save (Enregistrer)

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

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

Ouvrez l’application Hoppy Announcement Bar depuis votre admin Shopify.

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

Vous accédez à l’écran de sélection du placement.

📌 Étape 2 — Sélectionner la position personnalisée

Parmi les options de placement, choisissez Custom Position (Position personnalisée).

Cela indique à l’application que c’est vous — et non l’injecteur automatique — qui décidez exactement où la barre apparaît sur votre boutique.

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

🎨 Étape 3 — Concevoir votre barre

Créez votre barre d’annonce comme vous le souhaitez :

• Ajoutez votre title (titre), subheading (sous-titre) et CTA (appel à l’action)
• Choisissez un announcement type (type d’annonce) (Simple, Running, Multiple ou Email)
• Personnalisez-la dans l’onglet Design (Design)

💡 Pour des conseils détaillés sur le design — modèles, couleurs, animations et CSS personnalisé — consultez la documentation dédiée Design & Styling.

📍 Étape 4 — Définir l’affichage sur Manuel

Cliquez sur l’onglet Placement (Placement).

Dans le menu déroulant Display Position (Position d’affichage), sélectionnez Manual (Manuel).

Lorsque vous faites cela :

• Le menu déroulant Page Targeting (Ciblage de page) est automatiquement désactivé et réglé sur Custom (Personnalisé)
• La barre ne s’injectera plus automatiquement dans la page
• Elle attendra à la place que vous la placiez à l’aide d’un extrait de code ou d’un bloc d’application

C’est exactement ce qui rend le placement personnalisé possible 🛠️

📋 Étape 5 — Copier votre extrait de placement

Une fois la barre enregistrée, l’onglet Placement affiche un extrait de code copiable :

\<div class="futureblink-announcement-block" id="{announcementId}"\>\</div\>

Chaque annonce possède un identifiant unique. L’extrait indique exactement à l’application quelle barre afficher dans ce conteneur.

Cliquez sur le bouton de copie pour le sauvegarder dans votre presse-papiers 📋

🧩 Étape 6 — Ajouter l’extrait à votre thème

Vous disposez de deux méthodes pour placer l’extrait :

Option A — Utiliser un bloc d’application (recommandé)

C’est la méthode la plus simple et elle fonctionne avec les thèmes Online Store 2.0.

1. Allez dans Shopify Admin → Sales Channels → Online Store → Themes
2. Cliquez sur Edit Theme sur votre thème actif
3. Naviguez vers la page ou la section où vous souhaitez placer la barre
4. Cliquez sur Add Section (Ajouter une section) ou Add Block (Ajouter un bloc)
5. Allez dans l’onglet Apps (Applications)
6. Sélectionnez Hoppy Announcement Bar
7. Collez votre Announcement ID (Identifiant d’annonce) dans les paramètres du bloc
8. Faites glisser le bloc à l’emplacement souhaité
9. Cliquez sur Save (Enregistrer)

Option B — Utiliser un extrait Liquid personnalisé

Utilisez cette méthode si vous souhaitez placer la barre dans un fichier Liquid spécifique ou un thème non-OS 2.0.

1. Allez dans Shopify Admin → Sales Channels → Online Store → Themes
2. Cliquez sur le menu ... sur votre thème actif → Edit Code (Modifier le code)
3. Ouvrez le fichier Liquid où vous souhaitez que la barre apparaisse
4. • Exemples courants : theme.liquid, product.liquid, header.liquid
4. Collez l’extrait à l’endroit où vous souhaitez le voir s’afficher
5. Cliquez sur Save (Enregistrer)

⚠️ Important :

• Ne collez l’extrait qu’une seule fois par barre
• Si le même identifiant apparaît plusieurs fois sur la même page, la barre risque de s’afficher dans chaque conteneur correspondant
• Assurez-vous que le conteneur se trouve dans la balise <body>, et non dans <head>

🚀 Étape 7 — Enregistrer et publier

Retournez dans l’éditeur Hoppy Announcement Bar et cliquez sur Save (Enregistrer).

Puis cliquez sur Publish (Publier) pour la mettre en ligne.

⚠️ Important : le fait d’enregistrer ne suffit pas à rendre la barre visible par les clients. Vous devez cliquer sur Publish (Publier).

Une fois publiée, visitez la page où vous avez placé l’extrait pour vérifier que la barre s’affiche à l’endroit prévu 👀

🎯 Quand utiliser le placement personnalisé

Le placement personnalisé est particulièrement utile lorsque :

• Vous souhaitez la barre à l’intérieur d’une section de thème spécifique plutôt qu’en global en haut ou en bas
• La mise en page de votre thème entre en conflit avec le positionnement automatique en haut/en bas
• Vous utilisez plusieurs barres et devez contrôler exactement où chacune se trouve
• Vous souhaitez la barre à l’intérieur d’une section de constructeur de pages, d’une page de destination personnalisée ou d’un modèle de produit spécifique
• Vous avez besoin que la barre apparaisse entre des blocs de contenu existants plutôt qu’au-dessus ou en dessous d’eux

⚠️ Conseils courants

Déplacer ou supprimer la barre

Étant donné que la barre est liée à un conteneur manuel, vous pouvez :

• Déplacer le bloc d’application ou l’extrait Liquid vers une nouvelle position à tout moment
• Supprimer le bloc ou l’extrait pour empêcher la barre de s’afficher sur cette page
• Réutiliser le même extrait sur plusieurs modèles si nécessaire

Combiner avec le ciblage

Même avec un placement personnalisé, vous pouvez toujours utiliser :

• Scheduling (Planification) — Définir des dates de début et de fin
• Geolocation (Géolocalisation) — Afficher uniquement aux visiteurs de certains pays
• Customer Targeting (Ciblage client) — Filtrer par statut de connexion, tags ou dépenses cumulées
• UTM Source Filtering (Filtrage par source UTM) — Afficher uniquement aux visiteurs provenant de certaines sources de trafic
• Time-on-Site Delay (Délai basé sur le temps passé sur le site) — Retarder l’apparition de la barre

💡 Ces options se configurent dans le même onglet Placement. Pour un aperçu complet, consultez la documentation Advanced Targeting.

Placement personnalisé sur la page de panier et le checkout

• Les placements Cart Page (Page de panier) et Cart Drawer (Tiroir de panier) prennent aussi en charge le positionnement Manual (Manuel) si vous souhaitez un contrôle précis dans la zone du panier
• Le placement Checkout Page (Page de checkout) (Shopify Plus uniquement) utilise le système de blocs d’extension de l’interface de checkout au lieu d’un extrait Liquid

🎉 Résultat final

Une fois la configuration réussie :

✅ Votre barre d’annonce apparaît exactement où vous l’avez placée dans votre thème
✅ Elle respecte toutes les règles de ciblage actives (planification, géolocalisation, segments clients, etc.)
✅ Vous pouvez la repositionner ou la supprimer à tout moment sans toucher au contenu ou au design de la barre
✅ Plusieurs barres personnalisées peuvent coexister sur la même page dans des sections différentes
✅ La mise en page de votre boutique reste soignée et intentionnelle ✨

📚 Documentation connexe

• How to Set Up an Announcement Bar — Guide complet pour créer et publier n’importe quel type de barre
• Design & Styling — Personnalisation avancée des couleurs, polices, animations et CSS personnalisé
• Advanced Targeting — Planification, géolocalisation, tags clients, filtrage UTM et règles basées sur le temps passé sur le site
• Announcement Bar Types Explained — Différences entre les barres Simple, Running, Multiple et Email

Bonne mise en place ! 🥂

Mis à jour le : 10/09/2026