Enhance Your Website with Lightbox Effects: A Guide for Squarespace Users

In this tutorial, you’ll learn exactly how to add a lightbox feature to your Squarespace website using the default lightbox options for image blocks, gallery blocks, gallery sections, and product pages. Then, you’ll see where Squarespace’s built‑in lightbox falls short and how to use Lightbox Studio – a premium Squarespace gallery lightbox plugin – to unlock zoom, thumbnails, video and PDF support, and a more polished viewing experience across your site.

Prerequisite

What is a lightbox in squarespace? Simply put, a lightbox is an overlay or popup window that appears on a website to display images. You can use navigation arrows to move between different images in the lightbox. It showcases the picture while dimming the rest of the page, allowing the image to stand out while still maintaining visibility around the edges. Lightboxes are an excellent way to highlight photos and products, enhancing the visual appeal of your website.

Squarespace default lightbox vs Lightbox Studio

Squarespace includes a default lightbox that works well for basic image pop‑ups, but it’s limited to specific layouts and offers only simple overlay styling. You can’t enable a lightbox on slideshow or carousel gallery blocks, and there’s no built‑in support for advanced zoom controls, thumbnails, or PDF viewing.

Lightbox Studio automatically replaces the default lightbox when installed on your Squarespace site, extending lightbox support to more block and section layouts, and adding powerful extras like pinch‑to‑zoom, thumbnails, video integration, PDF lightboxes, and customizable themes.

Quick steps: how to add a lightbox in Squarespace

• For images, add an Image block, set the layout to Inline, open the Design tab, and toggle Lightbox on.

• For galleries, use a Grid Gallery block or a 7.1 Gallery section with a Grid layout, then enable the Lightbox option in the design settings.

• For product pages, turn on the lightbox or image zoom options in your Store page or product page design settings (7.1 Click Action: Lightbox, 7.0 Products: Image Zoom + Enable Lightbox).

If you want more advanced controls – like zoom, thumbnails, video and PDF lightboxes, or support for slideshow and carousel layouts – installing Lightbox Studio will automatically upgrade the default Squarespace lightbox across your site.

Image blocks

To enable a lightbox on Image blocks:

1. Add an image block, or double-click an existing image block to open the image editor.

2. Click the Design tab.

3. If your block has a layout option, ensure it's set to Inline. Other layouts don't support a lightbox.

4. Switch the Lightbox toggle on.

5. Choose between Dark Overlay and Light Overlay for your lightbox style with the Lightbox Theme drop-down.

This table compares the compatibility of different layouts and placements with the default Squarespace lightbox and its caption feature.

Layout	Placement	Default Lightbox	Default Lightbox Caption	Clickthrough URL
Inline	7.0 & 7.1 classic sections	✅	✅	Lightbox Overrides URL
Poster	7.0 & 7.1 classic sections	❌	❌	N/A
Card	7.0 & 7.1 classic sections	❌	❌	N/A
Overlap	7.0 & 7.1 classic sections	❌	❌	N/A
Collage	7.0 & 7.1 classic sections	❌	❌	N/A
Stack	7.0 & 7.1 classic sections	❌	❌	N/A
Image block Fluid engine	7.1 Fluid engine	✅	❌	Lightbox Overrides URL

Note for readers:

When Lightbox Studio is active, supported Image blocks behave like the default lightbox but gain extra controls like zoom, thumbnails, and multi‑gesture navigation. You can also connect separate Image blocks into a single dynamic gallery, which is especially useful for portfolio or grid layouts built from standalone images.

Gallery blocks

To enable a lightbox on Gallery blocks:

1. Add an gallery block, or double-click an existing gallery block to open the gallery editor.

2. Click the Design tab.

3. Ensure layout is set to Grid. Other layouts don't support a lightbox.

4. Set your lightbox slideshow style by choosing Dark Overlay or Light Overlay from the drop-down.

On Grid Gallery block Default lightbox:

• Caption is supported

