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

Shopify Discussion
1

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
chat.jpg1908×933 104 KB

chat1.jpg
chat1.jpg1914×703 60.6 KB

2

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

it’s shows like this

RockTechnolabs_0-1694517179100.png
RockTechnolabs_0-1694517179100.png1587×732 148 KB

3

Hi ,

Only back to top to go a bit up

4

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
Artzen_tech_1-1694517437425.png1278×585 54.2 KB

Let me know if need further assistance
Regards,
Artzen Technologies

5

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

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

Best Regards,
Rock Technolabs

6

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 tag

Moeed_0-1694517526110.png
Moeed_0-1694517526110.png1897×874 161 KB

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

Best Regards,
Moeed

7

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

Thank You!!!

8

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

9

It overlaps in the payment icons in footer ,

thank you!!

py.jpg
py.jpg493×262 6.57 KB

10

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 tag

RESULT:

Moeed_0-1694518859329.png
Moeed_0-1694518859329.png569×150 6.19 KB

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

Best Regards,
Moeed

11

how to move the chat button a bit up.

Thank you!!

12

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 tag

RESULT:

Moeed_0-1694519272416.png
Moeed_0-1694519272416.png1883×434 30 KB

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

Best Regards,
Moeed

13

Hi,

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