How can I display Calendly in full size on my webpage?

Store Design

Topic summary

A user is trying to embed Calendly on their Shopify page but it’s not displaying at full size.

A solution was provided using CSS code:

  • Add iframe { height: 100vh; } to the theme’s CSS file
  • Navigate to: Online Store → Theme → Edit code → Assets → theme.scss.liquid
  • Insert the code at the bottom of the file

The original poster confirmed this solution worked.

A separate issue emerged from another user experiencing different Calendly placement problems:

  • The embed appears at the top instead of bottom of their page
  • It’s showing on every page instead of just the homepage

This secondary issue remains unresolved with no responses yet.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi Community !

I add Calendly to one of the page but it doesn’t show full size. How can I put full size ?

https://www.ami-watch.com/pages/book-a-presentation

Screen Shot 2565-07-20 at 19.42.37.png
Screen Shot 2565-07-20 at 19.42.37.png2794×1562 261 KB

2

@Edparis
Hello,

iframe {
	height: 100vh;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

oscprofessional_0-1658322957791.png
oscprofessional_0-1658322957791.png1425×870 42.2 KB

1 Like
3

Thanks a lot !

4

Hey I am having trouble moving the calendly to the bottom of my shopify website. It appears only at the top and I don’t know how to get it to the bottom. https://traviscreate.com/ . It also shows up on every page when I only want it on the home page