Resize AddToCart Button on QuickView And Change Color Hover

Store Design
, , , , , ,
1

Capture 17.JPG
Capture 17.JPG1055×515 53.1 KB

Hey,

Website URL: happyoff.com

It’s The QuickView Popup

  • I want to make the AddToCart Button bigger. (Scale X2)

  • For Wishlist Button and Social Shares: Change the Hover color from #56cfe1 to #C67D4E

Thanks a lot :folded_hands:

2

Hi,

  • I want to make the AddToCart Button bigger. (Scale X2)
    Reply : edit this css open main-product.css file and edit this css see below
    .t4s-product-form__buttons .t4s-product-form__submit {
    padding: 5px 88px;
    }
  1. For Wishlist Button see below

.t4s-product-form__buttons .t4s-pr-wishlist:hover {
color: #C67D4E;
border-color: #C67D4E;
}

Please edit this css

1 Like
3

Kindly, follow the below steps to fix your problem:

  1. From your Shopify admin dashboard, Go to Online Store
  2. Choose the theme which you wanna edit and click on Edit Code
  3. Add this code in the end of theme. liquid file above </body

Aatiqa_0-1733239133825.png
Aatiqa_0-1733239133825.png2361×1123 329 KB

If I was able to help you and my solution worked well for then, please don’t forget to Like it and Mark it as Solution.

Best Regards,
Aatiqa

1 Like
4

Thanks a lot, It’s working for the AddToCart Button and the wishlist, but changing the hover color has not been in all the social media Shares

I appreciate any help you can provide. :folded_hands:

5

i will send you css of social media shares please wait.

1 Like
6

Also, Resize the Text “Add To Cart” to be bigger as button, Thanks a lot brother :folded_hands:

7

Please open the css file icon-social.css file and edit this css see below

@media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1025px) {
.t4s-socials.t4s-socials-style-3 a.facebook:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.twitter:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.pinterest:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.tumblr:hover {
color: #C67D4E;
border-color:#C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.telegram:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.email:hover {
color: #C67D4E;
border-color: #C67D4E;
}
}
If helpful then please Like and Accept Solution.

1 Like
8

This is the css of social share icon hover please open the icon-social.css file edit this css

@media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1025px) {
.t4s-socials.t4s-socials-style-3 a.facebook:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.twitter:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.pinterest:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.tumblr:hover {
color: #C67D4E;
border-color:#C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.telegram:hover {
color: #C67D4E;
border-color: #C67D4E;
}
.t4s-socials.t4s-socials-style-3 a.email:hover {
color: #C67D4E;
border-color: #C67D4E;
}
}
open main-product.css file and edit this css this is the Text “Add To Cart” to be bigger as button css
.t4s-product-form__buttons .t4s-product-form__submit {
font-size: 18px;
}
If helpful then please Like and Accept Solution.

1 Like
9

Not Working brother

10

Hi,
Ok If you want I will do this for you. send me store url and collaborator access code.