Re: How to change chat style

Solved

How can I modify the chat button style to avoid overlapping issues?

Not applicable

Hello there , 

 

How to edit the style the style of the chat button option so that this issue doesn't occur. 

1. overlap back-to-top 

2 . Is not visible if opened cart.

site url :: https://6iywyiv96kmxdoa6-71493648693.shopifypreview.com

 

Thamk you!!!

chat.jpg

 

chat1.jpg

 

Accepted Solutions (2)

Moeed
Shopify Partner
6006 1630 1943

This is an accepted solution.

Hey @Anonymous 

 

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>
#offcanvas__mini_cart.active {
    z-index: 9999999999;
}
#scroll__top.active {
    margin-bottom: 50px !important;
}
</style>

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Moeed
Shopify Partner
6006 1630 1943

This is an accepted solution.

Hey @Anonymous 

 

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>
iframe#dummy-chat-button-iframe {
    margin-bottom: 50px;
}
</style>

 

RESULT:

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 12 (12)

RockTechnolabs
Shopify Partner
251 36 60

Hi @Anonymous 
only back to top button? or chat as well

it's shows like this

RockTechnolabs_0-1694517179100.png

 

banned
Not applicable

Hi ,

 

Only back to top to go a bit up

RockTechnolabs
Shopify Partner
251 36 60

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
5) And paste the below code

 

<style>
#offcanvas__mini_cart.active {
    z-index: 9999999999;
}
#scroll__top {    
    bottom: 85px !important;    
}
</style>

 


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

Best Regards,
Rock Technolabs

banned

Artzen_tech
Shopify Partner
552 113 112

Hello @Anonymous 

Its Artzen Technologies! We will be happy to help you today.

You can change the styling of chat button from the backend of the shopify store.Please see the below screenshot.

Artzen_tech_1-1694517437425.png

 



 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

Moeed
Shopify Partner
6006 1630 1943

This is an accepted solution.

Hey @Anonymous 

 

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>
#offcanvas__mini_cart.active {
    z-index: 9999999999;
}
#scroll__top.active {
    margin-bottom: 50px !important;
}
</style>

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Not applicable

Can you assist in changing the style of chat button and it is also overlapping in cart menu.

 

Thank You!!!!!

Moeed
Shopify Partner
6006 1630 1943

Hey @Anonymous 

 

Use the code I provided then the chat button won't overlap on the cart button as well.

 

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Not applicable

It overlaps in the payment icons in footer ,

thank you!!

 

py.jpg

Moeed
Shopify Partner
6006 1630 1943

Hey @Anonymous 

 

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>
.footer__payment {
    z-index: 9999999999;
    position: relative;
}
</style>

RESULT:

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Not applicable

how to move the chat button a bit up.

Thank you!!

Moeed
Shopify Partner
6006 1630 1943

This is an accepted solution.

Hey @Anonymous 

 

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>
iframe#dummy-chat-button-iframe {
    margin-bottom: 50px;
}
</style>

 

RESULT:

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Not applicable

Hi, 

 

When I open and close the chat , it again appears in the footer even after adding the code .