How to open PDF in a lightbox in Squarespace

This tutorial will guide you how to open a PDF file in a lightbox popup in your Squarespace website. Below are the steps in this tutorial:

• Step 1 - Install Lightbox Studio

• Step 2 - Upload PDF file to your Squarespace or use the Dropbox-hosted PDF file

• Step 3 - Create a text or button link to your PDF file, make sure “Open link in new tab“ is un-checked

• Step 4 - Now your PDF file can be open in lightbox by default

A demo created with above tutorial is as below:

📑 Open a PDF Popup (20MB)

This tutorial will show you how to enable the lightbox by using Squarespace editor with Text Link or Button Link. For a complete tutorial on how to upload PDF files on Squarespace and explore other settings of the viewer using Lightboxify URLs parameters, check out this details tutorial

Embed PDF lightbox on Squarespace

Step 1 - Install Lightbox Studio

In the first step please install the plugin Lightbox Studio. You can preview the plugin’s features using snapshot feature prior purchasing, try it, make sure it works for you before buy the plugin and follow this tutorial to activate the plugin after purchasing.

Step 2 - Upload PDF to Squarespace

Squarespace doesn’t have a dedicated management area for PDF files. Instead, PDFs are handled within the Link Editor, which you can only access when adding a link to elements like text, buttons, navigation, or images.

Here’s how to upload PDF files using a text link or button as entry points to the Link Editor

1. Insert a link: In the Squarespace editor, navigate to any page and add a button or hyperlink

2. Upload the PDF: Switch the link type to File in the Link Editor and upload your PDF file there

3. Select the file: After the upload finished, you now can use checkbox next to the file to select it. By default Squarespace will generate a URL starting with /s/ (e.g., /s/sample-file.pdf). You can use this URL for embedding or sharing.

4. Since Lightbox Studio can convert the links to PDF lightbox directly, you might not need to copy the PDF URL

Upload PDF to Squarespace

Step 3 - Create a link to your PDF file

You can attach the existing PDF file URLs to the links or upload the new PDF file directly in the Link Editor, after the file is uploaded, ensure the setting “Open link in new tab“ is un-checked, this will enable PDF lightbox for that link right away!

Turn off Open link in new tab

Step 4 - Save the page and preview PDF lightbox

Next, save the changes and your PDF file now is available for viewing directly on your site within a lightbox, keep your content more egaged and provide a seamless experience for visitors. The embed PDF on Squarespace with Lightbox Studio is available for both desktop and mobile browsers, bring a consistent look for your polished documents.

You can also review all supported viewers for the PDF lightbox in this post by leveraging Lightbox URLs parameters.

Preview PDF lightbox on Squarespace

To experience the PDF lightbox feature before purchasing the plugin, follow these steps:

1. Upload your PDF to your Squarespace site.

2. Attach the PDF to a link, ensuring the "Open Link in New Tab" option is OFF.

3. Follow this tutorial to preview the Lightbox on your site.

4. Click the PDF link to see the PDF displayed in the lightbox.

See how Saraghina, a restaurant with a PDF link in its navigation for the online menu, showcases this feature in the Lightbox Studio playground without install the plugin

Frequently asked questions

Question: How to upload a PDF to Squarespace

Since Squarespace doesn’t have a dedicated file management area for PDFs, you’ll use the Link Editor to upload the PDF. Here’s how:

1. Insert a Link in the Squarespace Editor: Navigate to the page where you want to add the PDF, and insert a button or hyperlink in the content.

2. Upload the PDF via the Link Editor:

   • Open the Link Editor, then select File as the link type.

   • Upload your PDF file directly here. Squarespace will automatically generate a URL starting with /s/ (e.g., /s/sample-file.pdf).

3. Now your PDF is ready to inserted on links or embed in lightbox

Question: Where is the link editor in squarespace?

The Link Editor in Squarespace is a flexible tool that lets you manage links as well as uploaded files in several different ways: through links in navigation, text, images, buttons, and even auto-layout buttons.

Question: How do I embed a PDF into Squarespace?

By installing Lightbox Studio, you can embed a PDF within a text link or button on your Squarespace site. Upon clicking, the PDF will open in a lightbox, providing a seamless viewing experience on both desktop and mobile.

Question: How do I add a PDF to a Squarespace button?

To add a PDF to a button:

1. Insert a Button block on your Squarespace page.

2. Click "Attach Link" to access the Link Editor.

3. Switch to the "File" option and either choose an existing PDF or upload a new one.

4. Ensure the "Open Link in a New Tab" option is unchecked.

5. Save the page and preview your PDF in the lightbox.

Question: How do I add a PDF to Squarespace product details?

View this post for step-by-step guide on how to add a sizing chart PDF to product details

Conclusion

Adding a PDF lightbox to your Squarespace site with Lightbox Studio provides an elegant way to present documents directly on your page. This approach not only keeps users engaged but also streamlines access to key resources like menus, brochures, and guides. By following this tutorial, you can easily set up a PDF lightbox, enhancing your site’s professional presentation while offering a smooth browsing experience.