Can you resize the Chat with us button on Shopify?

Zine
Excursionist
40 0 12

Hello, 

I would like to resize the button "Chat with us" to be exactly at the same height and size as the button "Wishlist" please. Can you please help me? 

Thank you so much,

Zine 

www.madeoftears.com

 

Screen Shot 2021-11-14 at 23.27.21.png

Replies 8 (8)

Zworthkey
Shopify Partner
5581 642 1565

Hii, @Zine 
Paste this code on top of the styles.css file.

button.chat-toggle.chat-toggle--\#000000 {
    border-radius: 0px !important;
    height: 45px !important;
    width: 45px !important;
}
button.chat-toggle.chat-toggle--\#000000 svg {
    height: 25px !important;
}

Thank You.

Zine
Excursionist
40 0 12

Hello,

Thank you for your help but I don't have a style.css . I have a customstyle.css but when I add it on top, it doesn't work unfortunately...

Savior
Shopify Partner
537 108 161

@Zine 

1. Go to your store click on Actions > Edit Code

2. Assets > theme.scss.css and paste below lines at the bottom of the file.

button.chat-toggle {
 width: 40px !important;
 height: 40px !important;
}
button.chat-toggle.chat-toggle svg {
    height: 20px !important;
    width: 20px !important;
}

If helpful then please Like and Accept Solution.

banned
Zworthkey
Shopify Partner
5581 642 1565

@Zine 
Paste this code on top of the theme.scss file.

button.chat-toggle.chat-toggle--\#000000 {
    border-radius: 0px !important;
    height: 45px !important;
    width: 45px !important;
}
button.chat-toggle.chat-toggle--\#000000 svg {
    height: 25px !important;
}



Zine
Excursionist
40 0 12

@Zworthkey @Savior Hello, I hope you're well! 

 

Thank you but unfortunately both code don't work 😞 

Zine
Excursionist
40 0 12

@Zworthkey @Savior I have an idea, can we do it the other way around please?

I would like the " Wishlist " icon to be the same dimension and height as the " Chat with us " icon please.

Thank you again!!

Savior
Shopify Partner
537 108 161

@Zine 

For Wishlist icon

1. Go to your store click on Actions > Edit Code

2. Assets > theme.scss.css and paste below lines at the bottom of the file.

#swym-plugin #swym-anchor[data-position=bottom-right] a {
width: 60px !important;
height: 60px !important;
}

#swym-plugin #swym-anchor.swym-heart i:after {
font-size : 30px !important;  
}

#swym-plugin #swym-anchor i {
margin-left : -15px !important;
}

#swym-plugin #swym-anchor[data-position=bottom-right] i {
margin-top : -14px !important;
}

Twinkle_34_0-1637032943492.png

 


If helpful then please Like and Accept Solution.

banned
Zine
Excursionist
40 0 12

Awesome thank you so much but they're just not at the same level 🙂 

Screen Shot 2021-11-15 at 22.52.55.png