How to add a rotating announcement bar to your website
Add a Rotating Announcement Bar to your next web design project, an essential feature for clients wanting to share their promotions, sales, or new products. With the SquareKicker Extension, you can bring your announcement bar to life. Cycle through multiple messages and animate the transitions, all without touching a line of code.
Here's how to set it up.
Step 1: Set Up Your Messages in Squarespace
Before opening SquareKicker, head into your Squarespace backend and navigate to your announcement bar. The quickest way to find it is to press the forward slash (/) key and search for "announcement bar."
Type your messages into the text box — each new message should start on a new line. If a message wraps across multiple lines in the editor, don't worry. It will still display as a single message on your site.
Quick tip: If you update your messages after activating the SquareKicker tool, refresh your browser to see the changes take effect.
Step 2: Open the Rotating Announcement Bar Tool
Open the SquareKicker Extension, navigate to Site Tools in the top-level menu, and select the Advanced tab. You'll find the Rotating Announcement Bar tool there.
Once you activate a transition style, it will highlight yellow so you know it's on.
Step 3: Choose Your Transition Style
There are four animation modes to choose from:
Fade Messages fade in and out. Adjust the speed to control how quickly messages cycle, and the transition delay to set how long each message stays visible before changing. Subtle or dramatic — it's up to you.
Slide Text moves vertically in and out of the announcement bar. You can set the direction (up or down), speed, and transition delay. Great for catching attention.
Scroll Creates a ticker tape effect, with text moving horizontally across the full width of the screen. Because multiple messages are visible at once, this mode works especially well for longer messages.
Typewriter The fan favorite. Typewriter mode gives your site a fun, nostalgic feel. You get additional settings with this mode:
Cursor style — choose from pipe, underscore, block, or none
Irregular Typing — adds variable-interval typing for a more authentic typewriter feel
Backspace Animation — types messages out, then deletes them before the next one appears
Toggle off Irregular Typing and Backspace Animation for a cleaner, more minimal version of the effect, or leave them both on for the full experience.
Step 4: Style Your Announcement Bar
Want to go further? Head to the Design tab in the SquareKicker Extension to customize the look of your announcement bar. You can adjust the background, border, font, layout, spacing, and close icon to match your brand.
An announcement bar is one of those small details that makes a big impression. Whether you're promoting a sale, sharing news, or rotating through key messages, this tool helps you do it with style.
Ready to try it for yourself? Start your 14-day free trial at squarekicker.com — no credit card required. And if you want to go deeper on customizing the look of your announcement bar, check out the full tutorial here.
