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

[CStudios]

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 

[Moeed]

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

[CStudios]

Sure thank you @Moeed !

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

[Moeed]

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

[CStudios]

please check now @Moeed 

[Moeed]

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 </body> tag

<style>
.interstitial-view__instant-answers-list {
    border-radius: 0px !important;
}
.interstitial-view {
    border-radius: 0px !important;
}
.chat-app .chat-app--close-button {
    height: 40px !important;
    width: 40px !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[CStudios]

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

[BSS-TekLabs]

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

- 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:

-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.

[CStudios]

Thanks so much @BSS-TekLabs !

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

[BSS-TekLabs]

or base.css

[CStudios]

Thank you, yes i tried that too. It's not working 😞