Embedding google doc html into entire blog page

samrose
Excursionist
19 0 4

Idk why its not really talked about... but hear me out.

Is it possible to embed a google doc html into the html of a blog page on shopify?

 

The point is, i want to have the same structure/template/blog i made in google doc and have it displayed into my shopify blog page? 

It would be awesome if this is possible, as the Brooklyn theme blog template sucks so much. 

Please tell  me how to do it and how to make it fit the entire page of my blogs.

 

Thank you,

Sam

Replies 11 (11)

themecaster
Excursionist
30 10 19

Absolutely possible to embed google doc as an iFrame. 

From google doc click File > Publish to the web > Pick Embed

Copy the HTML from the last step and paste it into the HTML view of a new blog page. 

Here is a link to the page that describes the process from the Google side.

Works great. You may want to use css to remove the margins and hide the scrollbar by adding the following attributes:

frameBorder="0"
scrolling="no"

Good Luck!

 

 

If my response was helpful please Like and Mark As Solution.
samrose
Excursionist
19 0 4

Hi, i have this copy, where can i add the extra coding?

<iframe src="https://docs.google.com/document/d/e/2PACX-1vSLUQ0CHaPbISgD7Grvy08ct_Lwmcmj0rfGnBsprXHKLXUrL7x5HfaRU...>

AvidBrio
Shopify Expert
295 17 29

@samrose    https://www.huratips.com/tech-tips/how-to-embed-google-sheets-in-shopify.html read this step I hope you will do that.

here my demo website https://avidbrio.myshopify.com/blogs/news/google-docs 

if can't then contact us 

 

<iframe src="https://docs.google.com/document/d/e/2PACX-1vQZ6KdKk2rIAlP4u_R-gu_w4YfuHpZqWfEjpphk9s6PI35H1HVEWr0OZGhzWKmuzQ/pub?embedded=true"></iframe>

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
samrose
Excursionist
19 0 4

I tried that but it displays it in a very small box.

AvidBrio
Shopify Expert
295 17 29

add width 100% @samrose  

<iframe width="100%" src="https://docs.google.com/document/d/e/2PACX-1vQZ6KdKk2rIAlP4u_R-gu_w4YfuHpZqWfEjpphk9s6PI35H1HVEWr0OZGhzWKmuzQ/pub?embedded=true"></iframe>
If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
samrose
Excursionist
19 0 4

Thank you for your reply, it almost did it, but not quite

Screen Shot 2021-02-07 at 6.23.56 AM.png

AvidBrio
Shopify Expert
295 17 29

Each theme has its own architecture and workflow, so I suggest you hire us and we will work out a solution for your theme, email us at hello@avidbrio.com

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
reboli
Visitor
2 0 1

Hey there;

 

Did you manage to solve it ?  I am having the same problem where the width is okay but the height is not 

 

Br

A

AvidBrio
Shopify Expert
295 17 29

@reboli Hi you can assign width and hight

add a hight into iframe code  the height="100vh"

<iframe width="100%"  height="100vh" src="https://docs.google.com/document/d/e/2PACX-1vQZ6KdKk2rIAlP4u_R-gu_w4YfuHpZqWfEjpphk9s6PI35H1HVEWr0OZGhzWKmuzQ/pub?embedded=true"></iframe>

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
reboli
Visitor
2 0 1

I went with another way instead of embedding the google doc into the theme but thank you for your time and expertise 🙂 

Ivan13
Shopify Partner
9 0 2

There is a app exactly for that: https://apps.shopify.com/doc2blog

 

1