How to Add Scrolling Text to Squarespace
Add scrolling marquee text to your Squarespace website using Code Blocks or Code Injection. Perfect for announcement bars, promotional banners, and attention-grabbing headlines.
Step-by-Step Guide
- 1
Generate your scrolling text code
Open the Scrolling Text Generator on our homepage. Type your message, pick an animation style, customize fonts and colors to match your Squarespace template, and click Copy Code.
- 2
Open your Squarespace page editor
Log in to your Squarespace account and open the page where you want the scrolling text. Click Edit on the page to enter the editor. You will need at least a Business plan to use Code Blocks.
- 3
Add a Code Block to your page
Click an insert point (+) where you want the scrolling text and select Code from the block options. This adds a Code Block that accepts raw HTML and CSS. Make sure the Display Source option is turned off so the code renders as visual output.
- 4
Paste the generated code
Paste the scrolling text code into the Code Block. Squarespace will render the HTML and CSS animation directly on the page. Close the code editor to see the preview.
- 5
Save and publish your changes
Click Save to apply the changes. For a site-wide scrolling banner (like an announcement bar across all pages), go to Settings > Advanced > Code Injection and paste the code into the Header or Footer section instead of using a per-page Code Block.
Frequently Asked Questions
Do I need a specific Squarespace plan to add custom code?
Code Blocks are available on the Squarespace Business plan and higher. If you are on a Personal plan, you can upgrade to Business to unlock Code Blocks and Code Injection. The site-wide Code Injection feature is also available on Business plans and above.
Can I add scrolling text to the Squarespace announcement bar?
Squarespace has a built-in announcement bar, but it does not natively support scrolling animations. You can use Code Injection (Settings > Advanced > Code Injection) to inject the scrolling text code site-wide as a custom announcement bar positioned at the top of every page.
Does the scrolling text work with all Squarespace templates?
Yes. The generated code is standard HTML and CSS that renders inside a Code Block on any Squarespace template, including Squarespace 7.0 and 7.1 templates. The styling is self-contained, so it will not conflict with your template design.
Can I add scrolling text to the Squarespace header or footer?
Yes. Use the Code Injection feature under Settings > Advanced > Code Injection. Paste the scrolling text code into the Header injection area to display it above your site header on every page, or into the Footer area to display it at the bottom.
Ready to Create Scrolling Text for Squarespace?
Use our free generator to design your scrolling text, then follow the steps above to add it to your Squarespace site in minutes.