The video above is a quick tutorial to show you how to add a PDF image into your Shopify blogpost.
This is not a PDF link this is a PDF image, I ran across a lot of videos and tutorials that say hey this is how to upload a PDF and although technically correct I think what the majority of you want out there is how to upload a PDF image, inline, in your blog post.
So that's what I want to show you how to do today, okay so here we are in the Shopify admin screen and I'm looking at a blog post that I'm working on and I want to put the PDF image right here in line and then write some text do some other things. Let me show you how to put the PDF image right here so it shows in your blog post.
So the first place you're gonna go is into the HTML editor section so show HTML if you're unfamiliar with this don't worry I'm gonna provide everything that you need to get this done right. Once you're in here you're going to paste a piece of code this code right here is down below in the description you can copy it right from there and use it and you can drop it right in here.
I want to tell you something about this code once you put it in when you move back and forth back to the editor it's going to change because it's reading it so don't let that fluster you. I'm gonna show you how to enter the URL file for your PDF right in here so that you can get the image to show.
It's important to notice here is that I've I've written here insert the full link for the URL and it's right between these quotes here so you'll notice this ends right before width and back into editor and then I go back to HTML it's changed a few things in here so it's important to remember here's the first quotation and there's the last quotation before the word width. That's where we're going to be inserting the URL for the file of the PDF we're going to upload so I just want to show you that first because it gets kind of tricky if you go back to the front page you'll see this gray section over here don't let that bother you.
Let's go ahead and upload our PDF file to Shopify so that we can insert it. In order to do that you go down here to settings of course you need to save your page with that code in there always make sure you save, go down here to settings then we're gonna go here to files and on the top right over here we're you click go ahead and click upload files. Pick the PDF file that you want uploaded okay so that's the one that I want to upload I've already done it it's here okay yours might take a couple of seconds and order upload and it'll show and this section here is the URL.
This is the file that we're going to insert in between the quotes of the code section on the blog post or the HTML section so go ahead and highlight that go ahead and copy it then go back to online store. Go into blog post open up that blog post that we're working on and again go back to show HTML and you'll see in here this is where things have changed now you'll also notice it's changed a little bit as well now the here is down below so we want to make sure we copy that URL all the way to the last quote.
Okay so let's highlight here to here okay so we have this quote here available and this one here available we're gonna drop that URL that we just copied right in there so go ahead and paste that in there okay and if you want you can go ahead and click Save. That's gonna take you back to the editor for your blog post now you're gonna see that image in there so yeah we're almost there it's it's awesome.
Let's go ahead and click view and you'll see there is the PDF image in your blog you'll notice that this bottom part the second page of the PDF appears to be cut off well there's actually another scroll bar within the main screen scroll bar so when you hover over the PDF you can now move with within.
I don't like that, I want the full image to show so let me show you now how to adjust it so that we can get rid of this scroll bar and people don't get confused as far as what screen they're in and where their scroll if you want to leave it like that that's fine I don't think that's just user friendly.
So we're gonna do is come back to the blogpost we're gonna go back to HTML and you'll see right in here height 1000 width 500 you can fiddle with these numbers and keep clicking view and see how it changes.