Solved

Shopify Inbox - reducing height of chat box

Lizzie_523
Explorer
56 1 17

Hi, I have installed the new Shopify Inbox channel on my store, but there is a problem with the appearance!

When the box is open during chat, the top of the box is cut off on desktop, so there is no way to go back to the previous FAQ screen. There is also no way to move the widget down, so it's just stuck. On mobile it seems fine. Is there a way to change the sizing slightly?  Screenshot is here: https://nimb.ws/CvZbj8

 

 

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1001 1133

This is an accepted solution.

It's generated by the app, so it won't be possible to change it with the CSS code.
You need to contact the app for support, they will help you add the scroll code for it.
Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 13 (13)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Lizzie_523
Explorer
56 1 17

Hi @eComInsider the URL is www.theelephant.world - thank you 👍

eComInsider
Shopify Partner
155 16 36

screenshot-theelephant.world-2021.07.21-12_42_52.png

 does this work for you?

➡️ Exclusive offer - Shopify Trial at $1/month


➡️ Shopify Blogs (Q&A)

➡️ Your;Coffee Tip: my code = a perfect blend!
Lizzie_523
Explorer
56 1 17

Hi @ZestardTech yes that would be great, thanks! It's at www.theelephant.world 👍

LitExtension
Shopify Partner
4860 1001 1133

This is an accepted solution.

It's generated by the app, so it won't be possible to change it with the CSS code.
You need to contact the app for support, they will help you add the scroll code for it.
Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Lizzie_523
Explorer
56 1 17

Thanks so much @LitExtension ! I appreciate that 👍

Traverse_Online
Tourist
8 1 5

Hello,

I had the same problem. The chat window is so big that the X button is not there, so window can't be close.

The X button will only appear if you set your browser to around 70% size.

 

Contacted Shopify Support, but they can't help me. They ask me to consult the community here.

Any help will be appreciated

Somethingabout
Visitor
1 0 0

Did anyone find a solution for this? I can't seem to find who to contact to get this adjusted. Do I need to change the template?

LitExtension
Shopify Partner
4860 1001 1133

Hi @Somethingabout,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Desire3
Visitor
1 0 0

Having same issue can’t scroll font issues 

kazi
Shopify Partner
543 85 105

Try this css in css file or paste before </body> in theme.liquid with <style>  </style>

 

@media screen and (min-width:768px) {
iframe#ShopifyChat {
top:0;
-webkit-transform: scale(0.79);
-moz-transform-scale(0.79);
transform-origin: 0 0;
right:0 !important;
}

iframe#ShopifyChat:not([isopen="true"]) {

top:auto !important;

}


}

☑️ If the answer solve your issue please ✔ Accept it and hit like ✌️

► Need help with THEME CUSTOMIZATION, SPEED OPTIMIZATION ?


WhatsApp Email: Click here Skype: kof.bd

ahsan_aadesgins
Excursionist
25 1 2

@Traverse_Online

@Somethingabout

@Lizzie_523

 

PFB the response that resolves the issues regarding positioning of chat button and re-sizing of Chat window. It also contains the elements of the codes pasted by @kazi in this forum. So, credit goes to "Kazi" as well.

 

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:

1. Positioning the chat icon anywhere you want on your web store.

 

2. 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). It will re-size the chat window. 

 

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) 

https://stackoverflow.com/questions/71534772/how-to-style-shopify-2-0-inbox-c hat-icon-inside-an-iframe

 

@kazi 

https://community.shopify.com/c/technical-q-a/shopify-inbox-reducing-height-of-chat-box/td-p/1249745

ahsan_aadesgins
Excursionist
25 1 2

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