> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # đŸ“ĸ Announcement Bar Types Explained 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** | CTA Type | Behavior | | ----- | ----- | | **No call to action** | Message only, no clickable elements. | | **Button** | A standalone button linking to any URL. | | **Make entire bar clickable** | The whole bar becomes a link. Clicking anywhere navigates to the configured URL. | | **Coupon** | Displays a coupon code with an optional copy-to-clipboard button. | | **Trigger App Event** | Dispatches a custom event that other apps can listen to. Useful for opening modals or triggering workflows. | ℹī¸ 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** | Field | Simple | Running | Multiple | Email | | ----- | ----- | ----- | ----- | ----- | | Title | ✅ | ✅ | ✅ | ✅ | | Subheading | ✅ | ❌ | ✅ | ✅ | | Animation speed slider | ❌ | ✅ | ❌ | ❌ | | Display duration slider | ❌ | ❌ | ✅ | ❌ | | Run left to right | ❌ | ✅ | ❌ | ❌ | | Add/remove slides | ❌ | ❌ | ✅ | ❌ | | Button text | ✅ | ✅ | ✅ | ✅ | | Success Message | ❌ | ❌ | ❌ | ✅ | | Email Placeholder | ❌ | ❌ | ❌ | ✅ | | Trigger ID | ✅ | ✅ | ✅ | ❌ | | Coupon code | ✅ | ✅ | ✅ | ✅ | | Copy button toggle | ✅ | ✅ | ✅ | ✅ | ### **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 🚀