⚠️ 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

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

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Title Size and Color
Description Size and Color
Line Color and Thickness
Button Color and Text Color
Overlay on Hover Color
Image Border Radius
Text Position

Step 5. Add a Gallery Block

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

Enable: Lightbox
Design: Grid Style

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

Step 6. Upload Images To Gallery Block

To upload images 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 image.

Title
Description
Hyperlink Text (Turns Into a Button and Links Image)

Note: Do not use the clickthrough box to link the image – instead create a hyperlink.

Plugin Notes

Do not upload a mix of videos and images in the same gallery.
Font family inherits from title and body settings.
Cannot be used with other plugins that use the grid gallery block.
Mobile will show content as static as mobile does not support hover.

Troubleshooting (Plugin Not Working)

Disable AJAX settings in site styles (for 7.0 websites)
For best functionality, we recommended that only one grid gallery block be used per page.
Not compatible with image blocks or gallery pages.

Noa Grid Gallery (Preview Guide)