Squarespace Lightbox: How to Add One to Images or Video
To add a Squarespace lightbox to an image, click Edit on the image, open the Design tab, and click Lightbox at the bottom of the panel. For video, add a gallery block, add your video to it, then turn on Lightbox in that block's Design tab.
What a Squarespace lightbox is for
A lightbox opens your image or video full screen over a dimmed background when someone clicks it, then closes back to the page.
It's genuinely useful in three situations. Portfolios, where thumbnails keep the grid tidy and clicking shows the detail. Product or process shots where the fine print matters. And video, where you want a clean poster image on the page instead of a player sitting there.
Where it backfires is anything a visitor needs to read to make a decision. Don't hide important information behind a click.
Adding a lightbox to an image
This is the quick one. Hover the image and click Edit.
Go to the Design tab, which sits next to Content in the block editor.
Scroll to the bottom of that panel and you'll see Lightbox. Turn it on.
Save, reload the live page, and click the image. It should open full screen with a dimmed backdrop and a close button.
Adding a lightbox to a video
Video takes a few more steps, because the option lives on the gallery block rather than the video block.
Add a gallery block to your section, then click Edit on it.
Click the plus icon in the bottom right corner of the block, then choose Add Video.
Paste your embed link when it prompts you. Give it a moment, because Squarespace pulls the title and thumbnail from the source and the next step won't work until it has finished loading. Click Save once it has.
Now open the Design tab next to Content, and Lightbox is at the bottom of that section, same as with an image.
Save the page and reload it. Clicking the thumbnail should open the video full screen instead of playing it inline.
When the Lightbox option isn't there
A few reasons this happens.
You might be in the Content tab rather than Design. They look similar and the option only exists under Design.
The block type might not support it. Lightbox appears on image and gallery blocks, not on every block that can hold an image, so a banner or a section background won't offer it.
Or you're on Squarespace 7.0, where gallery behavior differs by template and some templates don't expose the option at all.
If the option is there but nothing happens on click, the usual cause is custom code intercepting the click. That's a quick thing to have looked at.
Keeping it fast
A lightbox loads the full-size image, not the thumbnail, so whatever you uploaded is what the visitor downloads when they click.
Export at 2000 to 2500px on the long edge and compress before uploading. That's plenty for a full-screen view on almost any display and a fraction of the weight of a straight camera export.
For video, use the embed route rather than uploading the file to Squarespace. YouTube and Vimeo handle the streaming and adaptive quality far better than a direct upload, and it keeps your storage free. My video embed guide covers the clean setup.
Frequently asked questions
Why is the Lightbox option greyed out or missing?
Check you're on the Design tab rather than Content, since it only lives there. If it's still absent, the block type doesn't support it, or you're on 7.0 where template behavior varies.
Can I lightbox a whole gallery so visitors click through?
Yes. With Lightbox on for a gallery block, clicking any image opens it full screen and visitors can move between images from there.
Does a lightbox work on mobile?
Yes, it opens full screen and closes with a tap or swipe. Test it though, because a very tall image on a narrow screen can end up smaller than the thumbnail that opened it.
Can I put a form or text in a lightbox?
Not with the native option, which only handles images and video. Popups cover some of that, and anything else needs custom code.
Want a gallery or lightbox that behaves exactly how you pictured it? Book a free call and we can talk it through.
I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.
