Hoppy Announcement Bar gives you four distinct ways to display messages on your storefront. Each type behaves differently, supports different content configurations, and is designed for specific use cases.

Choosing the right type early in your setup helps you avoid rework and ensures your announcement behaves exactly the way you expect on the live store.

⚠️ Before You Begin

Announcement type is selected inside the Content tab when creating or editing an announcement.

You can switch types at any time, but keep in mind:

• Some fields will appear or disappear depending on the selected type
• Content items may be trimmed or expanded when switching between certain types
• Design and placement settings remain shared across all types

ℹ️ Announcement type is not the same as placement. Placement controls where the bar appears. Type controls how the bar behaves.

📋 The Four Announcement Types

1️⃣ Simple Announcement

The Simple type displays a single, static message. It is the most commonly used format because it is straightforward and works for almost every use case.

What it does

• Shows one announcement with a title, subheading, and optional call-to-action
• Remains static on the page until the customer navigates away or closes it
• Supports all CTA types: button, full-bar click, coupon, trigger event, or no CTA

Content fields available

• Title — The main message. Supports rich text formatting.
• Subheading — A secondary line below the title.
• Call to action type — Choose how customers interact with the bar.

CTA behavior

ℹ️ When Trigger App Event is selected, an additional Trigger ID field appears. This ID must match the event name configured in the receiving app.

Best used for

• Store-wide sale announcements
• Shipping policy updates
• Limited-time offers
• General promotions

2️⃣ Running Line Announcement

The Running type creates a continuous horizontal scrolling ticker — similar to a news marquee. The title text animates across the bar on a loop.

What it does

• Displays one title message in a smooth, endless scroll
• Direction and speed are fully configurable
• The subheading field is hidden because the format relies on a single scrolling line

Content fields available

• Title — The message that scrolls across the bar. Supports rich text.
• Animation speed — A slider from 1 to 80 controlling how fast the text moves.
• Run left to right — A checkbox that reverses the default scroll direction.

How animation speed works

• Lower values \= slower, more readable scrolling
• Higher values \= faster ticker movement
• The speed is calculated dynamically based on the length of your title text

CTA behavior

Running announcements support button, coupon, trigger, and no CTA. The Make entire bar clickable option wraps the scrolling area in a link.

If a button or coupon is used, it appears statically beside the scrolling text.

Best used for

• Flash sale alerts
• Urgent shipping deadlines
• Repetitive brand slogans
• Time-sensitive reminders

⚠️ Important: Running line bars work best with shorter titles. Very long messages may create uneven scroll pacing on smaller screens.

3️⃣ Multiple Rotating Announcements

The Multiple type lets you stack several announcements into a single bar that rotates through them automatically. Customers see one message at a time, with navigation arrows to browse manually.

What it does

• Cycles through multiple announcement slides
• Each slide has its own title, subheading, and CTA
• Automatically advances based on a configurable display duration
• Includes left/right arrow navigation

Content fields available

• Announcement display duration — A slider from 1 to 10 seconds controlling how long each slide stays visible before auto-rotating.
• Announcement \#1, \#2, \#3... — Each slide is an independent content block with its own title, subheading, and CTA.
• Add new announcement — Adds additional slides.

Slide limits

• Minimum: 2 slides
• Maximum: 20 slides

You can reorder slides using the up/down arrows, and remove slides if you have more than 2\.

CTA behavior

Each slide can have its own independent CTA. One slide might have a button, another might show a coupon, and a third might have no CTA at all.

Supported CTA types per slide: button, full-bar click, coupon, trigger, or none.

Animation effects

The transition between slides is controlled by the Animation setting in the Design tab:

• Slide — Standard horizontal sliding transition
• Fade — Smooth cross-fade between slides
• Cube — 3D cube rotation effect
• Flip — Card-flip style transition

Best used for

• Showcasing multiple promotions at once
• Announcing different product categories
• Rotating shipping, return, and trust messages
• Highlighting several coupons without cluttering the page

4️⃣ Email Collection Banner

The Email type transforms the announcement bar into a lead capture form. It displays an email input field and a submit button, then shows a success state after submission.

What it does

• Displays a title, subheading, and an email input field
• Shows a Success Message after a customer submits their email
• Can include a coupon code as a reward for subscribing

Content fields available

• Title — The main message inviting customers to subscribe.
• Subheading — Supporting text below the title.
• Button text — The label on the submit button. Defaults to Subscribe if left blank.
• Success Message — The confirmation text shown after a successful email submission.
• Email Placeholder — The hint text inside the empty email input field.

CTA behavior

Email collection bars support two CTA modes:

• Button — A standard submit button. The bar collects the email and shows the success state.
• Coupon — Displays a coupon code alongside or instead of the input, with an optional copy button.

The Make entire bar clickable and Trigger App Event options are not available for this type because the bar is built around form submission.

Success state preview

In the app preview, you will see two bar states stacked:

1. The active email collection form
2. The success message bar

On the live storefront, customers only see the success state after submitting their email.

Best used for

• Building newsletter lists
• Offering discount codes in exchange for emails
• Pre-launch waitlist signups
• Promoting VIP or loyalty programs

🔀 How Type Selection Affects Visible Settings

