How to add PDF File to product page using Shopify metafields

Want to add a downloadable PDF — like a size guide, spec sheet, or installation manual — to your Shopify product pages?

You can do it with metafields and a few lines of Liquid code. No apps needed. Here's how.

You can view the code used in the video here.

Step 1: Create the Metafield Definition

Go to Settings → Metafields & Meta Objects → Products and click Add Definition.

Set the name to PDF Installation and choose File as the type. Hit save. That's it for this step.

Step 2: Upload a PDF to Your Product

Go to Products, open the product you want to attach a PDF to, and scroll down to the Metafields section. You'll see the PDF Installation field you just created.

Click it, select your PDF file, and hit save.

You can attach any file type here as long as it's not an image. If you upload an actual PDF, it will open in a new browser tab when customers click it.

Other file types like CSV will trigger a download instead.

Step 3: Adds the Liquid Code

Go to Online Store → Customize and navigate to your product template. Under Product Information, add a Custom Liquid block.

Paste in the following code:

{% if product.metafields.custom.pdf_installation.value %}
  <div style="margin: 24px 0; padding: 20px; border: 1px solid #e5e5e5; border-radius: 8px;">
    <h2 style="margin: 0 0 8px 0; font-size: 1.4em;">Installation Guide</h2>
    <p style="margin: 0 0 16px 0; color: #666;">
      Download the installation instructions for this product.
      <a href="{{ product.metafields.custom.pdf_installation.value.url }}" target="_blank" rel="noopener" style="color: #d32f2f; text-decoration: underline;">
        View PDF
      </a>
    </p>
    <a href="{{ product.metafields.custom.pdf_installation.value.url }}" target="_blank" rel="noopener" style="display: inline-block;">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
        <path d="M12 2C9.79 2 8 3.79 8 6v36c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V14L28 2H12z" fill="#d32f2f"/>
        <path d="M28 2l12 12H32c-2.21 0-4-1.79-4-4V2z" fill="#f28b82"/>
        <text x="20" y="35" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white" text-anchor="middle">PDF</text>
      </svg>
    </a>
  </div>
{% endif %}

Save and you're done.

The code checks whether a PDF file exists in the metafield. If it does, a "View PDF" button shows up.

If the product doesn't have a PDF attached, nothing renders — so you can safely leave the block on every product page.

Customizing the Design

The button styling above is basic. If you want a different look, just take the code and ask any AI chat tool to restyle it however you want.

The only part that matters is the Liquid metafield reference (product.metafields.custom.pdf_installation).

Everything else — colors, padding, layout — is just HTML and CSS you can change freely.

What This Is Good For

This approach works well for attaching things like product spec sheets, user manuals, warranty documents, certificates of authenticity, safety data sheets, and size or fit guides.

Anything you'd want a customer to be able to view or download right from the product page.

No app fees, no bloat. Just a metafield and a few lines of code.