Announcement Ticker Bar

What This Sidekick Query Does

Create an announcement ticker bar section for my Shopify theme that displays a horizontally scrolling marquee of messages at the top of the page above the header. The section should support up to [MAX_MESSAGES] announcement messages configured via repeatable text blocks, each with a message field and an optional link URL. The ticker should scroll continuously from right to left at a speed of [SCROLL_SPEED] pixels per second using CSS animation. Include settings for bar background color [BAR_BG_COLOR], text color [BAR_TEXT_COLOR], font size [FONT_SIZE], font weight [FONT_WEIGHT], bar height [BAR_HEIGHT] pixels, and a separator character [SEPARATOR_CHAR] displayed between each message. Add a pause-on-hover option that stops the animation when the customer hovers over the ticker. Include a toggle for [SCROLL_DIRECTION] to allow scrolling left-to-right or right-to-left. On mobile below [MOBILE_BREAKPOINT] pixels, optionally switch to a static mode that cycles through messages one at a time with a fade transition every [FADE_INTERVAL] seconds. Add an optional close button on the right side that hides the ticker for the current session using sessionStorage. The ticker should be accessible with aria-live set to polite and role set to marquee. Provide the complete Liquid section file with schema, CSS keyframes, and JavaScript.

Expected Output

Tips to Improve Results