iFrame height in Custom-Liquid Theme:Dawn

Store Design

Topic summary

Issue: An embedded Setmore booking page in a Shopify Dawn “Custom liquid” section showed correct width but insufficient height, causing internal scrolling despite iframe height=“100%”.

Suggestions:

  • Add a CSS rule like iframe { height: 600px; } in base.css (with a note this affects all iframes, so targeting is recommended).
  • Set iframe styles to width: 100%; height: 100vh. “100vh” equals 100% of the viewport height.

Clarification: The constraint stemmed from the Custom Liquid section/container rather than the iframe content. The user shared their section’s Liquid schema and padding CSS, indicating the iframe was already set to 100% width/height but the container still forced scrolling.

Outcome: Applying height: 100vh to the iframe achieved the desired full-height display. The original poster confirmed the fix, and another participant reported the same solution working in both Shopify and WooCommerce (Divi theme).

Status: Resolved. Key takeaway: Set the iframe’s height to 100vh (preferably targeted to the specific iframe) to fill the viewport and avoid unwanted scrolling within the Custom Liquid section.

Summarized with AI on December 14. AI used: gpt-5.
1

Hi guys.

I want to embed the Setmore booking site in an iFrame on my site. I’m struggling displaying the entire height of the site on the page. Width is okay but the height is horrible. I’ve tried everything but I think I’m missing something simple.

I’m using Dawn as the theme.

Thanks,

Barend

2

Hi Barend,

Please share your website link for a better relevancy.

The below code CSS is intended to adjust the iframe height.

iframe {height:600px;}

Note that the above code would affect ALL iframes on your website - it would be best to target it more accurately.

Adding the code at the end of your base.css file should reflect the changes on your website.

Cheers!

3

Hi @SkinByMadeli ,

Iframe is a little stubborn. You can try the following code as reference.

Note: Make sure you have the credentials to change the iframe settings.

iframe {
width: 100%;
height: 100vh
}
2 Likes
4

Hi guys. Thanks for the quick reply.

The iframe itself isn’t so much the problem, rather the height setting on the Custom-Liquid.

I have this in the text box of the Custom Liquid:

The content of the iframe is spread 100% in height and width but the height of the custom-liquid requires scrolling which is not ideal. Hope that makes sense?

This is the code in the custome-liquid:

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: calc({{ section.settings.padding_top }}px * 0.75);
padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75);
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{{ section.settings.custom_liquid }}

{% schema %}
{
“name”: “t:sections.custom-liquid.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “liquid”,
“id”: “custom_liquid”,
“label”: “t:sections.custom-liquid.settings.custom_liquid.label”,
“info”: “t:sections.custom-liquid.settings.custom_liquid.info”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 40
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 52
}
],
“presets”: [
{
“name”: “t:sections.custom-liquid.presets.name”
}
]
}
{% endschema %}

5

I tried this now and it actually had the desired result. So simple.

Thanks very much,

6

Thanks for this simple solution. Adding the simple height: 100vh in the iframe parameters solved this issue for me in Shopify and in my Woocommerce Divi theme.