Embed Page Using iframe or other means?

biznazz101
Shopify Partner
494 48 88

Hello, I am attempting to embed a traditional page into a product page. The goal is to use the normal page to hold all the content which changes and then just edit that. For various reasons it needs to be added in this manner. I have assigned a unique template "page.brokercontent.json" but am not sure how to get this embedded.

I know on some themes there is an option to add a page as a section on products, I am working on Launch theme and do not have that option. I have tried using custom liquid to add an iframe of the page, using the URL https://sphereguru.com/pages/sphere-guru-brokerage-plan as the source. This only produced an error saying, due to security risks the domain had blocked the iframe.

I then tried the following code, and similar variations most of which produced this result:

 

 <iframe src=[pages/spheregurubrokerageplan] style="height:400px;width:600px;" title="Iframe Example"></iframe> 

 

  Capture.JPG

Any help with this would be greatly appreciated, we essentially need to create a section for our product which displays the content on an existing page. Thank you!

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
Replies 4 (4)

biznazz101
Shopify Partner
494 48 88

I'm not sure where I am going wrong but It appears to be being blocked internally by Shopify. somehow.

biznazz101_0-1677887039619.png

 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

EcomGraduates
Shopify Partner
588 48 77

hello there  

 

It appears that you have tried using an iframe to embed the page, but this produced an error due to security risks. One thing you could try is to create a custom section within your product template and use Liquid code to pull in the content from the separate page.

You can create a new section within your product template, and within that section, use the following Liquid code to pull in the content from the separate page:

 

{% assign page_handle = "sphere-guru-brokerage-plan" %}
{% assign page_id = pages[page_handle].id %}
{% include 'page', id: page_id %}

 

 

This code will assign a handle to the separate page and then use the "include" statement to pull in the content from that page. You will need to replace "sphere-guru-brokerage-plan" with the handle of your separate page.

 

 

biznazz101
Shopify Partner
494 48 88

I must be doing something wrong, I receive this error message. The second attached screenshot is of the separate page template, which is for the page which needs to be inserted. I tried replacing the name with page.brokercontent and other variations to match but same error. Any idea where I am going wrong?

biznazz101_0-1677894948337.png

biznazz101_1-1677895024907.png

 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

andi8
Visitor
1 0 0

It might be something specific to that page that's causing Shopify to block it when it's inserted as an iFrame. I use the ClassBento booking widget in a Shopify iFrame to capture bookings on my Shopify site and it works really well.