How to add an ID to a section in Squarespace

Once Squarespace introduced section IDs, it became much easier to apply custom tweaks. Now you can target sections using real IDs in CSS and JavaScript—instead of relying on cryptic [data-section] attributes.

You can even reuse the same code across multiple sections or pages, which makes simple templating possible.

When is this useful?

There are plenty of use cases, but here are the most common:

• One-page websites — link navigation directly to sections (e.g. #about-us, #pricing) without needing a code block workaround
• CSS & JavaScript plugins — tabs, lightboxes, floating action buttons, etc.
• Reusable layouts — apply the same styles or scripts to multiple sections
• Scroll-based effects — trigger animations or interactions for specific sections

How to set an ID in Squarespace

1. Edit your page
2. Click Edit Section
3. Open the Design tab
4. Scroll down to Anchor Link
5. Enter your ID

Note:

• The ID cannot start with a number
• Use simple, readable names like about-us or pricing

How to use the ID

Once set, you can reference the ID in different ways:

CSS / JavaScript

#custom-id {
/* your styles */
}

Links

• On the same page: #custom-id
• From another page: yoursite.com#custom-id
  (This will scroll to the section automatically.)

Using IDs like classes (advanced)

You can use the CSS “contains” selector to target multiple IDs with a shared pattern:

[id*="custom-id"] {
    /* your styles */
}

ℹ️ This selector targets any element whose ID includes custom-id, such as:
#custom-id-hero, #hero-custom-id, #custom-id-1, etc.

Example

Let’s say you want to style multiple sections with similar behavior:

• aligned-buttons-top
• aligned-buttons-bottom

You can target both with:

[id*="aligned-buttons"] {
    /* shared styles */
}

This approach is a bit hacky, but it lets you reuse styles across multiple sections—even on the same page.