Skip to main content

How to set up the announcement bar?

Follow these easy steps to set up an eye-catching announcement bar on your Shopify store! πŸŽ‰

Rashmi Verma avatar
Written by Rashmi Verma
Updated over a week ago

βœ… Step 1: Open the Hoppy Announcement App

1️⃣ Go to Shopify Admin β†’ Apps β†’ Hoppy Announcement Bar.

2️⃣ In the Content tab, choose the Announcement type you want to display (e.g., Simple announcement, Running line announcement, Multiple rotating announcements).​

3️⃣ Set Start & End Date ⏳ for the announcement bar

βœ… Step 2: Customize Your Announcement Bar

4️⃣ Enhance Your Announcement Bar

πŸ“’ Enter Your Message

  • Add text for promotions, offers, or updates.

🎨 Customize the Look & Feel

  • Change font size, colors, and styles to match your brand.

πŸ”— Add a Call-to-Action (CTA) Button (Optional)

  • Enter a link (e.g., product page, offer page) to direct customers.

5️⃣ Now, go to the Design tab to customize the announcement bar.

  • Select a color template, change the background, adjust the font, and modify button colors.

βœ… Step 3: Navigate to the Placement tab

6️⃣ Choose where you want the announcement bar to be displayed. Here, you will see three options at the top:

  • Time-on-Site Targeting ⏳ – Choose from the dropdown to either "Always Show" or "Show After a While" when a visitor arrives on your website.

  • Select a Display Position πŸ“ – Choose where to display the announcement bar on your website from the dropdown.

  • Select Pages to Display the Bar πŸ“„ – Choose which pages should show the announcement bar using the dropdown.

βœ… Step 4: Publish and Verify the Announcement Bar.

7️⃣ Click Save & Publish πŸ’Ύ to activate the announcement bar.

8️⃣ Refresh your store to ensure it displays correctly.

9️⃣ If necessary, return to the Hoppy Announcement Bar app and make adjustments.

πŸŽ‰ That’s it! Your announcement bar is now live! πŸš€

Did this answer your question?