Goal: reposition the Shopify Inbox chat icon on mobile so it doesn’t overlap the bottom toolbar; built-in settings only allow left/right.
Approach: add custom CSS to override the chat button/iframe position, typically in Assets > base.css (or theme.scss.liquid) or before in theme.liquid.
Key solutions:
Status: no confirmation of a final fix by the requester. Next steps: implement one of the CSS overrides, test on mobile (and iPad/desktop), and refine offsets/scale to avoid conflicts with other UI elements.
Hi,
Is there a way to more the Shopify inbox chat icon on a mobile device so it doesn’t cover the mobile toolbar at the bottom? In the setting, I can only move it left or right. I’m using the Gecko Theme, and our website is lesnereidesaustralia.com.au
Hello,
You would need to add some css to overwrite the position while on mobile.
From your image it seems just moving it up a bit would then cover the ‘back to top’ button so would need to decide on where to move it - even higher or maybe more central
Hey @krisGarrett
Follow these Steps:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello There,
@media (max-width: 768px){
#dummy-chat-button-iframe {
bottom: 13%!important;
right: 2px!important;
}
}
Hello @krisGarrett ,
You can try to follow these steps
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css file or theme.scss.liquid file
Add this following code at the bottom of page
@media screen and (max-width: 767px) {
.shopify-inbox__button {
bottom: 60px;
}
}
Save changes
Hope this can help you out. Let us know if you need any further support
Ali Reviews team.
Hello,
To address the mobile layout, you’ll need to apply additional CSS to override the positioning.
Based on the image you shared, it appears that simply moving it up slightly would result in overlapping the ‘back to top’ button. Therefore, you’ll need to decide on an alternative placement, either higher up or possibly more centered.
The following solution consists of 2 codes and can be copy-pasted by any one (any non-tech, layman etc). I am not a developer but I tried to understand and implement these codes that I have gathered from different sources and combined + modified to following codes.
It solves 2 problems:
Positioning the chat icon anywhere you want on your web store.
After closing the chat, it will close down to where it is started from - the new position. (It will not move to its initial state / position).
1st code will cause chat button to go up 65px so there can be another app’s button below it. This also holds the chat button at the same position even after closing the chat window. Adjust bottom & right padding as per your requirement.
2nd code will cause iframe to remain visible on-screen when it is opened so we need to adjust the top padding and scale-size of the iframe so that it doesn’t cut through the top while open. If this is not done, the header might overlap it.
You can adjust top padding value and scale value from 0.72 to any value (as per your need so that it doesn’t cut off and isn’t overlayed by header).
I have tried and tested these codes on Dawn 10.0.0 theme. These are working fine and providing the desired results. I hope these codes will work on other themes as well.
Follow these Steps:
a) Go to Online Store
b) Edit Code (Click 3 dots and select edit code)
c) Find / search base.css file
d) Add the following codes at the last in the bottom.
1st code (Mobile version):
@media only screen and (max-width: 750px){
#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
bottom: 55px !important;
right: 5px !important;
z-index: 2 !important;
}
}
2nd code (Mobile version):
@media only screen and (max-width: 750px){
#shopify-chat > iframe[style*=“min-height”], #shopify-chat > iframe[style*=“left: 0”] {
bottom: 0px !important;
top: 30px !important;
z-index: 999 !important;
-webkit-transform: scale(0.72);
-moz-transform-scale(0.72);
}
}
Above codes will only work for Mobile version. For desktop version, replace max with min, and change the values of bottom, top, right & scale values as per your need after testing.
1st code (Desktop version):
@media only screen and (min-width: 750px){
#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
bottom: 1200px !important;
right: 5px !important;
z-index: 2 !important;
}
}
2nd code (Desktop version):
@media only screen and (min-width: 750px){
#shopify-chat > iframe[style*=“min-height”], #shopify-chat > iframe[style*=“left: 0”] {
bottom: 1200px !important;
right: 80px !important;
z-index: 999 !important;
-webkit-transform: scale(0.99);
-moz-transform-scale(0.99);
}
}
I have placed all these 4 codes at the end of base.css of Dawn 10.0 theme. All these are working fine for Mobile & Desktop versions separately.
Credited:
Gmacv (Stackoverflow)
FriedChicken (Stackoverflow)
Updated Codes:
1st code will cause chat button to go up so there can be another app’s button below it. This also holds the chat button at the same position even after closing the chat window. Adjust bottom & right padding as per your requirement.
2nd code will cause iframe (chat window) to remain visible on-screen when it is opened. Thus, we might need to adjust the bottom padding and scale-size of the iframe so that it doesn’t cut through the top while open.
You can adjust bottom padding value and scale value from 0.9 to any value (as per your need so that the chat window doesn’t get cut off).
I have put other factors (top, bottom, z-index, webkit-transform-scale etc) between /* & */ so that these are treated as comments and not executed. If you want to utilize any factor, just remove /* & */ from both ends & utilize it.
Please follow these Steps:
a) Go to Online Store
b) Edit Code (Click 3 dots and select edit code)
c) Find / search base.css file
d) Add the following codes at the last in the bottom.
/* Shopify Inbox Chat Button Position (Mobile) */
@media only screen and (max-width: 767px){
#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
bottom: 55px !important;
right: 5px !important;
/* z-index: 2 !important; */
}
}
/* Shopify Inbox Chat Window Position (Mobile) */
@media only screen and (max-width: 767px){
#shopify-chat > iframe[style*=“min-height”], #shopify-chat > iframe[style*=“left: 0”] {
bottom: 25px !important;
border: 1px solid #202a36 !important;
-webkit-transform: scale(0.9);
/* -moz-transform-scale(0.72); */
/* top: 30px !important; */
/* z-index: 999 !important; */
}
}
/* Shopify Inbox Chat Button Position (IPAD) */
@media only screen and (min-width: 768px) and (max-width: 989px){
#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
bottom: 100px !important;
right: 5px !important;
/* top: 750px !important; */
/* z-index: 2 !important; */
}
}
/* Shopify Inbox Chat Window Position (IPAD) */
@media only screen and (min-width: 768px) and (max-width: 989px){
#shopify-chat > iframe[style*=“min-height”], #shopify-chat > iframe[style*=“left: 0”] {
right: 75px !important;
/* -webkit-transform: scale(1.00); */
/* -moz-transform-scale(0.9); */
/* bottom: 52px !important; */
/* top: 100px !important; */
/* z-index: 999 !important; */
}
}
/* Shopify Inbox Chat Button Position (Desktop) */
@media only screen and (min-width: 990px){
#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
bottom: 120px !important;
right: 5px !important;
/* top: 600px !important; */
/* z-index: 2 !important; */
}
}
/* Shopify Inbox Chat Window Position (Desktop) */
@media only screen and (min-width: 990px){
#shopify-chat > iframe[style*=“min-height”], #shopify-chat > iframe[style*=“left: 0”] {
right: 80px !important;
/* -webkit-transform: scale(1.00); */
/* -moz-transform-scale(1.00); */
/* bottom: 1200px !important; */
/* top: 200px !important; */
/* z-index: 999 !important; */
}
}
I have placed all these codes in base.css in Dawn Theme 10.0. I found these working fine on my web store www.aadesgins.store
inbox-online-store-chat {
position: fixed !important;
z-index: 500 !important;
isolation: isolate;
}
inbox-online-store-chat[is-open=“true”] {
z-index: 2000 !important;
}