Shopify Inbox - Move chat button up to avoid overlap with mobile toolbar

EarthArt
Visitor
2 0 1

Yesterday I installed Shopify Inbox, and so far like it a lot. I do have one issue however with it when it comes to the integration in my webshop (www.earthart.nl). In the mobile version of the webshop the Shopify Inbox chat button overlaps with the sticky mobile toolbar, hiding the search button. Can someone point me in the right direction (preferably with some code and the liquid file that needs to be adjusted) to move the Chat button up by an x number of pixels? Thanks for your help!

Replies 5 (5)

oscprofessional
Shopify Partner
15830 2369 3072
@media only screen and(max-width:768px){
iframe#ShopifyChat {
    bottom: 59px !important;
    right: 0 !important;
}
}

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
EarthArt
Visitor
2 0 1

Thanks for your reply! I tried below solution, but it doesn't seem to help. The button is sill at the same place after placing your code in the mentioned file. As it's quite straightforward, do you have any clue what could be wrong?

EarthArt_0-1627506242186.png

 

Cartli
Visitor
1 0 1

Hey!

Did you solve this problem? I'm facing the similar problem and tried fixing it with css, it works on mobile view from desktop chrome developer tools but does not work on actual mobile.

LilithJo
Visitor
1 0 1

Based on the dawn theme, add code under base.css[shopify inbox]

/* Adjust the position of the dummy-chat-button-iframe on small screens /inbox*/
@media only screen and (max-width: 768px) {
iframe#dummy-chat-button-iframe[src="about:blank"] {
position: fixed !important;
bottom: 135px !important;
right: 10px !important;
z-index: 1000 !important;
height: 68px !important;
width: 160px !important;
}
}

PS:Thanks to gpt's help, I made many ID attempts after reviewing the id and it worked afterwards. My half-assed html skills solved the problem.

ladytings
Visitor
1 0 0

This worked for me. Thanks !