• Lightbox will override clickthrough URLs

Note for readers:

With the default lightbox, only Grid gallery blocks support a lightbox and clickthrough URLs are always overridden inside the lightbox. Lightbox Studio extends lightbox support to Slideshow, Carousel, and Stack gallery blocks, while managing clickthrough URLs and captions more flexibly so you can keep both lightbox viewing and linking behaviour consistent.

This table illustrates how Lightbox Studio enhances lightbox functionality across various Squarespace block layouts, managing clickthrough URLs and captions seamlessly.

Block Layout	Default Lightbox	Lightbox Studio	Clickthrough URL	Lightbox caption
Grid	✅	✅	Opens Lightbox	✅
Carousel	❌	✅	Opens URL	✅
Slideshow	❌	✅	Opens URL	✅
Stack	❌	✅	Opens URL	✅

Gallery sections (version 7.1)

To enable a lightbox on Grid Gallery sections:

1. Start Edit the page, then hover over the gallery section and click the edit (pencil) icon.

2. Ensure the Gallery type is set to Grid: Simple, Grid: Strips, or Grid: Masonry. Slideshow layouts don't support a lightbox.

3. Switch the Lightbox toggle on. Change settings Galleries - Lightbox background in Site styles to change lightbox background

4. Click Save to save your changes and keep editing.

On Grid Gallery section Default lightbox:

• Caption is not supported

• Lightbox will not override clickthrough URLs, click the link goes to URL

Note for readers:

On Squarespace 7.1, Grid gallery sections offer a basic lightbox, but Slideshow and Reel layouts do not. With Lightbox Studio installed, you can enable a lightbox on those layouts as well, so your homepage hero galleries and full‑width sliders can open into the same advanced lightbox experience as your Grid sections

This table illustrates how Lightbox Studio enhances lightbox functionality across various Squarespace section layouts.

Gallery layout	Default Lightbox	Lightbox Studio	Clickthrough URL	Lightbox caption
Grid: Simple	✅	✅	Open URL	✅
Grid: Strips	✅	✅	Open URL	✅
Grid: Masonry	✅	✅	Open URL	✅
Slideshow: Simple	❌	✅	Open URL	✅
Slideshow: Full	❌	✅	Open URL	✅
Slideshow: Reel	❌	✅	Open URL	✅

Summary blocks & Gallery pages (version 7.0)

Summary blocks trigger a lightbox slideshow when connected to a Gallery page (only available on version 7.0).

• The lightbox color is always Dark, and captions show up on hover.

• When viewing the page, clicking an image with a clickthrough URL redirects to the link instead of opening the lightbox slideshow

The functionality of lightbox on gallery pages varies depending on the chosen template.

Note for readers:

Because Lightbox Studio integrates natively with Summary blocks and Gallery pages, you can keep using your existing 7.0 gallery architecture while upgrading the viewing experience with zoom, thumbnails, and multi‑gesture navigation. This is ideal if you have an older Squarespace site that relies heavily on Gallery pages but you still want a modern lightbox.

Product lightbox

Once Lightbox Studio replaces the default product lightbox, shoppers can pinch‑to‑zoom on mobile, scroll‑zoom on desktop, and add video to Product lightbox gallery. This level of product image zoom is difficult to achieve with the default Squarespace options alone and can significantly improve how customers evaluate details like texture, fit, and finishes.

For 7.1 Template (Product Details Page):

1. Open the product details page you wish to edit.

2. Click "Edit Design" in the top-left corner (or hover over Edit and select Edit Design).

3. Hover over the Product section and select Edit Section.

4. Switch the layout to Simple to show the Click Action option.

5. In the Click Action dropdown, choose Lightbox.

6. Optional: Switch back to your preferred product layout.

For 7.0 Template (Brine template):

1. Create a Store page, then add a product.

2. On the product details page, return to the Website panel, click Design, then select Site Styles.

3. Scroll to Products: Image Zoom and ensure the option is checked.

