> ## 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).

# 📍 How to Set an Announcement Bar for Custom Placement

Want your announcement bar to appear in a specific spot that automatic positioning doesn’t cover? 🎯

**Custom placement** gives you full control over exactly where your bar shows up — whether that’s inside a specific section of your theme, below your navigation, inside a product description area, or anywhere else you can add a code snippet or app block.

This guide walks you through setting up an announcement bar with manual placement so it renders precisely where you want it ✨

---

# **✅ Before You Begin**

Make sure the **Hoppy Announcement Bar** app embed is enabled in your theme. Even with custom placement, the embed loads the required scripts and styles.

**To enable it:**

1. Go to **Shopify Admin → Sales Channels → Online Store → Themes**  
2. Click **Edit Theme** on your active theme  
3. Select **App Embeds** from the left sidebar  
4. Find **Announcement Bar/Banner**  
5. Toggle it **ON**  
6. Click **Save**

💡 *Already enabled? You’re ready to go\!*

---

# **⚙️ Step 1 — Create a New Announcement**

Open the **Hoppy Announcement Bar** app from your Shopify admin.

On the dashboard, click **Create New Announcement**.

You’ll be taken to the placement selection screen.

---

# **📌 Step 2 — Select Custom Position**

From the placement options, choose **Custom Position**.

This tells the app that you — not the automatic injector — will decide exactly where the bar appears on your storefront.

Once selected, click **Continue**.

---

# **🎨 Step 3 — Design Your Bar**

Build your announcement bar however you like:

* Add your **title**, **subheading**, and **CTA**  
* Pick an **announcement type** (Simple, Running, Multiple, or Email)  
* Style it in the **Design** tab

💡 *For detailed design guidance — including templates, colors, animations, and custom CSS — see the dedicated **Design & Styling** documentation.*

---

# **📍 Step 4 — Set the Display Position to Manual**

Click the **Placement** tab.

In the **Display Position** dropdown, select **Manual**.

When you do this:

* The **Page Targeting** dropdown is automatically disabled and set to **Custom**  
* The bar will no longer inject itself automatically into the page  
* Instead, it will wait for you to place it using a code snippet or app block

This is exactly what makes custom placement work 🛠️

---

# **📋 Step 5 — Copy Your Placement Snippet**

Once the bar is saved, the Placement tab shows a copyable code snippet:

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

Each announcement has a unique ID. The snippet tells the app exactly which bar to render inside that container.

Click the copy button to save it to your clipboard 📋

---

# **🧩 Step 6 — Add the Snippet to Your Theme**

You have two ways to place the snippet:

## **Option A — Using an App Block (Recommended)**

This is the easiest method and works with Online Store 2.0 themes.

1. Go to **Shopify Admin → Sales Channels → Online Store → Themes**  
2. Click **Edit Theme** on your active theme  
3. Navigate to the page or section where you want the bar  
4. Click **Add Section** or **Add Block**  
5. Go to the **Apps** tab  
6. Select **Hoppy Announcement Bar**  
7. Paste your **Announcement ID** into the block settings  
8. Drag the block to your desired position  
9. Click **Save**

## **Option B — Using a Custom Liquid Snippet**

Use this if you want to place the bar inside a specific Liquid file or a non-OS 2.0 theme.

1. Go to **Shopify Admin → Sales Channels → Online Store → Themes**  
2. Click the **...** menu on your active theme → **Edit Code**  
3. Open the Liquid file where you want the bar to appear  
   * Common examples: `theme.liquid`, `product.liquid`, `header.liquid`  
4. Paste the snippet where you want it rendered  
5. Click **Save**

⚠️ **Important:**

* Only paste the snippet **once** per bar  
* If the same ID appears multiple times on the same page, the bar may render in every matching container  
* Make sure the container is inside the `<body>` tag, not inside `<head>`

---

# **🚀 Step 7 — Save and Publish**

Return to the Hoppy Announcement Bar editor and click **Save**.

Then click **Publish** to make it live.

⚠️ **Important:** Saving alone does not make the bar visible to customers. You must click **Publish**.

Once published, visit the page where you placed the snippet to confirm the bar appears in the correct spot 👀

---

# **🎯 When to Use Custom Placement**

Custom placement is especially useful when:

* You want the bar inside a **specific theme section** rather than globally at the top or bottom  
* Your theme layout conflicts with automatic top/bottom positioning  
* You’re running **multiple bars** and need to control exactly where each one sits  
* You want the bar **inside a page builder section**, a custom landing page, or a specific product template  
* You need the bar to appear **between existing content blocks** rather than above or below them

---

# **⚠️ Common Tips**

## **Moving or Removing the Bar**

Because the bar is tied to a manual container, you can:

* Move the app block or Liquid snippet to a new position anytime  
* Remove the block or snippet to stop the bar from rendering on that page  
* Reuse the same snippet on multiple templates if needed

## **Combining with Targeting**

Even with custom placement, you can still use:

* **Scheduling** — Set start and end dates  
* **Geolocation** — Show only to visitors from specific countries  
* **Customer Targeting** — Filter by login status, tags, or lifetime spend  
* **UTM Source Filtering** — Show only to visitors from specific traffic sources  
* **Time-on-Site Delay** — Delay the bar’s appearance

💡 *These options are configured in the same **Placement** tab. For a full breakdown, see the **Advanced Targeting** documentation.*

## **Checkout and Cart Custom Placement**

* **Cart Page** and **Cart Drawer** placements also support **Manual** positioning if you want precise control inside the cart area  
* **Checkout Page** placement *(Shopify Plus only)* uses the checkout UI extension block system instead of a Liquid snippet

---

# **🎉 Final Result**

Once configured successfully:

✅ Your announcement bar appears exactly where you placed it in your theme  
✅ It respects all active targeting rules (schedule, geolocation, customer segments, etc.)  
✅ You can reposition or remove it anytime without touching the bar’s content or design  
✅ Multiple custom bars can coexist on the same page in different sections  
✅ Your storefront layout stays clean and intentional ✨

---

# **📚 Related Documentation**

* **How to Set Up an Announcement Bar** — Full walkthrough of creating and publishing any bar type  
* **Design & Styling** — Deep customization of colors, fonts, animations, and custom CSS  
* **Advanced Targeting** — Scheduling, geolocation, customer tags, UTM filtering, and time-on-site rules  
* **Announcement Bar Types Explained** — Differences between Simple, Running, Multiple, and Email bars

Happy placing\! 🥂