Articles on: Announcement Bars & Banners

📍 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 Hoppy Announcement Bar
  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:



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
  1. Paste the snippet where you want it rendered
  2. 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\! 🥂

Updated on: 03/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!