How to resize a Messenger widget that's obstructing checkout?

Store Design
, ,
1

Hi! I’ve had the Shopify messenger widget positioned at the bottom right of my site for a while, without issue. Recently, it created a problem where customers weren’t able to click Checkout on the Quick cart I had enabled, because the iframe of the chat widget is too big, mostly covering the checkout button. I had to disable Quick cart so that customers don’t get frustrated and abandon their orders, but I’d prefer to have it enabled. Is there a way to reduce the size of the iframe of the messenger widget so that it only takes up as much room as the visible part of the widget? I reached out to my theme’s support (I use Stiletto by Fluorescent), and they suggested I get help from Shopify. They said some of their customers have had success fixing this issue.

Attached is an image sent to me by my theme’s support team to demonstrate the issue.

download.png
download.png1532×1248 220 KB

2

Hey @MichelleSpaTech

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

RESULT:

Moeed_0-1693419532413.png

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

Best Regards,
Moeed

3

This did help! However, some of the Checkout button is still not clickable. We have a large number of elderly customers who sometimes have a hard time understanding online shopping, so I’m worried it might still confuse them. Is there a way to reduce the iframe of the messenger widget some more? If not, I still very much appreciate the solution!