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

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

RCTERRA
Tourist
10 0 3

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

Replies 5 (5)

dmwwebartisan
Shopify Partner
12357 2556 3739

@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:

 

<a href="{{ product.metafields.my_fields.pdf_file.value.url }}">Download PDF</a>

 

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
RCTERRA
Tourist
10 0 3

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

RCTERRA
Tourist
10 0 3

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
Visitor
1 0 1

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
Visitor
1 0 1

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 

1712206298301.jpg 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, 

RockZ_0-1712206478595.png

RockZ_1-1712206553913.png

Copy code as following: 

{% if product.metafields.custom.pdf != blank %}
<a href="{{ product.metafields.custom.pdf | file_url }}" style="color: #f44343;" target="_blank">
Download Manual
</a>
{% endif %}

 

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

RockZ_2-1712206667492.png