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

In this tutorial, you'll learn how to set up lightbox effects for your images using Squarespace's default lightbox feature. Additionally, we'll explore how to leverage Lightbox Studio - premium Squarespace gallery lightbox, to unlock advanced features and elevate your website's visual appeal.

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.

Note for Readers:

In this post, we refer to the Squarespace default lightbox as the "Default Lightbox" and the lightbox created when you install the Lightbox Studio plugin as "Lightbox Studio." This distinction will help clarify the different types of lightboxes discussed throughout the tutorial.

Please be aware that activating Lightbox Studio on your Squarespace site will automatically replace the default lightbox functionality.

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:

Lightbox Studio will function similarly to the default Squarespace lightbox on image blocks that support the lightbox feature.

However, it offers the unique capability to connect individual image blocks into a single lightbox gallery, learn more

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 Lightbox Studio, Slideshow, carousel, and stack gallery blocks can support a lightbox, learn more.

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:

With Lightbox Studio, Slideshow and Reel gallery sections can support a lightbox, learn more.

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:

Lightbox Studio seamlessly integrates with Summary blocks and provides native support for Gallery page lightbox functionality.

Product lightbox

You just need to enable the lightbox feature for your Store page, and if Lightbox Studio is activated on your site, it will replace the default lightbox. The images that display are the product images now can be zoom on desktop & mobile along with other advanced features

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 gallery sections on version 7.1, you can style your Default lightbox to any color in the Section Themes editor.

In most other Galleries, you can choose a Dark or Light overlay for the lightbox in the Gallery settings or site styles. Except for Summary block, it will be 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 for various Gallery layouts, Lightbox Studio also packs with these powerful features, enhancing the user experience and providing advanced functionality for displaying and interacting with images on your website.

Zoom

With Squarespace lightbox zoom functionality, users can now seamlessly zoom in on images for a closer look, offering an immersive viewing experience.

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

• Scroll zoom supported for desktop.

• Zoom controls available on Lightbox toolbar.

Thumbnails

• Toggle thumbnails track on Gallery lightbox.

Download

• Dedicated download button for max size image downloads.

Explore all the powerful features of Lightbox Studio by visiting this blog post. You can also review the featured clients that are using the plugin in the case studies below