How can I make the live chat widget smaller in Shopify Inbox?

Store Design
1

Hello,

So i just installed Shopify Inbox channel and i am using the live chat widget on my store. Problem is that i can not change the size of it, i wanna make it like 30% smaller on both desktop and mobile. Can anyone help me with this or can tell me how i do it? Thanks in advance.

Namnlös.png
Namnlös.png512×511 80.6 KB

2

hello @Adde9400

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

1 Like
3

Hello,

Thanks for reply. The website url is www.fitnesspower.se.

4

Hii, @Adde9400
Paste this code on top of the theme.scss file.

button.chat-toggle.chat-toggle--\#000000 {
    height: 50px !important;
    width: 50px !important;
}

Thank you.

1 Like
5

hello @Adde9400

please Go to Online Store->Theme->Edit code then go to assets/style.css ->paste below code at the bottom of the file.

button.chat-toggle.chat-toggle--\#000000 {
    height: 50px !important;
    width: 50px !important;
}
button.chat-toggle > svg {
    height: 25px !important;
    width: 25px !important;
}
2 Likes
6

Hello,

I do not have the asset called style.css. I tried pasting the code in the bottom of theme.scss.liquid but that did not work, what do i do now? By the way i have the Prestige theme.

7

Hi,

When trying these two options and pasting in the top of the theme.css, it does not work for me either.

Is there anyone that has found any solution?

/Anton

1 Like
8

@Anton98

Kindly Share your Store Url.

So that i can help you.

9

The store is offline.

10 
button.chat-toggle {
    height: 50px !important;
    width: 50px !important;
}

@Anton98
Add this code in the bottom of theme.css or theme.scss

11

Thanks mate,

That works in some ways, but that only targets the black outline of the widget it seems like and does not shrink the whole widget properly. The white inner icon is still the same size, so if i change it from 50px to 30px for example, the white inner part of the widget doesnt resize with the black. Is there any way to make the whole widget shrink by a percantage etc? Or do you need to target each specific part of the widget?

Screenshot: https://gyazo.com/2ae069090f2f22e862e19180708cd54f

12

It also doesnt seem to target the mobile version.

13 
button.chat-toggle {
    height: 50px !important;
    width: 50px !important;
}

try this.

14

Isnt that the same as the previous code you posted?

15

just i see you have added 30px instead of 50px

16

Did you even read my last comment in this post? xD

Please read what i replied before mate. :slightly_smiling_face:

17

When doing this the way you describe, that only targets the black parts of the widget. Whereas the white icon in the middle doesnt get smaller. I hope you understand what i mean, i also posted a GIF where u can se how it looks on 30px compared to 50px.

18

@Anton98

Beside it’s the 3rd part Shopify App so you can’t change it Size.

use other app or contact to Shopify Support team.

19

Alright, there we go. Atleast we now know that it doesnt work to resize a thirdparty app on shopify. Thanks for the reply.

1 Like