> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 📍 Comment définir une barre d’annonce avec placement personnalisé

> ℹ️ **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  
   * 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 ! 🥂