How to Set Up the Lightbox Anything Plugin on Your Squarespace 7.1 Website

Want to create pop-up lightboxes on your Squarespace website? Follow this quick guide to set up the Lightbox Anything plugin in just a few steps.

Step 1: Upload the JavaScript and CSS Files

1. Go to Pages in your Squarespace dashboard.

2. Click on the plus (+) icon to add a new link.

3. Scroll down and select Link, then click on File.

4. Click the plus (+) arrow to upload files.

5. Navigate to your plugin folder and upload both the JavaScript and CSS files.

6. Once uploaded, click Close to finish.

Tip: These files are now stored on your site, ready to be used in your lightbox setup.

Step 2: Copy the Plugin Code

1. Go back to the Lightbox instructions that came with the plugin.

2. Copy the provided code that enables the lightbox functionality.

Step 3: Insert the Code in Squarespace

1. In Squarespace, go to Utilities > Website Tools.

2. Click on Code Injection.

3. Scroll down to the Footer section and paste the code you just copied.

4. Click Save to apply the code to your site.

Step 4: Set Up the Lightbox URL Structure

1. Now, go to the page you want to open in a lightbox. In this example, we’re using a page called Services.

2. Use the URL structure: #lightbox_pageURL. Replace pageURL with the slug of your page. In our case, it’s #lightbox_services.

Step 5: Test the Lightbox

1. Refresh your page to apply the changes.

2. Click the button with the lightbox URL, and your selected page (e.g., Services) should open in a pop-up lightbox!