Add a scrolling announcement bar to Shopify (no apps)

Shopify scrolling announcement bar, no apps, copy paste code
Reading Time

A Shopify scrolling announcement bar is a section with a few short messages that loop across the header. You paste it into the theme, then add it in Customize. No app. Works on Dawn and any OS 2.0 theme. Last tested in 2026.

I built it this way because those apps usually inject extra scripts and charge you forever. This one is copy/paste. Last tested on Dawn in 2026.

Want to see it first? Here's a live demo.

Works on Dawn, Sense, Craft, Spotlight, Taste, Refresh and most OS 2.0 themes. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.

This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.

Looking to install this on a premium or custom theme? Contact us.

How to add it

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, click the 3 dots > Edit code.
  3. Open the sections folder and click Add a new section. Name it exactly ezfy-scrolling-announcement-bar. The file name and the section name have to match, otherwise Shopify won't load it.
  4. Paste this code, then save. This is the whole section, schema included:
  5. Click Save.
  6. Click the 3 dots > Customize.
  7. Click Add section and look for SJ Text Scroller. Add it to the template you want.
  8. Add your messages, set the speed, then save.
  9. Save the theme.

If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.

How to customize it

Messages. Add as many short lines as you want. Each one can link to a product, a collection, or any page. Pick left to right or right to left, and set the speed separately for desktop and mobile. Pause on hover helps people actually read it.

Fonts, size, letter spacing and background color are in the section settings. There's a gradient option if you want the text to stand out more.

Layout. Add separators between items, tweak the gap, and set top and bottom padding so it sits cleanly under your header. Each message can have its own size and color if you're rotating different promos.

If the bar doesn't show up

Check the section file name. It has to be ezfy-scrolling-announcement-bar.

In Customize, look for SJ Text Scroller. That's the name in the schema.

Hard refresh the storefront. Theme editor save is required before the live page updates.

If you get stuck, tell me which theme you're on. That usually solves it.

Back to blog

Leave a comment