All things Shopify and commerce
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>
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.
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
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?
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 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">
Thank-you! I'll give that a shot. I had to switch it to a (very large) photo before.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024