Button Add to cart new design

Solved
Highlighted
Tourist
10 0 2

Hello, 

I am trying to change the shape of the button add to cart on my store. 
and it is not quite easy.

Please help!

Thank you 

0 Likes
Highlighted

Hey @Adrien17 can you share a link to the site. That'll be the easiest way to help.

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes
Highlighted
Tourist
10 0 2

Hey Ryan, 

here is the link: www.cbd-colors.com

here is the button that I'm trying to install.

Screen Shot 2020-06-19 at 5.09.02 PM.png

0 Likes
Highlighted

Hey @Adrien17 is it just the button style you want (rounded) and not the color? 

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes
Highlighted
Tourist
10 0 2

yes!

the color should be #9BB8A0 with white txt,and hover color #909090

Thank you

0 Likes
Highlighted

This is an accepted solution.

PixelSnap 2020-06-19 at 21.14.52@2x.png

I had to change the size of the search icon button as well, if they were still square it would have looked odd

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes
Highlighted
Tourist
10 0 2

Hey How did you do that?

they are still square on my end.

Let me know how to do it ?
thanks a lot

0 Likes
Highlighted

This is an accepted solution.

You'll need to add some custom CSS to make those changes. You can add this code below. Go to Themes -> Actions -> Edit Code -> Assets -> theme.scss.liquid (make sure you copy/paste this at the very bottom)

button.sp-btn-addtocart.addtocart-item-js.thumbprod-button-bg {
    border-radius: 50px;
    height:44px;
    transition: all .3s ease;
}

button.sp-btn-addtocart.addtocart-item-js.thumbprod-button-bg:hover {
    background: #909090;
    transition: all .3s ease;
}

.sp-product .sp-image-box .sp-btn-quickview {
    border-radius: 126px;
    height: 44px !important;
    min-width: 44px !important;
    margin-left: unset !important;
}

.sp-product .sp-image-box .sp-btn-quickview:before {
    line-height: 44px;
}
Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes
Highlighted
Tourist
10 0 2

It's working Great thank you!!!

1 Like
Highlighted
Tourist
10 0 2

   Hello,

I also would like to change this button on the slider of the home page.

Let me know if its doable ?

 

Screen Shot 2020-06-20 at 9.36.01 AM.png

 

 

 

 

 

 

 

 

0 Likes