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

[Anonymous]

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

[Moeed · 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>

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

Best Regards,
Moeed

[RockTechnolabs]

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

it's shows like this

[Anonymous]

Hi ,

Only back to top to go a bit up

[RockTechnolabs]

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

[Artzen_tech]

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.

Let me know if need further assistance
Regards,
Artzen Technologies

[Moeed · 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>

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

Best Regards,
Moeed

[Anonymous]

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

Thank You!!!!!

[Moeed]

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

[Anonymous]

It overlaps in the payment icons in footer ,

thank you!!

[Moeed]

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:

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

Best Regards,
Moeed

[Anonymous]

how to move the chat button a bit up.

Thank you!!

[Moeed · 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:

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

Best Regards,
Moeed

[Anonymous]

Hi, 

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