⚠️ Grid Gallery Blocks in Squarespace 7.1

By default, Squarespace 7.1 does not offer gallery blocks (unless you are a Squarespace Circle member).

If you are not a Circle Member or don’t have access to the Gallery Block, we can help add the gallery block to your 7.1 website – free of charge!

Submit a ticket

Super Plugin Info

Works with Squarespace 7.0 and 7.1
Requires Business Plan or Higher
Uses CSS Editor and Code Injection
Only compatible with YouTube and Vimeo videos

Step 1. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2 (a). Add this code to Footer Code Injection - For Squarespace 7.1

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2 (b). Add this code to Footer Code Injection - For Squarespace 7.0

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Text Alignment (Left, Center, or Right)

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Title Size and Color
Subtitle Size and Color
Close X Icon Color
Close X Icon Background Color
Overlay Color On Hover

Step 5. Add a Gallery Block

Add a gallery block to any page with these required settings.

Enable: Crop Images
Enable: Lightbox
Design: Grid Style

⚠️ Important: Make sure you are adding the gallery block and not the gallery page section.

Step 6. Upload Videos To Gallery Block

To upload videos to the gallery block, click the + (plus icon) in the bottom right of the gallery block’s settings. Then add the following inputs and repeat this for each video.

Video Link (YouTube or Vimeo)
Title
Description
Thumbnail (Required)

Note: Videos must also be added individually and cannot be linked to an existing gallery page.

Plugin Notes

Only compatible with YouTube and Vimeo videos.
Images will display the native way and lightbox like normal.
Font family inherits from title and body settings.
Cannot be used with other plugins that use the grid gallery block.

Troubleshooting (Plugin Not Working)

Disable AJAX settings in site styles (for 7.0 websites)
Ensure the video’s privacy settings will allow it to be embedded.
Do not upload a mix of videos and images in the same gallery.
Not compatible with video blocks or gallery pages.
For best functionality, we recommended that only one grid gallery block be used per page.

Super Grid Gallery 2.0 (Preview Guide)