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>
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.
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">