How to Add Dynamic, Eye-Catching Scrolling Text to Your Shopify Store
Want to add a dynamic scrolling line of text across your store to grab attention? The Scrolling Announcement Bar makes it easy and is completely free to use. Perfect for showing off promotions, announcements, or quick store updates, this section adds motion and energy to your storefront.
Want to see it in action? View the live demo to preview how it looks in a real store.
Installation via Code Editor
It won't take you long to install, you just need to follow the following steps:
- Go to Online Store > Themes > Edit code
- In the Sections folder, click Add a new section
- Name it sj-scrolling-announcement-bar.liquid and click Done
-
Copy the code from the gist below and paste it into the file
- Click Save
- Go to Customize and add the Scrolling Announcement Bar section to your desired page
Customization Settings
Step 1: Add and Customize Your Text
The announcement bar supports multiple text items, allowing you to display several short messages that loop continuously. Each text item can link to a page such as a product or collection, making it both informative and interactive.
You can choose the scrolling direction (left to right or right to left) and adjust the speed separately for desktop and mobile. To improve readability, you can enable pause on hover.
Customize the font, size, and letter spacing, or apply your own custom font. You can also set a background color or apply a gradient text effect for stronger visual impact.
Step 2: Layout & Individual Styling (Optional)
Control spacing and layout to fit your store perfectly. Add separators between text items, adjust their opacity, and fine-tune gaps and padding for both desktop and mobile. You can also tweak top and bottom spacing to ensure the bar integrates naturally with your layout.
For extra flexibility, each text item can be styled individually. Adjust font size, spacing, colors, gradients, and link each item to a unique page. This works well for rotating promotions or campaign-specific messages.
Keep Visitors Engaged
The Scrolling Announcement Bar is a simple but effective way to add motion and visibility to your Shopify store. Whether you're promoting a sale, sharing updates, or highlighting key information, this section helps your content stand out.
At EZFY Code, we also offer custom development for merchants who need tailored solutions built specifically for their store. If you have a custom idea or feature in mind, feel free to reach out.