Choosing an announcement type dynamically changes which fields appear in the Content tab. Here is a quick reference:

Fields that appear by type

Content item limits

• Simple, Running, Email — Only the first content item is used. Even if multiple items exist in the data model, only the first one renders.
• Multiple — All content items are used as individual slides.

⚠️ If you switch from Multiple to Simple, extra slides are preserved in the background but will not display. They will reappear if you switch back to Multiple.

🎯 Call-to-Action Types Explained

CTA behavior is mostly consistent across announcement types, with a few type-specific exceptions.

No call to action

The bar is purely informational. No buttons, links, or clickable areas are rendered.

Button

A clickable button appears. You configure:

• Button text — What the button says
• Link — Where the button navigates

Make entire bar clickable

The full announcement area becomes a link. Clicking anywhere on the bar navigates to the configured URL.

ℹ️ If your bar contains nested clickable elements like social icons, those still work independently. The full-bar click does not override them.

Coupon

Displays a styled coupon code box. You configure:

• Coupon Code — The actual discount code
• Show copy button — Adds a one-click copy icon next to the code

Trigger App Event

Instead of navigating to a URL, the button dispatches a browser CustomEvent. You configure:

• Trigger ID — The event name string (for example, my-app:open-modal)

Other apps or custom theme scripts listening for this event name can respond to it.

⚠️ Trigger CTAs are not available on Email collection bars because the bar's primary action is form submission.

🎨 Design Behavior by Type

Most design settings apply universally, but a few behave differently depending on type.

Animation setting (Design tab)

• Simple & Email — Animation controls the entrance effect when the bar first loads.
• Running — Animation speed is controlled inside the Content tab, not the Design tab.
• Multiple — Animation controls the transition effect between slides (slide, fade, cube, flip).

Social icons

Banner icons can be added to all types. You control visibility separately for desktop and mobile.

• Icons appear statically beside the content
• Each icon can link to a URL or remain non-clickable

Close icon

All types support the close icon. When enabled, you can configure:

• Appear again after — How many hours or days until the bar reappears for a returning visitor

If no reappear time is set, the bar stays hidden permanently after being closed.

📱 Mobile Behavior

All four announcement types are fully responsive. However, layout adjustments happen automatically:

• Email collection bars stack vertically on mobile — the input field and button appear on separate lines
• Multiple rotating bars reduce arrow padding and shrink font sizes slightly
• Running line bars maintain scroll speed but compress icon sizes if social icons are enabled
• Simple bars with buttons may center-align text on smaller screens depending on CTA type

You can override mobile appearance using the Custom CSS panel in the Design tab if needed.

💡 Use-Case Examples

Example 1 — Simple bar with coupon

• Type: Simple
• Title: "Summer Sale is Live ☀️"
• Subheading: "Use code SUNNY for 20% off"
• CTA: Coupon
• Coupon code: SUNNY
• Result: A clean, static bar with a copyable discount code.

Example 2 — Running ticker for urgency

• Type: Running
• Title: "Free shipping ends tonight at midnight ⏰"
• Animation speed: 25
• CTA: None
• Result: A continuously scrolling urgency message at the top of the store.

Example 3 — Multiple slides for different collections

• Type: Multiple
• Slide 1: "Up to 50% off Shoes →" with button link to /collections/shoes
• Slide 2: "New Arrivals in Accessories →" with button link to /collections/accessories
• Slide 3: "Free returns on all orders" with no CTA
• Display duration: 4 seconds
• Result: One bar that cycles through three distinct promotions automatically.

Example 4 — Email collection with coupon reward

• Type: Email
• Title: "Join the VIP list"
• Subheading: "Get 15% off your first order"
• Button text: "Get My Code"
• Success Message: "Welcome\! Your code WELCOME15 is ready."
• Email Placeholder: "Enter your email"
• Result: A lead capture bar that rewards subscribers with an instant coupon.

⚠️ Important Notes & Limitations

Type switching

Switching between types does not delete your content. However:

• Switching from Multiple to Simple hides extra slides
• Switching from Running to Simple reveals the subheading field again
• Switching to Email hides Trigger ID fields if they were previously set

Always review your content after changing types.

Running line length

Very long titles in running bars can cause uneven scroll timing, especially on mobile. Test with your actual message length before publishing.

Multiple slide minimum

You cannot publish a Multiple announcement with fewer than 2 slides. If you need only one message, use the Simple type instead.

Email bar success state

The success state only appears after a customer submits an email. The preview inside the app shows both states stacked for reference, but live customers see the form first.

Full-bar click and nested elements

When Make entire bar clickable is enabled, clicking social icons or the copy button still works as expected. The full-bar click ignores those nested interactive elements.

🎉 Final Result

Understanding the four announcement bar types helps you match the right format to your goal:

✅ Simple — Best for single, static promotions

✅ Running — Best for urgency and repetitive ticker-style messages

✅ Multiple — Best for rotating several offers in one placement

✅ Email — Best for collecting leads and growing subscriber lists

Each type supports the same design system, placement rules, scheduling, and targeting logic. The difference is purely in how content is presented and interacted with.

Choosing the correct type upfront ensures your announcement feels native to your storefront and delivers the right message in the right format 🚀

Updated on: 03/06/2026