How to Make Carousel Images Clickable in Squarespace 7.1 Using Section ID and ALT Attributes
Engaging high-conversion experiences are a must in modern web design. In Squarespace version 7.1, carousels and image galleries come packed with a big visual punch, but with built-in links to the individual images, the ability to add your custom URL isn’t built in – without the use of the developer mode or complex workarounds that is.
This guide is going to show you a clean, scalable, and developer-friendly way of creating each of your Home Page Slideshow images ‘clickable’ from the image using the image’s ALT attribute and the section’s data-section-id attribute. This approach does not use third-party plugins and plays great with Squarespace’s dynamic content rendering.
Benefits of This Approach
Custom targeting by section: Will be limited to the section of a carousel that was targeted.
No plugin prerequisite: Just pure and native.
SEO-friendly: Delivers clean semantic elements.
Lazy-loaded content compatible: Ensure dynamic blocks will work consistently.
Low maintenance: Once set up, it just works.
Prerequisites
A Squarespace 7.1 site with a list-style carousel or gallery block.
Limited access to Page Settings and Code Block.
The alt text for each image should be the desired URL.
The data-section-id of the target section.Step-by-Step Implementation
Step 1: Identify the Section ID
Open your live page.
Right-click the section containing your carousel.
Click Inspect and look for a tag like
<section data-section-id="6831498f58ae4c4cd1bc3d03">
Copy the exact value of data-section-id.
Step 2: Update Image ALT Attributes
Ensure each image in the carousel has the following structure:
<img
class="user-items-list-carousel__media"
alt="https://your-target-link.com"
src="your-image.jpg"
/>
Note: Only https:// or http:// URLs will be activated. Empty or malformed URLs will be ignored.
Step 3: Add JavaScript (Targeting the Section)
Insert the following script into the page’s Footer Code Injection or a Code Block:
<script>
document.addEventListener("DOMContentLoaded", function () {
const section = document.querySelector('section[data-section-id="6831498f58ae4c4cd1bc3d03"]');
if (!section) return;
const images = section.querySelectorAll(".user-items-list-carousel__media");
images.forEach((img) => {
const altLink = img.getAttribute("alt");
if (
altLink &&
altLink.startsWith("http") &&
!img.closest("a")
) {
const anchor = document.createElement("a");
anchor.href = altLink;
anchor.target = "_self"; // Use "_blank" to open in a new tab
anchor.style.display = "inline-block";
anchor.style.width = "100%";
anchor.style.height = "100%";
img.parentNode.insertBefore(anchor, img);
anchor.appendChild(img);
img.style.cursor = "pointer";
}
});
});
</script>
Step 4: Enhance UX with Hover Styling (Optional)
Add a subtle visual cue to indicate the image is clickable:
<style>
section[data-section-id="6831498f58ae4c4cd1bc3d03"] .user-items-list-carousel__media {
cursor: pointer;
transition: transform 0.3s ease;
}
section[data-section-id="6831498f58ae4c4cd1bc3d03"] .user-items-list-carousel__media:hover {
transform: scale(1.03);
}
</style>
Before & After
Before:
<img class="user-items-list-carousel__media" alt="https://example.com">
After (automatically updated by script):
<a href="https://example.com">
<img class="user-items-list-carousel__media" alt="https://example.com">
</a>
Now, the image behaves as a fully functional clickable element without altering your existing Squarespace structure.
Expert Tips
Use a specific section targeting to have no global overrides on all carousels.
Store image links in data-link attributes for more semantic markup, where alt is required for accessibility.
Pair with Google Analytics event tracking for a more in-depth analysis of how your carousel slides perform.
Here's the script; it's running after DOMContentLoaded to work with Squarespace's lazy loading engine.
Conclusion
This simple solution makes it possible to turn your Squarespace carousel into an engaging visual navigation system, without using any plugins, engaging developer mode, and without sacrificing on performance or accessibility.
Generate clean, maintainable, and scalable user behavior with alt attributes and section-specific targeting in a few lines of code.
FAQ: Making Carousel Images Clickable in Squarespace 7.1
1. How can I make my Squarespace carousel images clickable without developer mode or using plug-ins?
Yes. This method takes advantage of native Squarespace features such as ALT attributes and section IDs along with a bit of JavaScript. It doesn't require developer mode or any third-party plugins.
2. Why is the link URL in the ALT attribute?
The ALT attribute is a placeholder for the target link. A script picks up this value and wraps the image in a clickable tag so you can request implementation on your website and have a pretty lightweight and SEO friendly image slideshow.
3. Will this hurt my site’s SEO, or is my site still accessible?
No. Assuming it’s scoped responsibly, this approach is non-destructive and aids SEO since image tags remain semantically relevant. To get the best match, you can keep the link in a data-link attribute and have the descriptive ALT value out of the way.
4. Does this method work with Squarespace’s lazy loading?
Yes. This is run against DOMContentLoaded, so it works with Squarespace 7.1’s lazy-loaded content and dynamic rendering.
5. How can I find my section's data-section-id?
After deploying, right click on your live site, click Inspect, and search for the containing the data-section-id value. Just copied the ID like I fetched it.
6. Can you do it so that the links open in a new tab, not the same page?
Absolutely. In JavaScript, change anchor.target = "_self"; to "_blank" to open links in a new browser tab.
