How to connect Squarespace block Lightboxes
Are you tired of the limitations posed by traditional Squarespace lightbox galleries? Picture this: you meticulously design each page of your website using individual image blocks, carefully crafting the layout to showcase your work in the best possible light. But there's a catch – once your visitors click on an image to open the lightbox, there's no built-in navigation to seamlessly transition between images. Each block stands alone, leaving your visitors to navigate back and forth, disrupting their browsing experience.
That is when Lightbox Studio come to rescue, we have built-in option Connect Block Lightbox that can help you achieve exactly that, there are 3 options available: disabled, section and page. Let’s dive in
Available options
1. disabled
In the default mode, ConnectBlockLightbox keeps things simple. It replaces the regular lightbox galleries on your page with the Lightbox Studio features. Each image block gets its own little lightbox, so browsing is a breeze.
2. section
With the section mode, you can group all your blocks within a section into one single lightbox gallery. It help connecting individual Image Blocks (and Gallery blocks) to make a continuous lightbox navigation from self built grid. So far this settings is available for 7.1 sections only
For example, if you build a custom grid layout mixing:
4 Image Blocks
2 Slideshow Gallery Blocks
They’ll all open together as a single lightbox.
3. page
In page mode, Connect Lightbox combines all your lightbox-enabled blocks and sections into a single, seamless gallery. It's like flipping through a digital photo album – but way cooler! Check the example, where I combined 2 more images from a Section Grid gallery, make it total 10 slides in the lightbox gallery
How to Enable Connect Block Lightboxes
Install or update your Lightbox Studio plugin to the latest version.
In the Live Playground, find the “Extras” tab.
Enable “Connect Block Lightboxes” and select the scope that fits your layout: Disabled, Section, or Page.
Copy the generated snippet from the Code tab.
Replace it with the current Lightbox Studio snippet in your Footer Code Injection (in Squarespace: Website → Pages → Custom Code → Code Injection).
Save changes and preview your site.
Bonus: Slideshow Gallery Lightbox Support
Have you wondered why a Slideshow Gallery block can have a lightbox enabled? That’s another feature Lightbox Studio supports out of the box. For more details on how to achieve that, check out our dedicated guide:
How to enable lightbox for slideshow, carousel and stack gallery blocks
Important Update: Fluid Engine Block Order
A recent Squarespace update changed how Fluid Engine calculates the DOM (document) order of blocks.
In the past, Lightbox Studio followed the insertion order of blocks — meaning whichever image you added first would appear first in the lightbox.
Now, Squarespace restructured the block hierarchy for accessibility (screen readers), and this affects plugin behavior too. Here’s what’s happening:
The mobile layout view determines your page’s true block order in the background code (HTML).
Even if you rearrange your blocks visually on desktop, Squarespace adopts the mobile order for accessibility — and that’s what Lightbox Studio uses.
“Tip: This same underlying order helps maintain accessibility consistency across devices. By adjusting your layout in mobile view, you’ll not only fix gallery order but also improve navigation flow for visually impaired visitors using assistive tools.”
How to Fix Lightbox Order Issues
If your connected Lightbox gallery appears out of order:
Switch to mobile view in the Squarespace editor.
Rearrange your blocks in the correct sequence.
Save and republish your page.
This step ensures Lightbox Studio — and screen readers — follow the proper image sequence. The short demo video below showing how block order works in Fluid Engine and how to adjust it for Lightbox Studio.
Conclusion
The ability to connect lightboxes across sections or pages has always been one of the most flexible perks of Lightbox Studio. With the recent Squarespace update, understanding how Fluid Engine reorders your blocks ensures this feature continues to work seamlessly.
Take a few extra seconds to check your layout in mobile view — it's now key to getting both accessibility and design consistency right.
