Transcript
Okay. In this video, I'm going to show you how to take a Google sheet and embedded into a page in your Shopify store. Okay, so here you can see I am in Google Drive. I've got my Google Sheet open. And if I go to show you what the end product is going to look like, here is my Shopify page.
And you can see the Google Sheet is here and it is editable. So embedding your sheet isn't that hard, getting it to be editable. It takes a couple extra steps that I'll show you about. So the first thing you want to do on your Google Sheets is, you know, they've got the share thing over here and it doesn't get you what you need, right?
So this is when you want to share, like a link to the page that you actually want to do is go to the file menu. And there's another share one here right to share with other. This this command here is similar to this one here. What you actually want to do instead is the publish to web functionality. If you take that published a web, you're going to want to do it.
Embed code. And in this case here I have three, tabs, even though two of them were hidden. So I'm just going to have the, open shows. Tab. Right. Open shows. Boom. And then it gives you this embed code up here, and then you copy that and you're going to paste that into your Shopify store.
So what I do is I use a custom liquid section to do that. And I'm going to hide this one here because it's our final product. I'm going to do another custom liquid one here. So I take that embed code and I just paste it in. Oh, I didn't copy it properly. Let's go back to here and copy.
And paste. There we go. So now you can see I've got the spreadsheet showing up but it's got some size issues right. So what you do then is you take some code which I'll show you here. Then you, then you add it to this, code here. So the code is width equals 100% height, 600 pixels. And that gives us the width of 100% of the div and the height of 600 pixels.
And you can adjust that to have it be whatever you want. But you put it right into the iframe. I'm going to save that. Go back out to the front end of our website, our Shopify store, and reload that page. And you'll see here I've got my spreadsheet here, but it's not editable. So now what you have to do to make it editable.
It's one simple little change, and it's hard to find this in any documentation. All right. Is in our URL structure here you'll see this pub HTML publish web. Right. You know it's right before the question mark. So these are the variables for the rest of the query string. This is the URL for your, Google sheet. And this last little bit says what kind of functionality can happen.
So all you have to do is change that pub HTML to be edit. I'm going to save that. Go back out to the front end of our Shopify store. And now the. This is editable. So you want to, just show you a summary here. What we did in code right is we we grabbed this URL for the embedding.
And then we added the width equals 100% and 600 pixels for the height. And then we took this little edit functionality and put it in right here. So replace the pub HTML with edit and added the height and width parameters. Hopefully that helps you embed your Google sheet into your Shopify store and embed it so it can be edited also.
All right. Thanks for watching.