You can use Custom Position to place the Email Collection bar anywhere on your site manually.
✅ Step 1: Open the Hoppy Email Collection bar app.
1️⃣ Go to Shopify Admin → Apps → Hoppy Email Collection bar app.
2️⃣ In the Placement tab, you will see multiple placement options for your
Email Collection 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 Email Collection Bar.
3️⃣ Choose Manual Placement from the dropdown to manually place the Email collection bar anywhere on your website. This will unlock two options:
🔹 Option 1: Using App Block (Recommended for Beginners)
This method uses the Collection ID to place the Email Collection Bar.
📌 Steps to Add Email Collection bar Using App Block:
First, copy the Collection 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 Email Collection bar. Click on Add Section → Scroll to Apps → Select Email Collection bar.
Paste your Email Collection 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 Email Collection 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 Email Collection bar. Click on Add Section → Search for Custom Liquid → Click on it.
Paste your Email Collection 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 Email Collection bar is not visible, try:
Clearing your browser cache.
Checking if Custom Positioning is enabled in the Hoppy Email Collection bar app.
Refreshing your store page.