Squarespace Lightbox with Custom Styles

I’ve created several lightboxes with custom code to make them more fancy and have different effects.  View the different demos below to see them in action and I’ve included steps below to add them to your Squarespace website.

Demos

Lightbox with 3 Columns

Lightbox with Different Background Color

Step 1

Complete the initial setup of a Squarespace lightbox

Step 2

For this step, we are going to create the link for the lightbox as well as the lightbox itself.

  1. Select a Demo from above
  2. Click on the Change View button, then select Editor View
  3. Add the Code Content Block to your Squarespace page
  4. Paste the code in the Code area from the HTML section of the Codepen Demo

After you tested the lightbox and if it isn’t working, replace “#/” with “#” to see if that works


Step 3

For this step, we are going to add the CSS code for the lightbox

  1. Select a Demo from above
  2. Click on the Change View button, then select Editor View
  3. In Squarespace, click the Gear icon for the page you want to add the lightbox to
  4. Click on the Advanced tab
  5. Paste the code from below in the Header Code Injection area
  6. Paste the code from the CSS section of the Codepen demo BETWEEN the Beginning & End comments in the code below
<style>
/* LIGHTBOX CSS CODE - BEGINNING */

/* LIGHTBOX CSS CODE - END */
</style>

Step 4

Test out the lightbox.  I recommend to open the page in a browser window where you aren’t logged into Squarespace.  If you are using Google Chrome, open up an Incognito Window and go to your page URL.

Step 5

After you tested the lightbox and verified it works, the last step is to go back into Edit mode and edit the text I provided you with your own text along with updating the URL to your own image.