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