Why isn't my infographic PDF displaying on my Shopify page?

ChristineG
Tourist
10 0 0

I have an infographic pdf I want to show on one of my pages and I can't get it to show up for some reason.  The pdf is located in my files. I thought it was possibly because my site is password protected, but I don't think that is the issue.

Here is what my HTML looks like for that particular item:

<div style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0526/4700/2286/files/Guide_to_Amie_Pad_Sizing.pdf?v=1612389040" /></div>
<div style="text-align: left;"></div>

Replies 6 (6)

LukaszWiktor
Shopify Partner
314 24 120

Hi Christine,

PDF is not an image. You can't embed it with an <img> tag. You'd need to use an <embed> or <iframe> tag. Although, not all browsers will show an embedded PDF. The workaround is using Google Drive's viewer via an iframe:

 

<iframe src="https://drive.google.com/viewerng/
viewer?embedded=true&url=https://cdn.shopify.com/s/files/1/0526/4700/2286/files/Guide_to_Amie_Pad_Sizing.pdf?v=1612389040" width="600" height="800">

 

Or use the pdf.js library if you want to stay independent from Google.

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, Stockeo, and Personal Discount.
ChristineG
Tourist
10 0 0

Thanks very much!

What I don't understand is that it seems that I did it on my old website, so I'm super confused about why I can't get it to work using the same code on my new one.

Christine

ChristineG
Tourist
10 0 0

I copied that code exactly and it is showing a 404 code on the pdf now on the page in my admin.  Is it possible it is because my site is password protected, still? 

LukaszWiktor
Shopify Partner
314 24 120

Hmm... that's weird. It's definitely not because you site is password protected. I can download the PDF file. I was also able to embed it on codepen.io. Can you see it here https://codepen.io/LukaszWiktor/pen/MWbbZvb?

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, Stockeo, and Personal Discount.
LukaszWiktor
Shopify Partner
314 24 120

I just checked that the code snippet I posted before contained a newline after viewerng/ and that was the reason for 404 when you added it to your page.

Try copying and pasting the code as one line.

<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://cdn.shopify.com/s/files/1/0526/4700/2286/files/Guide_to_Amie_Pad_Sizing.pdf?v=1612389040" width="600" height="800">
I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, Stockeo, and Personal Discount.
ChristineG
Tourist
10 0 0

Thank-you! I'll give that a shot.  I had to switch it to a (very large) photo before.