How can I make an full page width iframe to show the content of the clickable icons?

[StanleyTse]

Dawn theme - I have 5 icons under the banner, I would like to show the relevant page under the icon roll when clicking on the icon. 

Do I need to make an iframe for it?

[Arif_Shopidevs]

Hello, @StanleyTse 
You can approach this differently by placing all sections on the page and displaying them as tabs. Alternatively, you could publish them as HTML and use JavaScript to show the HTML content without using iframes. I hope this makes sense.

[StanleyTse]

@Arif_Shopidevs Thanks for your advice and may I know if there any good sample codes reference?

[Arif_Shopidevs]

If you send me this block area code, I will send you and update for you .

Other wise you need to adjust may js and css in your custom block which may hassle for you.

Thank you 

[StanleyTse]

I create a page template and here are the codes - added the banner, icons row - and want to show the relevant page under the icon row

Thanks a lot!

{
"sections": {
"image_banner_6DQ3F4": {
"type": "image-banner",
"blocks": {
"heading_gAMhrj": {
"type": "heading",
"settings": {
"heading": "<strong>Our Eco-responsible Commitment<\/strong>",
"heading_size": "h1"
}
},
"buttons_446AEN": {
"type": "buttons",
"settings": {
"button_label_1": "RECYCLE YOUR CASE",
"button_link_1": "",
"button_style_secondary_1": false,
"button_label_2": "",
"button_link_2": "",
"button_style_secondary_2": false
}
}
},
"block_order": [
"heading_gAMhrj",
"buttons_446AEN"
],
"settings": {
"image": "shopify:\/\/shop_images\/ep-page-banner.webp",
"image_overlay_opacity": 20,
"image_height": "small",
"desktop_content_position": "middle-center",
"show_text_box": false,
"desktop_content_alignment": "center",
"color_scheme": "",
"image_behavior": "none",
"mobile_content_alignment": "center",
"stack_images_on_mobile": false,
"show_text_below": false
}
},
"multicolumn_Lm9BA3": {
"type": "multicolumn",
"blocks": {
"column_aD8N7G": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/qd-tab-media-1_142d054b-f496-4db8-80da-2b2992c8186b.png",
"title": "",
"text": "<p><strong>OUR ECO JOURNEY<\/strong><\/p>",
"link_label": "",
"link": ""
}
},
"column_gam7WV": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/qd-tab-media-2_3e353214-55f0-4f86-b9f9-321fd7f7150d.png",
"title": "",
"text": "<p><strong>OUR PRODUCTION<\/strong><\/p>",
"link_label": "",
"link": ""
}
},
"column_hHGBkX": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/qd-tab-media-3.webp",
"title": "",
"text": "<p><strong>RECYCLED MATERIALS<\/strong><\/p>",
"link_label": "",
"link": ""
}
},
"column_jUE6zd": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/qd-tab-media-4_f09a4938-2ec8-4b75-bcad-7f69dc19369f.png",
"title": "",
"text": "<p><strong>SUSTAINABILITY<\/strong><\/p>",
"link_label": "",
"link": ""
}
},
"column_qKwM8h": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/qd-tab-media-5.webp",
"title": "",
"text": "<p><strong>OUR PARTNERS<\/strong><\/p>",
"link_label": "",
"link": ""
}
}
},
"block_order": [
"column_aD8N7G",
"column_gam7WV",
"column_hHGBkX",
"column_jUE6zd",
"column_qKwM8h"
],
"settings": {
"title": "",
"heading_size": "h1",
"image_width": "full",
"image_ratio": "adapt",
"columns_desktop": 5,
"column_alignment": "left",
"background_style": "none",
"button_label": "",
"button_link": "",
"color_scheme": "",
"columns_mobile": "1",
"swipe_on_mobile": false,
"padding_top": 32,
"padding_bottom": 20
}
},
"main": {
"type": "main-page",
"disabled": true,
"settings": {
"padding_top": 28,
"padding_bottom": 28
}
}
},
"order": [
"image_banner_6DQ3F4",
"multicolumn_Lm9BA3",
"main"
]
}

[Arif_Shopidevs]

Hello, Thank you for the code. But it is not full code. It missing schema part. 
What I understand this area is generated from any pagebuilder or some other area. Here the column id is different. 
i have done a sample code for you. Which will give you idea how to do. 

thank you

[Arif_Shopidevs]

Zip is not allowed here. here is a link for download https://we.tl/t-2hJO7Jpp7O

[StanleyTse]

Thanks and I downloaded the codes are working. 

However, as I build the page in Dawn theme page template in .json and I want to apply your codes / method to it.  Is that possible?

[StanleyTse]

Hello, yes those codes from Dawn theme built-in library (customization)