How can I add a PDF file on a product page using metafields?

[RCTERRA]

I’m trying to add installation instructions that are a pdf to my product page using meta fields, but I can’t figure it out and its been hours now.

Each product has its own unique installation instructions so I was trying to use a meta field for that. I tried using the “file” meta field and when I would go to select it on the customize theme product page editor it wouldn’t come up.

I’m trying to add it into a collapsible content row. One for the installation instructions and one for model fitment. I can’t just add it into the default page using a link because it will show up on all the product pages, I also don’t want to create a product page for every individual product.

I wouldn’t mind if the PDF was a link and I could label the link to say “____ - Installation Instructions”. I also tries to use a URL meta field for the URL of the file and nothing worked.

Please help

[dmwwebartisan]

@RCTERRA

I’m assuming you created a File meta field for the PDF, not a multiline text field. Internally, the type of this meta field is file_reference.

As documented here, meta fields of that type can only be hooked up as a dynamic source for image pickers, which means they only work for image files, not for PDF files. At least that’s what’s currently supported, the theme editor may be extended in the future so you could create a download link or something similar for a PDF file.

So to have a download link show up in a collapsible tab you would have to make some modifications to your theme. What you would need is a block that allows custom Liquid code and then you could add a download link to the product’s PDF file in the theme editor by adding this code to the Liquid code field of that block:

Download PDF

This code assumes the meta field for the PDF is in the namespace my_fields and the key is pdf_file.

[RCTERRA]

Can you explain the process in greater detail? Where do I add the custom liquid block?

[RCTERRA]

How can I link a specific file though? And how would I do that so I can plug in different files for each product? you didn’t really explain..

[Guillaume10]

when you upload the file PDF on shopify, on your files list, there is an URL.

The guy says that you have to use the url on the meta field

[RockZ]

go Setting – Custom data-- Product – Add definition–Select Type–File-- validations select Accept all file types, Save it.

go product-- click any product, below page you will see

and upload the file you want to show on your fronpage.

now next step is very important.

go Theme-Customize, search the product that you uploaded a file,

Copy code as following:

{% if product.metafields.custom.pdf != blank %}

Download Manual

{% endif %}

Save, then you will see this and this can be download successfully.