You can use Custom Position to place the announcement bar anywhere on your site manually.
✅ Step 1: Open the Hoppy Announcement bar app.
1️⃣ Go to Shopify Admin → Apps → Hoppy Announcement bar app.
2️⃣ In the Placement tab, you will see multiple placement options for your
announcement bar:
Top bar pushes down the rest of the page
Top bar pushes down (always visible while scrolling)
Top bar overlaps the top of the page
Top bar overlaps the top (always visible while scrolling)
Bottom bar overlaps bottom (always visible while scrolling)
Manual Placement – Place the bar anywhere on your online store
✅ Step 2: Placement of the Announcement bar
3️⃣ Choose Manual Placement from the dropdown and click Save to manually place the announcement bar anywhere on your website. This will unlock two options:
🔹 Option 1: Using App Block (Recommended for Beginners)
This method uses the Announcement ID to place the Announcement Bar.
📌 Steps to Add Announcement bar Using App Block:
First, copy the Announcement ID📋 , then click 'Save' to activate the App Block.
Go to Shopify Admin → Online Store → Themes.
Click on Customize to open the Theme Editor.
Navigate to the page and the section where you want to add the announcement bar. Click on Add Section → Scroll to Apps → Select Announcement bar.
Paste your Announcement bar ID in the right-hand settings panel.
🔹 Option 2: Using Custom Liquid (Advanced)
This method requires adding a code snippet to your theme using Custom Liquid.
📌 Steps to Add Announcement Bar Using Custom Liquid:
First, copy the Code snippet, then click 'Save' to activate the App Block.
Go to Shopify Admin → Online Store → Themes.
Click on Customize to open the Theme Editor.
Navigate to the page and section where you want to add the announcement bar. Click on Add Section → Search for Custom Liquid → Click on it.
Paste your Announcement Bar Code Snippet into the Custom Liquid editor.
✅ Step 3: Save and Test Your Placement
4️⃣ Click Save in Shopify's Theme Editor.
5️⃣ Visit your store and check if the badges appear in the correct position.
6️⃣ If the announcement bar is not visible, try:
Clearing your browser cache.
Checking if Custom Positioning is enabled in the Hoppy Announcement bar app.
Refreshing your store page.
🔥 Great job! Your Announcement bar is now positioned just the way you want! 🚀