# Enhance Your Website With Lightbox Effects A Guide For Squarespace Users
**Source:** https://beyondspace.studio/blog/enhance-your-website-with-lightbox-effects-a-guide-for-squarespace-users
**Language:** French (France)

---

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

May 10

Written By Beyondspace

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 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** onglet.
3. If your block has a layout option, ensure it's set to **Inline**. Other layouts don't support a lightbox.
4. Switch the **Visionneuse**  toggle on.
5. Choose between **Dark Overlay**et **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** onglet.
3. Ensure layout is set to **Grid**. Other layouts don't support a lightbox.
4. Set your lightbox slideshow style by choosing **Dark Overlay**ou **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 | ✅ |
| Carrousel | ❌ | ✅ | Opens URL | ✅ |
| Slideshow | ❌ | ✅ | Opens URL | ✅ |
| Stack | ❌ | ✅ | Opens URL | ✅ |

## Gallery sections (version 7.1)

To enable a lightbox on Grid Gallery sections:

1. Start **Modifier**  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 **Visionneuse**  toggle on. Change settings **Galleries** - **Lightbox background** dans **Site styles** to change lightbox background
4. Click **Enregistrer**  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.

### Pour le modèle 7.1 (Page de détails du produit) :

1. Ouvrez la page de détails du produit que vous souhaitez modifier.
2. Cliquez sur « Modifier le design » dans le coin supérieur gauche (ou survolez *Modifier* et sélectionnez *Modifier le design* ).
3. Survolez la section Produit et sélectionnez *Modifier la section* .
4. Basculer la disposition sur *Simple* pour afficher le *Action au clic* option.
5. Dans le *Action au clic* menu déroulant, choisissez *Visionneuse* .
6. Facultatif : revenez à votre disposition de produit préférée.

### For 7.0 Template (Brine template):

1. Créez une page Boutique, puis ajoutez un produit.
2. Sur la page des détails du produit, revenez au *Site web* panneau, cliquez sur *Design* , puis sélectionnez *Styles du site* .
3. Faire défiler jusqu'à *Produits : Zoom sur l'image* et assurez-vous que l'option est cochée.
4. Définir *Le zoom s'active au* à *Survol* .
5. Lorsque le *Activer la visionneuse* l'option apparaît, assurez-vous qu'elle est cochée.

Pour les autres modèles de la version 7.0, consultez Documentation d'assistance Squarespace .

## 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**ou **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 |
| Blocs Galerie | 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.

#### **Miniatures**

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.

#### **Bouton de téléchargement**

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. Installer 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. Utiliser Plugin Ground Control  to customize zoom, thumbnails, themes, and toolbar options to match your branding and content.

## Foire aux 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—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 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.

Beyondspace 

As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement.

https://beyondspace.studio

Précédent

Précédent

## Implement Video portfolio concept with Lightbox Studio

Suivant

Suivant

## How to Verify Squarespace domain with Bing Webmaster Tools