How to fix Calendly app configuration issues on the Dawn theme?

Shopify Apps
1

I am having issues configuring my Calendly app correctly now that I have shifted over to the Dawn theme (previously Brooklyn). I can’t seem to remove the scroll bar from the app embed, so you a user only ever see a small section of the calendar rather than the whole thing.

The following suggestions from Calendly aren’t helping me:

Can you try adding this bit of code to your CSS file on the page?

.calendly-inline-widget iframe {
height: 100% !important;
}

If that doesn’t work, try:

.calendly-inline-widget iframe {
height: 1000px !important;
}

The other solution in the community (https://community.shopify.com/c/shopify-design/full-length-of-the-calendly/m-p/1667763#M444994) isn’t working for me either.

Is anyone else having the same issue?

2

Hey @_underlena
Kindly share your Store URL and Password if enabled

3

Hi Moeed, the url is www.underlena.com

4

Can you please share a screenshot as well of exactly what you’re looking to remove?

5

Screen Shot 2023-06-12 at 4.36.17 PM.png
Screen Shot 2023-06-12 at 4.36.17 PM.png1291×498 26.9 KB

Perhaps ‘remove’ is the incorrect word - as you can see, the Calendly embed doesn’t have enough space on the page to show the entire app, so you can only see a tiny bit of the app at a time. I would like to make the ‘window’ larger so you can see the entire app.

6

Hey @_underlena

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Moeed_0-1686545747274.png
Moeed_0-1686545747274.png1907×942 41.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Hi @_underlena

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.calendly-inline-widget {
    height: 800px !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

8

Brilliant Moeed, thanks so much that worked perfectly!

9

Hello Moeed, i’m having the same problem, I’m trying to figure out how exactly to add my calendly link properly.

My site: (asyoucansee.com)

Example site: (https://groupie.store/pages/contact-us)

I’d like it to be like that when you click on “Book An Appointment” on their site^

I’m not sure I actually did this correctly because it takes me off of my website when I click book appointment rather than poping up as a tab like the example site.

Also, I’m struggling to add this to the mobile version of my site. (asyoucansee.com) “Book an appointment” tab doesn’t show up on mobile version