✅ Step 1: Ensure Your Announcement Bar is Created & Published
1️⃣ Go to Shopify Admin → Apps → Hoppy Announcement bar app.
2️⃣ Check if you have created an announcement bar and ensure it is set to Published.
✅ Step 2: Enable App Embed in Theme Editor
3️⃣ For the announcement bar to appear on your store, you must enable the App Embed feature in the Shopify Theme Editor.
🔹 How to Enable App Embed:
-
Go to Shopify Admin → Online Store → Themes.
-
Click Customize on your active theme.
-
In the left menu, click on App Embeds (⚙️settings icon at the bottom).
-
Find the Announcement bar and toggle it ON.
-
Click Save in the top right corner.
💡 Tip: If the toggle was already ON, try turning it OFF and then back ON to refresh the settings.
✅ Step 3: Using a Custom Theme?
4️⃣ If you are using a custom theme, you will need to add the Announcement bar as a Block or Code. To manually add it:
-
Open your Theme Editor (Online Store → Themes → Customize) and navigate to the Sections or Blocks panel.
-
Look for an option to Add Section or Add Block, select Hoppy Announcement Bar, position it where you want it to appear, and click Save.
-
Once the app block is added, please verify that the announcement ID is entered**.**
✅ Step 4: Check Geolocation Settings
5️⃣ Ensure the geolocation settings are not restricting the bar from appearing in your country. To check:
-
Open the Hoppy Announcement Bar app and navigate to the Placement tab.
-
Scroll down to the Geolocation Targeting settings and ensure your country is included in the list of allowed locations.
✅ Step 5: Check Scheduling Settings
6️⃣ Make sure to check if the announcement bar is scheduled for a future date instead of being live immediately. To Check:
-
Open the Hoppy Announcement Bar app and navigate to the Content tab.
-
Scroll down to locate the Scheduling option. Check the Start Date and End Date settings.
-
If the Start Date is set to a future time, change it to Right Now to display immediately. If the End Date has expired, update it or remove the restriction.
-
Click Save.
✅ Step 6: Check the “Allowed UTM Sources” Section
7️⃣ The Announcement Bar will only show when the visitor comes from a selected source, like Facebook, Instagram, Twitter, Google, or others via a UTM-tagged link.
-
Open the Hoppy Announcement Bar app and click on the "Placement" tab.
-
Scroll to the section titled "Allowed UTM Sources".
-
Based on the checkmarks next to the platforms (e.g., ✅ Facebook, ✅ Instagram) in the 'Allowed UTM Sources' section, when a visitor lands on your store from one of those platforms, the Announcement Bar will appear.
✅ Step 7: Hard Refresh Your Page
8️⃣ If all else looks good, try to hard refresh the page.
-
Windows: Press
Ctrl + Shift + R -
Mac: Press
Cmd + Shift + R
✅ Step 8: Check for Theme Styling Conflicts
9️⃣ Your Shopify theme's custom CSS might be overriding the announcement bar.
To check:
-
Open the Hoppy Announcement Bar app, go to the Design tab, change the background or text color, then save and refresh your store.
-
If the issue persists, contact your theme developer or tech team to resolve CSS conflicts.
✅ Step 9: Still Not Visible? Contact Support!
🔟 If you’ve tried all the above steps and the announcement bar is still not showing, reach out to Support for further assistance.
-
Hoppy Announcement Bar → Help & Support → Contact Support, or you can simply click the message box in the bottom right corner to contact support..
-
Provide screenshots & details for faster help.
By following these steps, your Hoppy Announcement Bar should be up and running in no time! 🚀