How to add a sizing chart PDF to product details

Adding a sizing chart in PDF format directly within your product details can elevate the shopping experience for your customers, especially for apparel, furniture, or any product where sizing is crucial. Displaying this information as a PDF link allows customers to view, download, or print the chart, helping them make informed choices and reducing returns.

In this guide, we’ll walk through embedding a PDF sizing chart link in your product details on Squarespace, including Product description and Product Additonal info section and enabling it to open in a lightbox with the help of Lightbox Studio.

Adding a sizing chart PDF in Squarespace product

This tutorial will show you how to add the sizing chart PDF link in your Squarespace product editor and enable the lightbox for viewing, using either a text link or a button.

Step 1 - Install Lightbox Studio

First, install the Lightbox Studio plugin:

• Before purchasing, you can preview the plugin’s features using the snapshot feature to ensure it meets your needs.

• Once purchased, follow the plugin’s activation steps as outlined in the setup instructions.

Step 2 - Upload the PDF File to your Squarespace site

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:

Upload PDF to Squarespace product

1. Insert a Link in the Squarespace Editor: Navigate to the page where you want to add the sizing chart, and insert a button or hyperlink in the product additonal info section.

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. Select the Uploaded PDF: After the upload is complete, check the box next to the file name to select it. Lightbox Studio will automatically handle PDF links, so there’s no need to copy the PDF URL manually.

Step 3 - Embed the PDF Link in Product details

To provide your customers with easy access to the sizing chart PDF, follow these steps to add it to the Product details in the product editor:

1. Open the Pages Panel in the Squarespace editor.

2. Select your Store Page and click All (if using Squarespace version 7.1). Double-click the product to open its product editor. For more details on this, see Squarespace's guide on editing a product.

3. Choose to edit Product description or Product additional info section

Squarespace product details

Option A: Add a Link in the Product description

The Product Description field accepts text-only links (no blocks), so you can embed a simple text link here:

1. Insert a Text Link: Highlight the desired text (e.g., “View Sizing Chart”), and click the Link icon in the text editor.

2. Select the PDF File: In the Link Editor, choose File and either upload the sizing chart PDF or select an existing file.

Select PDF files

Option B: Add a Link in the Additional info section

1. In the Product details editor, click Additional Info.

2. Hover over the field and click the + icon to add content blocks. This lets you add various blocks, similar to other pages and blog posts.

Squarespace product additional info

Add the PDF Link in the Product Additional Info

1. In the Additional Info section, insert a Text Block or Button Block.

2. To link the PDF:

   • Text Block: Highlight the desired text (e.g., “View Sizing Chart”) and click the Link icon in the text editor. Choose File and either upload the PDF file or select an existing one.

   • Button Block: Click to edit the button and select Attach Link. Choose File and upload the PDF or select an existing file.

Attach link button

Disable "Open Link in New Tab"

In the Link Editor, uncheck the “Open link in new tab” option.

• This setting is crucial for enabling the PDF to open in a lightbox, allowing customers to view it on the same page without being redirected.

Disable open in new tab

Step 4 - Save and Preview the PDF Lightbox

1. Save Your Page: Once you’ve added the PDF link and disabled the new tab setting, save your page.

2. Preview the Lightbox: Visit the product page to test the sizing chart link. Clicking it should open the PDF in a Lightbox Studio pop-up, allowing customers to view the chart without leaving the page.

Check the step-by-step tutorial in this video below:

Additional tips

For more control over the PDF display, you can explore additional Lightboxify URL parameters, which allow further customization of the lightbox viewer, such as controlling default viewer, theme and dimension.

Sizing chart PDF use cases

Here are some practical examples where a sizing chart PDF can be valuable for customers:

1. Nike Numeric-Sized Apparel for Men and Women: Offer a detailed sizing chart for apparel to help customers find their perfect fit.
   View apparel size chart

2. Ring Size Guide: Provide a printable ring size chart so customers can determine their correct ring size by printing it at 100% on A4 paper.
   View printable ring size chart

3. Comparable Size Chart for Paper: Help customers choose the right paper size by offering a PDF guide with comparable sizes (e.g., A4, letter, legal).
   View paper size chart

Embedding these PDFs as lightbox links makes it easy for customers to view them on-page, increasing engagement and reducing any friction in finding sizing information.

Creating a dedicated Product Attachments section

To make your PDF documents stand out and ensure customers can easily find important product information, consider adding a Product Attachments section within the Product Info area. By centralizing documents such as sizing charts, user manuals, and care instructions, you enhance the shopping experience and reduce the chances of essential files getting lost in lengthy product descriptions.

Check out the design suggestions in the video below. I believe they can help enhance your customers' shopping experience, build trust, and ultimately boost sales.

Final thoughts

Using Lightbox Studio to embed a sizing chart PDF on your Squarespace product pages offers a professional, seamless experience, keeping customers on the page while they review important sizing details. This setup works on both desktop and mobile browsers, ensuring your sizing chart is accessible across devices.