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

StanleyTse
New Member
14 0 0

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?

Eco_iframe.png

 

Replies 8 (8)

Arif_Shopidevs
Shopify Partner
135 18 13

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.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
StanleyTse
New Member
14 0 0

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

 

Arif_Shopidevs
Shopify Partner
135 18 13

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 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
StanleyTse
New Member
14 0 0

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
Shopify Partner
135 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
135 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
StanleyTse
New Member
14 0 0

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
New Member
14 0 0

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