Generate Scrolling Announcement Banner

Create a scrolling marquee announcement banner with multiple messages, adjustable speed, pause on hover, and dismissable option.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create a scrolling announcement banner block:

Features:

  Horizontal scrolling/marquee text
  Multiple messages that rotate
  Pause on hover
  Dismissable (close button, remembers with cookie)
  Link option for each message


Settings:

  Messages (up to 5, each with text and optional link)
  Scroll speed (slow/medium/fast)
  Scroll direction (left/right)
  Background color
  Text color
  Font size
  Show close button toggle
  Separator between messages (dot/pipe/star/custom)


Requirements:

  Smooth infinite scroll animation (CSS-based)
  Works above or below header
  Mobile responsive (smaller font)
  Accessible (pause animation for reduced-motion preference)
  Lightweight (no heavy JS libraries)


Generate the Liquid, CSS, and JavaScript for this as a custom section I can paste into my own theme.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/scrolling-announcement.liquid), paste the generated code in, and save. Then open the theme editor, open the header/announcement section group, and use “Add section” to place it above the header.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions