Embed/Insert internal page to content block on product page

My aim is to create a linked page (.com/framing-materials) that will have text/images displaying product overall information.

I want to then go to my products and under 'Additional Info' embed the linked page.

This way if I need to change the information such as text or images, I only need to make these changes to the original page (.com/framing-materials) instead of changing it on every single product page (there's over 70 products).

Or will it be easier to embed a PDF document from my local drive? If so, will that be updated to all my product pages if I make changes to the original PDF document on my local drive?

(The product info page that I want to be added to my products) - https://ryanmarais.com/framing-materials

(Where this page must be embedded under the product section) - https://ryanmarais.com/prints/abyss

You can use a dummy product as a container for your reusable product info.

Create a dummy product (call it "GeneralStuff") that contains the generic content you want to display. Then, in the Additional Info field of each real product, insert a product block to display GeneralStuff with only Description checked.

Now, anything you put GeneralStuff's description field will appear in the display of your real products that reference it, and any changes you make to GeneralStuff will be reflected in your real products immediately.

This works in 7.0/Montauk, at any rate.

Would it be possible to create a page that is then embeded into the additional info section with an embed block? @tuanphan - do you have any input in this? I have tried this but I'm unable to embed one of my pages into the additional info section using my url when creating the embed block. I get null back.

https://www.frameidstudio.com/packages/design-consultation

I entered my content into the embed block with some CSS to style iframe. However, with different products that have varied content, the height of the content will vary as well as depending where the content is viewed (desktop, tablet, mobile, etc). 

Here's the site:

https://www.frameidstudio.com/packages/design-consultation-iframe-code

Here's what I entered in my embed block in the code:

<div id="package-products-content">
<iframe src="https://www.frameidstudio.com/design-consultation-content" scrolling="no" allowFullScreen></iframe>
</div>

Here's what I wrote for CSS to change the style of the iFrame:

//IFRAME STYLE

#package-products-content {
    position: relative !important;
      width: 100% !important;
    overflow: hidden !important;
}

#package-products-content iframe {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
      border: none !important;
  }

//IFRAME HEIGHT DESKTOP
#package-products-content {
  @media all and (min-width:1250px) and (max-width: 2100px){
    height: 345vh !important;
  }
}

//IFRAME HEIGHT TABLET
#package-products-content{
  @media all and (min-width:701px) and (max-width: 1249px){
    height: 340vh !important;
  }
}

//IFRAME HEIGHT MOBILE
#package-products-content{
  @media all and (min-width:300px) and (max-width: 700px){
    height: 550vh !important;
  }
}

@tuanphan - I would love to achieve a dynamic height for the iFrames depending on content, and device screen size. Any input would be greatly appreciated.

On 7/17/2021 at 10:03 PM, frameids said:

Would it be possible to create a page that is then embeded into the additional info section with an embed block? @tuanphan - do you have any input in this? I have tried this but I'm unable to embed one of my pages into the additional info section using my url when creating the embed block. I get null back.

https://www.frameidstudio.com/packages/design-consultation

Use Code Block

@tuanphan, I did use code block but I can’t get the height of my iframe to be dynamic and change the height depending on the content of the iframe. Any idea what code I could use to achieve a dynamic height for my iframe?