Set Custom Sections IDs in Squarespace with Code
Intro
Targeting specific sections in Squarespace usually requires inspecting page elements and copying long data-section-ids. While this works, it’s not ideal for anchor linking, or designing templates. Until Squarespace offers a better solution, here’s a simple JavaScript method to create your own custom section ids in your Squarespace site.
Prerequisites
Squarespace Version: 7.1
Subscription Plan: Business (or above)
Stack: Basic Javascript, HTML, copying and pasting skills.
Blocks & Features Used: Code Block, Code Injection.
Accessing the Code Injection Panel
Skip this section if you know how to access the Code Injection.
Globally (The Entire Site)
For a quick walkthrough, here are the essential steps to get you to the right section:
Go to Your Squarespace Dashboard
Select 'Pages'
Navigate to Website Tools: Scroll down through the menu options until you find ‘Website Tools’.
Open Code Injection: Click on ‘Code Injection’ to open the panel where you can add your custom code.
For a comprehensive guide on navigating Squarespace settings, I recommend checking out the detailed instructions on the Squarespace Help page.
Step 1: Add Custom JavaScript for Section IDs
Access the global Code Injection panel in Squarespace.
Insert the provided JavaScript snippet into the Footer section.
This script assigns a custom ID to any section using its data-section-id.
You will only need to add this in once.
<!-- laz-i.com Custom Id -->
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('section').forEach(function(section) {
// Find the div with a custom-section-id attribute within the section
var divWithCustomId = section.querySelector('div[custom-section-id]');
if (divWithCustomId && divWithCustomId.getAttribute('custom-section-id')) {
// Set the section's id to match the div's custom-section-id attribute value
section.id = divWithCustomId.getAttribute('custom-section-id');
// Handles overlapping code block
var feBlock = divWithCustomId.closest('.fe-block');
if (feBlock) {
feBlock.style.pointerEvents = 'none';
}
}
});
});
</script>How this script works
This snippet scans each section for a <div> element that contains a custom-section-id attribute (that we will get the instructions for in the next step). If the attribute is found, the script assigns its value to the section's ID, effectively customizing the section's identifier to be more intuitive and meaningful.
Additionally, the script addresses a common issue where code blocks might overlap other elements by setting the pointer-events style property to 'none' on the closest .fe-block element. This adjustment ensures that all underlying elements remain accessible.
Step 2: Setting Up a Custom ID with a Code Block
When you’re ready to add a custom ID to any section, you can proceed to:
Select the Section: Navigate to the section on your Squarespace site where you want to add a custom ID.
Insert a Code Block: I prefer to place the code block on the top left corner so I can remember where it is to make changes.
Paste the Code
Customize the ID: Replace 'yourCustomId' with a unique identifier of your choice that reflects the content or purpose of the section.
<div custom-section-id="yourCustomId"></div>Reuse this code snippet as much as you want for any section. Make sure to give unique ids per section.
If you’ve done this correctly, you’ll see the custom-section-id value is now the current section’s id! Easy right!?
Practical Uses for Custom Section IDs in Squarespace
Now that you have custom section ids set, it’s time to target them! Here are a few ways section ids can improve your website design and user experience.
Enhanced Anchor Linking
By setting custom section IDs, you can create more intuitive and memorable anchor links. This is particularly useful for navigation within a long webpage, allowing users to jump to relevant sections smoothly. For a deeper dive into optimizing your anchor links in Squarespace, check out my detailed guide on getting the position right when anchor linking.
Template Consistency
For designers who frequently create Squarespace templates, using custom section IDs can ensure consistency across different projects. Unlike `data-section-id` attributes, which change when you duplicate a site, custom IDs remain stable, making your templates more reliable and easier to manage.
Streamlined Styling
With custom section IDs, you can apply specific CSS styles more efficiently. This is especially useful when you want to maintain a consistent look and feel across multiple pages or sites. By defining a unique ID, you ensure that your styling rules are applied precisely where needed, without unexpected changes if the structure of the document alters.
Improved Accessibility
Custom IDs can enhance site accessibility by providing clearer landmarks within the page structure. These IDs can be used to label sections meaningfully, aiding navigation aids like screen readers to better interpret the page layout for users with visual impairments.
Simplified JavaScript Interactions
Developers can leverage custom section IDs to simplify document traversal and manipulation in JavaScript. This allows for more straightforward implementations of dynamic content and interactions, such as loading content on demand when a user accesses a particular section.
Limitations with sections where you can’t add a code block.
Image sections, such as full-screen galleries, and list sections present a unique challenge in Squarespace: they do not support the insertion of code blocks directly. To work around this, consider creating a section where you can utilize blocks from the blocks panel. This method allows you to retain visual continuity while enabling the inclusion of custom code necessary for enhanced functionality or unique styling.
Conclusion
So, we've explored a way to set custom IDs for sections in Squarespace with a little bit of coding. This approach not only simplifies the process of targeting specific sections for styling and scripting but also enhances site management, navigation, and template consistency. For now, this will be my go-to approach, and I hope it helps and makes it easier for other Squarespace designers out there!
If you are looking to give custom classes, I’ve created a similar approach here.
