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

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

CStudios
Excursionist
11 0 4

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 

Replies 10 (10)

Moeed
Shopify Partner
4304 1105 1353

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
CStudios
Excursionist
11 0 4

Sure thank you @Moeed !

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

 

Moeed
Shopify Partner
4304 1105 1353

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
CStudios
Excursionist
11 0 4

please check now @Moeed 

Moeed
Shopify Partner
4304 1105 1353

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:

Moeed_0-1719838214329.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
CStudios
Excursionist
11 0 4

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

BSS-TekLabs
Shopify Expert
391 123 131

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

step.png

- 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

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
CStudios
Excursionist
11 0 4

Thanks so much @BSS-TekLabs !

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

BSS-TekLabs
Shopify Expert
391 123 131

or base.css

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
CStudios
Excursionist
11 0 4

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