Add a Scroll Indicator in Squarespace (with Simple CSS)

Ever scroll through a website and notice a little animated arrow nudging you to keep going? That’s a scroll indicator — a small but effective design cue that improves engagement and makes your Squarespace site feel polished and user-friendly.

Only about 1 in 5 visitors scroll all the way down a webpage. That means if your call-to-action, portfolio links, or testimonials live “below the fold,” many people might never see them.
A scroll indicator helps solve that problem — gently guiding visitors to explore more of your content.

Why Use a Scroll Indicator?

Adding a scroll indicator is more than just a fun visual touch — it’s a strategic UX tool. Here’s why it works:

Encourages exploration: Visitors instantly understand there’s more content below.
Improves engagement: Keeps users scrolling through your page (great for SEO!).
Adds visual balance: A simple animated arrow or icon adds motion and polish.
Works anywhere: Use it on landing pages, hero banners, or long-form sales pages.

Step 1: Open Your CSS Panel

In your Squarespace dashboard, go to:
Design → Custom CSS

This is where you’ll paste your scroll indicator code.

Step 2: Paste This CSS Code

Copy and paste the following snippet into your Custom CSS panel:

SECTION-ID::before {
  content: '';
  animation: bounce 2s ease infinite;
  bottom: 2rem;
  border: solid;
  border-width: 0 3px 3px 0;
  padding: 12px;
  display: inline-block;
  left: 50%;
  transform: rotate(45deg) translateX(-72.5%) translateY(0%);
  position: absolute;
  z-index: 1;
}
@keyframes bounce {
50% {
  transform: rotate(45deg) translateX(-50%) translateY(30%);
}
}

Step 3: Replace the Section ID

This part is important — replace SECTION-ID with the unique ID of the section where you want the indicator to appear.

To find it:

1. Use the Squarespace ID Finder Chrome extension.

2. Hover over your desired section (like your hero image or intro banner).

3. Copy the unique section ID (e.g. #section-yui_3_17_2_1_1728657342345_1234).

4. Replace SECTION-ID in the code above with your actual section ID.

Step 4: Review Your Site

Save your CSS changes and preview your Squarespace site.
You should see a small bouncing arrow appear at the bottom of your chosen section, encouraging users to scroll down.

If you don’t see it, double-check:

• You replaced the correct section ID.

• You pasted the full CSS (including the @keyframes section).

Step 5: Customize the Animation

Make it fit your brand and style!
You can easily tweak these CSS properties:

• Animation Speed: Change 2s to make it faster or slower.

• Arrow Size: Adjust padding: 12px; to make the arrow bigger or smaller.

• Position: Change bottom: 2rem; to move it up or down.

• Color: Add border-color: #000; (or any hex code) to match your site’s color palette.

You can even swap the arrow for a custom icon using an SVG background image if you want to get fancy.

Bonus Tip: Add Scroll Indicator Only on Hero Section

Want this only on your homepage banner? Easy — just use that section’s ID and it’ll appear there only, keeping the rest of your site clean and minimal.

Wrapping Up

A scroll indicator is one of those small, thoughtful touches that makes a big difference in user experience. It subtly guides visitors, improves engagement, and gives your Squarespace site a more modern, dynamic feel.

With just a few lines of CSS, you can create a professional scroll cue that fits your brand perfectly — no plugins or advanced coding required.

Your Designer

I'm Ankush, a Squarespace web designer and founder of webgoyat. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at info@webgoyat.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.