How to Create a Sliding Announcement Bar?

✅ Step 1: Go to the Hoppy Announcement Bar App

1️⃣ Open your Shopify admin.

• From the left sidebar, click Apps and select Hoppy Announcement Bar.

✅ Step 2: Create the Announcement Bar

2️⃣ In the Content tab, choose the Announcement type**- Running announcement bar.**

3️⃣ Now, scroll down to the Announcement Content section located just below, and fill in the Announcement Content.

• Announcement Name: Enter a name to help you identify this bar (e.g., Spring Promo Bar).

• Display Duration: Use the slider to set how long each message displays (e.g., 5 seconds per slide).

• Run left to right: By default, the sliding bar scrolls right to left. Check this box if you want it to scroll left to right instead.

• Title: Add your main announcement message (e.g., Enjoy 20% Off All Products!).

  

• Call to Action (CTA):
  Choose one of the following from the dropdown:

  • No Call to Action ❌

  • Button 🔘

  • Make Entire Bar Clickable 🖱️

• Link Field: Add the URL where you want customers to be directed. This will activate when they click the button or the entire bar (based on your CTA setting).

• Close Icon Option: Check the box to let customers dismiss the bar by clicking a close (❌) icon.

4️⃣ Set Start & End Date for the announcement bar

✅ Step 3: Customize the Announcement Bar

5️⃣ Navigate to the Design tab to style your bar:

• Template: Choose a design template from the dropdown.

• Visibility: Select where the bar should appear:

  • Desktop & Mobile

  • Desktop Only

  • Mobile Only

• Background & Border:

  • Pick a background color, gradient, or pattern.

  • Customize the border style.

  • Add bar padding

    

    

• Typography:

  • Adjust the font, text color, and size of the title and subheading.

    

• Button Design (only if you chose Button under CTA):

  • Modify button text color, size, background, Button style (from dropdown), and font weight and style.

  • Choose an animation style to make your button stand out.

    

• 💡 Tip: Use the up/down keys to fine-tune sizes in the size box. Click on the color box to pick custom colors.

✅ Step 4: Choose the Placement of the Announcement Bar

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 5: 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 Sliding Announcement Bar is Live & Catching Eyes! 🚀