Do you want to add PDF to Shopify product pages? Follow this step-by-step tutorial on how to do it.
Shopify product description is a great way to communicate product information with customers. Yet, they fall short when some products require additional information, like a detailed technical user manual. If you’re selling such products, you need to add a PDF to Shopify product pages to help the customers make a simple choice.
In this tutorial, learn different ways to add PDF to Shopify product pages.
Why Upload PDF to Shopify Product Pages?
There can be various reasons to add a PDF to the Shopify product page, such as you can offer:
- Detailed user manual or instructions for the product
- Size charts for the products in PDF format
- PDF product catalogs for offline access
- Extra resources for training
Let’s uncover the step-by-step method to how to add PDF to a Shopify product page.
How to Add PDF to Shopify Product Page?
In Shopify, you can upload a PDF file in Content/Files and then use its URL to create a ‘Download PDF’ link.
Here’s how to do it.
Step 1: Upload PDF to Shopify
To add a PDF attachment to the Shopify product page, go to Content > Files in the admin.
In the Files, click the “Upload files” button on the top-right and select the PDF to add to Shopify product page. Once uploaded, click the link icon against the file to copy its URL.
We’ll use this link to add PDF attachment to Shopify product.
Step 2: Add PDF URL on Shopify Product
To add PDF to product page, edit the product description source code and add download link using HTML tag. Let’s learn how to add a PDF to a Shopify product page.
In the Shopify admin, go to Products and select the product you want to add PDF to.
In the product editor, click the </> icon in the Description section to switch to the HTML text mode.
Now, add the following code snippet in the source code where you want to add “Download PDF” button:
<a class="button" href="your-pdf-url-here">Download PDF</a>In the above code, replace the your-pdf-url-here with the actual URL of the PDF that you copied earlier.
Click the “Save” button to apply changes. And you’re done with adding PDF to Shopify product page.
Step 3: Check PDF Link on Shopify Product Page
Once you’re done with the above steps, check the product page to see if the PDF has been added. Here’s what it looks like in our example:
Note: The “Download PDF” button is stylized as per the class we used for the link tag. You can use a different class or apply an in-line css code to modify its look.
Bonus Tip: How to Embed PDF on Shopify Product Pages?
You can embed PDF on Shopify product pages to make it easy for visitors to access it directly on the page. This eliminates the need of downloading the PDF file and can be helpful in certain cases like displaying size charts.
The method to embed a PDF file on Shopify product page, you can use iframe to render the file on the page.
Follow the same steps mentioned above to upload PDF to Shopify and copy its URL. Open the product page where you want to embed PDF and use the following code:
<iframe src=”your-pdf-url-here” width=”600” height=”500”></iframe>In the above code replace the your-pdf-url-here with the actual PDF URL. You can also modify the height and width of the iframe as per your needs.
Once done, click “Save” to apply the changes.
Here’s what an embedded PDF on Shopify product page looks like:
Turn products into PDF catalogs that your customers can download, print, and share.
Get AppOther Helpful Shopify Tutorials & Resources
We discussed the two ways to add PDF to products. Go ahead and try uploading downloadable PDFs to Shopify product pages.
And if you loved reading this step-by-step tutorial, here are some additional reads:
