Want to share updates, promotions, or important messages with every visitor who lands on your store? 📢

An Announcement Bar is one of the easiest ways to grab attention without disrupting the shopping experience. Whether it’s a flash sale, a shipping update, or a newsletter signup prompt, a well-placed bar keeps customers informed from the moment they arrive.

This guide walks you through the full setup — from creating your first bar to making it live on your storefront 🚀

📍 What You’ll Learn

By the end of this guide, you’ll know how to:

• Create a new announcement bar
• Choose the right placement and bar type
• Add your message and call-to-action
• Apply a design that matches your brand
• Set where and when it appears
• Publish it to your store

✅ Before You Begin

Make sure the Hoppy Announcement Bar app embed is enabled in your theme. Without this, your bar won’t appear on the storefront, no matter how perfectly it’s configured.

To enable it:

1. Go to Shopify Admin → Sales Channels → Online Store → Themes
2. Click Edit Theme on your active theme
3. Select App Embeds from the left sidebar
4. Find Announcement Bar/Banner
5. Toggle it ON
6. Click Save

💡 Already enabled? You’re ready to go\!

⚙️ Step 1 — Create a New Announcement

Open the Hoppy Banners app from your Shopify admin.

On the dashboard, click Create New Announcement.

You’ll be taken to the placement selection screen.

📌 Step 2 — Choose a Placement

Placement decides where your announcement bar will appear in your store.

You’ll see six options:

• Storefront Page — Appears on your main storefront (home, products, collections, etc.)
• Email Collection Bar — A bar focused on collecting visitor emails
• Cart Page — Appears on the dedicated cart page
• Cart Drawer — Appears inside the slide-out cart drawer
• Checkout Page — Appears during checkout (Shopify Plus only)
• Custom Position — Place it manually on specific product or collection pages

Select the one that fits your goal. For most merchants, Storefront Page is the best starting point.

Once selected, click Continue.

🎨 Step 3 — Pick a Preset (or Start from Scratch)

Next, you’ll see a collection of visual presets — pre-designed combinations of colors, fonts, and layouts.

You can:

• Choose a preset to jumpstart your design
• Or click Make your Own to build everything manually

Don’t worry — you can change every design detail later. Presets just save time ⏱️

After selecting a preset (or choosing to start fresh), the editor will open automatically.

📝 Step 4 — Add Your Content

You’ll land in the Content tab. This is where you write your message and choose how the bar behaves.

🏷️ Announcement Name

This is for your internal reference only. Customers won’t see it.

Use something recognizable like:

• Summer Sale Banner
• Free Shipping Alert
• Black Friday Header

💡 Good naming helps when you have multiple bars running at once.

📢 Announcement Type

This controls how your message is displayed. There are four types:

Choosing a Type

• Simple is perfect for one clear message — like "Free Shipping on Orders Over $50."
• Running works great for urgency or flash sales. When selected, you’ll see an Animation Speed slider and a checkbox to change the scroll direction.
• Multiple lets you cycle through up to 20 different slides. When selected, a Display Duration slider appears to control how long each slide stays visible.
• Email transforms the bar into a lead-capture tool. When selected, standard CTA options are replaced with a Success Message and Email Placeholder field.

💡 You can always come back and switch types later.

✍️ Title & Subheading

• Title — This is your main message. It supports rich text formatting (bold, italics, links, colors).
• Subheading — A smaller supporting line below the title.

ℹ️ The subheading field is hidden if you select the Running type, since marquee bars typically use one line of text.

🔗 Call to Action (CTA)

Your CTA tells customers what to do next.

Choose a CTA Type:

• No Call to Action — No button or link
• Button — A clickable button with custom text and a link
• Make entire bar clickable — The entire bar becomes clickable
• Coupon — Displays a coupon code with a copy-to-clipboard button
• Trigger App Event — Fires a custom event for use with other apps

If you select Button, Make entire bar clickable, or Trigger App Event, you’ll see fields for the link or button text. If you select Coupon, a Coupon Code field appears along with a checkbox to show a copy icon.

🚪 Close Icon

Enable this if you want customers to be able to dismiss the bar.

When enabled, two extra fields appear:

• Appear again after — How long before the bar reappears for that visitor
• Unit — Hours or days

This is useful if you don’t want to annoy repeat visitors with the same message.

🎭 Banner Icons

Banner Icons allow you to add clickable social or branding icons directly inside the Announcement Bar for better engagement and quick access to external platforms.

