Show a pdf on a page

ChristineG
New Member
7 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>

0 Likes

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.
0 Likes
ChristineG
New Member
7 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

0 Likes
ChristineG
New Member
7 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? 

0 Likes

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.
0 Likes

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.
0 Likes
ChristineG
New Member
7 0 0

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

0 Likes