4. Set Zoom Activates on to Hover.

5. When the Enable Lightbox option appears, ensure it is checked.

For other templates in the 7.0 version, refer to Squarespace support documentation.

Set Squarespace gallery lightbox Color

For 7.1 gallery sections, you can style your default Squarespace lightbox background color in the Section Themes editor, and most other galleries let you choose a Dark or Light overlay in the gallery settings or Site Styles (Summary block is always Dark)

In Lightbox Studio, there are three theme selections:

• Auto: Follows the selected theme of the gallery.

• Dark/Light: Allows you to force the lightbox color, affect site-wide

For Gallery sections, the Lightbox Studio lightbox theme will be changed based on the Section color:

• Light/Bright colors: Set to Light.

• Dark/Darkest colors: Set to Dark.

Changing Lightbox studio lightbox theme will affect background, icons color and caption color. The table below will explain the support color mode of each Gallery type

Gallery Type	Default Lightbox	Lightbox Studio
Image Blocks	Light/Dark	Light/Dark
Gallery Blocks	Light/Dark	Light/Dark
Summary Blocks	Dark	Light/Dark
Gallery Section	Customized	Light/Dark
Gallery Pages	Light/Dark	Light/Dark

Lightbox Studio Exclusive Features

Besides extending lightbox support to more Squarespace gallery layouts, Lightbox Studio adds powerful features that make your images, galleries, and product pages more interactive and user‑friendly.

Zoom

With Squarespace lightbox zoom functionality in Lightbox Studio, users can zoom in on images for a closer look on both desktop and mobile, which is especially valuable for product photos, artwork, and photography portfolios.

• Pinch-to-zoom supported for lightbox images on mobile devices.

• Scroll zoom supported for desktop.

• Zoom controls available on Lightbox toolbar.

Thumbnails

Thumbnails let visitors see where they are in a gallery at a glance and jump directly to specific images, making large galleries easier to navigate. With Lightbox Studio, you can toggle a thumbnail track on the lightbox to create a more professional gallery experience.

Download Button

A dedicated download button for max‑size image downloads is ideal if you share resources, digital assets, or client galleries and want users to save high‑quality versions directly from the lightbox.

These features work together with multi‑gesture support, dynamic galleries, and video/PDF support to turn the lightbox into a central viewing experience on your Squarespace site.

Getting started with Lightbox Studio on Squarespace

1. Install Lightbox Studio on your Squarespace 7.0 or 7.1 site (Business plan or higher) by adding the provided code snippet to your Footer injection.

2. Once activated, Lightbox Studio automatically replaces the default lightbox for supported image blocks, gallery blocks, gallery sections, Summary blocks, and product pages across your site.

3. Use Ground Control plugin to customize zoom, thumbnails, themes, and toolbar options to match your branding and content.

Frequently Asked Questions

Question: Can I add a lightbox to Squarespace without code?

Yes. You can enable the default Squarespace lightbox directly in the Design settings for Image blocks, Gallery blocks, Gallery sections, and product pages—no custom code or external scripts required.

Question: How do I add zoom to Squarespace product images?

On Squarespace alone, you can enable product image zoom and lightbox from your Store or product page settings, but the options are limited. With Lightbox Studio installed, shoppers get pinch‑to‑zoom on mobile, scroll‑zoom on desktop, and advanced toolbar controls for product images.

Question: What’s the difference between the default Squarespace lightbox and Lightbox Studio?

The default lightbox offers simple image pop‑ups on certain layouts, with basic overlay styling and no thumbnails or PDF support. Lightbox Studio replaces it site‑wide to add zoom, thumbnails, video and PDF lightboxes, and support for slideshow and carousel galleries.

Question: Do I need to rebuild my galleries to use Lightbox Studio?

No. After installation, Lightbox Studio automatically upgrades supported Image blocks, Gallery blocks, Gallery sections, Summary blocks, and product pages, so you can keep your existing content structure and instantly improve the viewing experience.