This is especially useful for promoting social media profiles, communities, or important external links without adding extra text clutter to the bar.

📌 Maximum Icons Allowed

You can add up to 6 Banner Icons inside a single Announcement Bar setup.

This helps maintain a clean and balanced layout across both desktop and mobile devices.

🖥️ Desktop & Mobile Visibility

Each icon can be configured to appear on:

• Desktop devices
• Mobile devices
• Or both simultaneously

This gives you more flexibility depending on how you want the Announcement Bar to appear across different screen sizes.

🔄 Replace Icon

Icons can be replaced anytime using the built-in Icon Library.

Available Behavior

• Browse available icons from the Icon Library
• Replace existing icons instantly
• Update icons without affecting the rest of the setup

⚠️ Important:

Custom icon uploads are currently not supported. Only icons available inside the Icon Library can be used.

🔗 Call to Action (CTA)

Each Banner Icon can optionally include its own Call to Action behavior.

Available Options

• No call to action
• Add Link

➕ Add Link

When Add Link is selected:

→ A CTA Link field appears

This allows the icon to redirect visitors to external or internal pages.

Example Use Cases

• Social media profiles
• WhatsApp chats
• Discord communities
• Product collections
• Promotional landing pages

⚠️ Important Notes

• Each icon can have its own independent CTA behavior
• Some icons may remain non-clickable while others redirect visitors
• Removing an icon only removes that specific icon and does not affect the remaining icons
• Icon arrangement can impact spacing and visibility on smaller mobile screens

💡 For the best storefront experience, avoid overcrowding the Announcement Bar with too many icons and links simultaneously.

🎨 Step 5 — Choose a Design

Click the Design tab to style your bar.

For a quick setup, focus on these essentials:

• Template — Pick from 20+ pre-made styles or stay with your preset
• Visibility — Choose whether it appears on Desktop and Mobile, Desktop Only, or Mobile Only
• Background — Select a Single Color, Gradient, or Pattern
• Typography — Choose a font and set your title color
• Button — Adjust the button color, text color, and corner radius (if you’re using a button CTA)

💡 For deeper design customization — including animations, custom CSS, advanced button effects, and social icon styling — see the dedicated Design & Styling documentation.

📍 Step 6 — Set Position & Visibility

Click the Placement tab to control where and when your bar appears.

📐 Display Position

This sets the physical location of the bar:

• Top Push — Pushes the page content down
• Top Push (Sticky) — Stays fixed at the top while scrolling
• Top Overlap — Floats over the top of the page
• Top Overlap (Sticky) — Floats and stays fixed while scrolling
• Bottom Overlap (Sticky) — Appears at the bottom of the viewport
• Manual — You place it yourself using a code snippet or app block

ℹ️ If you select Manual, the page targeting dropdown is disabled and a code snippet is provided for you to paste into your theme.

🎯 Page Targeting

Decide which pages the bar appears on:

• Every page
• Home page only
• All products
• Products in specific collections
• Specific products
• All collections
• Specific collections

If you choose a "specific" option, a Select Products or Select Collections button appears so you can hand-pick exactly where it shows.

⏰ Scheduling

Want the bar to go live later or stop automatically? Set a Start Date and End Date.

If left blank, the bar appears immediately and stays live until you manually unpublish it.

💡 Advanced targeting options — including customer tags, geolocation, UTM sources, and time-on-site delays — are available in the same tab. These are covered in detail in the Advanced Targeting documentation.

🚀 Step 7 — Publish Your Bar

Once everything looks good, it’s time to go live.

Click Publish in the top-right corner.

A success banner will appear. If your App Embed is already enabled, you’re all set\! 🎉

If the App Embed is not enabled, the banner will remind you and provide a quick link to turn it on in your theme editor.

⚠️ Important: Saving alone does not make the bar visible to customers. You must click Publish.

🎉 Final Result

Once published successfully:

✅ Your announcement bar appears on the selected pages

✅ Customers see your message immediately upon visiting

✅ Your CTA drives clicks, signups, or sales

✅ The design blends seamlessly with your store branding

✅ You can edit, duplicate, or unpublish anytime from the dashboard

📚 Related Documentation

Want to go further? Check out these dedicated guides:

• Design & Styling — Deep customization of colors, fonts, animations, and custom CSS
• Advanced Targeting — Geolocation, customer tags, UTM filtering, and time-on-site rules
• Translations — Running multilingual announcement bars
• Troubleshooting — What to do if your bar isn’t showing

Happy announcing\! 🥂

Updated on: 03/06/2026