How do I customise the style of the shopify chat button?

Shopify Apps
1

Hi there

Where in the code I can apply CSS to change the following on the shopify chat button:
• size of closed button
• remove round corners in open chat
• change font size/style

1 Like
2

Hey @CStudios

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Sure thank you @Moeed !

URL: https://www.cadeaustudios.com/

4

I’m unable to see the Shopify chat button on your website, do you have it disabled? If yes, then can you please enable it so that I can provide you the necessary code for customization of it.

Best Regards,

Moeed

5

please check now @Moeed

6

Hey @CStudios

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1719838214329.png
Moeed_0-1719838214329.png486×487 72.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Thank you, I have done what you have proposed. Unfortunately it’s not working though ?

8
  • Here is the solution for you @CStudios
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the style.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
/*styles button closed*/
.chat-app .chat-app--close-button {
     width: 80px !important;
    height: 80px !important;
}
/*remove round corners*/
.interstitial-view {
     border-radius: 0px !important;
}
/*change font size, style*/
.composer-bar-wrapper .composer-bar-form textarea {
 font-size: 24px !important;
 font-style: italic !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1719842972594.png
BSSTekLabs_0-1719842972594.png595×444 148 KB

-I have clearly stated what each piece of code does. You can change the style as you wish.

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
9

Thanks so much @BSS-TekLabs !

I can’t find the style.css though? could it be called something else?

1 Like
10

or base.css

11

Thank you, yes i tried that too. It’s not working :disappointed_face: