How to make the live chat widget smaller of Shopify Inbox?

Store Design
1

Hello everyone,

I recently installed the Shopify Inbox channel and am using the live chat widget on my store. I’d like to reduce its size , around 25% smaller on both desktop and mobile.

I want to stick with Shopify Inbox only and not use any other apps. Is it possible to do this by editing base.css, or is there another way to achieve it?

Any guidance would be greatly appreciated. Thanks in advance.

My store: https://www.sawez.be/

store pass: abc

Please see the below screenshot. Maybe a way to also put it a bit higher so its right next to the upward arrow?

image
image1334×938 113 KB

2

From the Shopify Admin, go to Online Store > Edit theme and click on Theme settings (cog icon on the left sidebar)

image
image391×933 26.4 KB

From there scroll down until you see Custom CSS and paste the following code

inbox-online-store-chat {
   transform: scale(0.75);
}

You can keep adjusting that 0.75 number to make the icon a bit smaller or lager.

3

Hey @sawez,

In order to reduce the size of Shopify Chat Box, then you need to follow these steps.

Go to Shopify admin >> Online Store >> Edit Code >> style.css

In the end of style.css paste the following code that shared below.

button.chat-toggle {
  width: 35px !important;
  height: 35px !important;
}
button.chat-toggle.chat-toggle--icon-button.icon-only svg, button.chat-toggle.chat-toggle--icon-button.mobile-only svg {
  height: 35px !important;
}

You can also change the figure 35px to any number.

Results:

image
image1920×932 220 KB

4

Hey thanks a lot, this worked. However do you know how to move it a bit higher? Is too low compared to the arrow height

image
image299×175 1.73 KB

5

Hey thanks a lot for replying however style.css doesnt exist. I beleive you are using old shopify, now I see where I could add this is in base.css, but when I did nothing happened, StakingContext’s solution did help. I wonder now do you have any idea how to perhaps put this widget above the buy button on product pages? Right now it is overlapping it. I see on someone elses website it is right above the buy button on product pages but on any other pages it is at the absolute bottom right. See both screenshots next to each other in this one screenshot:

image
image927×882 147 KB

6

@sawez you can tweak the positioning of the widget by updating the Custom CSS code snippet I shared earlier to be as follows

inbox-online-store-chat {
   transform: scale(0.75) translateY(-32px);
}

You can tweak the -32px until it’s right in the position you need, though by the looks of it -32px seems to put it exactly where you need it.

image
image836×832 69.8 KB

7

hey I found one type of solution to my problem, if i cant put it higher i can just hide it, so i decreased the z index of the widget as the buy button had a higher z index:

@media (max-width: 820px) {
inbox-online-store-chat {
transform: scale(0.85);
z-index: 1 !important;
}
}

8

Yes exactly,

This is the 100% exactly solution that you are currently looking for.

9

Dude you are absolutely amazing! Thank you so much +++