Shrink the size of Shopify chat box

Shopify Apps
1

It is too large and cover the most of the important clickable links, and any positioning doesn’t help at all. I know it must be done in coding, CSS, but I am afraid to do so. I would appreciate any help. I asked support Advisor, but he pointed me to the community. So, here I am. Thank you!

1 Like
2

Hi @Delicya
Would ypou mind to share your store URL? Thanks!

3

Hi @Delicya ,

Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?

4

I send url by email I guess

https://delicya.co.cuk

5

Wooow you are so fast
url-https://delicya.co.uk

6

Thanks for the info, do you mean this one?

This is automatic cover all the pages when its on smaller screen.

7

I do not know the password, I don’t logout, God knows what I am doing, url
is https://delicya.co.uk

8

No, I am new here, and I don’t know what I have to click. Could you help me
with this issue, it is involving CSS codes, and I am total dumb

9

Can you please describe more specifically which part or on which screen size you want to shrink the chat box?

10

It affects each page, on desktop and mobile. Visitors can’t subscribe, it covers arrow, on check out page, not possible to view the cart or to check out. I didn’t have many visitors and no sales, but now, when I start marketing after SEO, it will be difficult for people. I couldn’t subscribed to my own site to get free download flipbook. I asked advisor and he pointe me to the community

11

I was replying via email, blue button-reply, and that is why I am late, sorry

12

Is this your store?

Made4uoRibe_0-1721409027204.png
Made4uoRibe_0-1721409027204.png1480×731 145 KB

Do you mean the chatbox on the right bottom corner you mean?

13

Yes that is my store

14

right bottom corner, it must be on right side, and I have three options of Hight, but none is good

15

And when you open it, this is the result right?

Made4uoRibe_0-1721409380890.png
Made4uoRibe_0-1721409380890.png1622×799 29.1 KB

You might need a developer to change this one. And this show only in the bigger screen size.

Made4uoRibe_1-1721409564072.png
Made4uoRibe_1-1721409564072.png543×754 85.7 KB

16

i do not mean on that, when you open, it is okey to be open, but when it is not, envelope is large, I will try to upload a file. I cant upload jpg

17

Screenshot_20240719_135132_Chrome.jpg
Screenshot_20240719_135132_Chrome.jpg1080×2400 203 KB

it covers the arrow for subscribe

18

Try to change with this code, if didnt change at all you need to contact the app provider.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
inbox-online-store-chat#ShopifyChat {
    bottom: 10px !important;
}
button.chat-toggle.chat-toggle--icon-button.icon-only svg, button.chat-toggle.chat-toggle--icon-button.mobile-only svg {
    height: 40px !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

19

I can do that, but it will cover check out and view your cart, there is not possibility for X sign to remove, as other site have it. It stands on the way, all the time, even if I change higher position. But thanks, it is helpful somewhat, I must contact App developer, many people has the same issues with this kind of chatbox.

20

If only could be possible to put it on the side, vertically, or to go away, but no.