I used an iframe to embed this 3D configurator on a page. I’d like it to be more user-friendly and make it full width and with a better height on desktop and also with the good usability on mobile screens.
Topic summary
A user embedded a 3D pergola configurator using an iframe but struggles with responsive sizing across desktop and mobile devices.
Initial Setup:
- Created custom page template with direct CSS editing capability
- Original iframe uses fixed dimensions (width=“1000” height=“2000”)
Attempted Solution:
- Changed width from fixed “1000” to “100%” for full-width display
Current Problem:
- After applying width=“100%”, UI elements within the configurator are being cut off
- Specifically: left sidebar dimensions and bottom navigation buttons are not fully visible
- Issue remains unresolved
Technical Context:
- Not using Shopify apps or pre-built sections
- Theme editor’s built-in full-width section option doesn’t resolve the issue
- Needs CSS solution that properly scales iframe content for all screen sizes while maintaining internal element visibility
May I know are you using any app of Shopify Section for it?
No, I just simply added a new page and created a new template through my theme editor. I can directly edit the CSS specific to this page template through the theme editor.
Most likely that iframe added through a section. Could you please click on theme section and on the right side there will be option to Make it’s width 100%.
If I do it through the section, then I will need the proper code so that it resizes properly to fit all screens. Turning on section full width through my theme editor does nothing
Could you please try this code instead?
<iframe src="https://buildown.shop/allproducts/nycfireplaces.com/en" height="2000" width="100%" title="Pergola 3D Configurator"></iframe>
1 Like
After clicking into one of the products on the configurator, the left side bar Dimensions for exact, the bottom buttons for next are cut-off now after applying your code.