How can I modify the hover button color on my product page?

BrentonLoui
Excursionist
29 0 8

How do I change color of hoover button on the product page Screen Shot 2023-10-24 at 5.46.47 PM.pngand text?

Replies 4 (4)

PageFly-Noah
Shopify Partner
1288 229 262

Hi @BrentonLoui 

 

This is Noah from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.product-form__submit:hover {
background: red !important;
    color: white !important;
}
</style>

Note: you can change the color value of the text and background.

PageFlyNoah_0-1698197822235.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Hi @BrentonLoui 

Please go to your Online store > themes > Edit code  > open base.css and add this below code at the bottom of your file 

 

.product-form__submit:hover { color: #fff !important; }
.product-form__submit:hover svg path { fill: #fff !important; }

 

Screenshot 2023-10-25 at 08.48.54.png

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ZenoPageBuilder
Shopify Partner
1052 203 219

Hello @BrentonLoui 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-form__submit:hover {
    background-color: #EEE !important;
    color: #0000ff !important;
}

The result on hover

Screenshot 2023-10-25 at 09.45.22.png

Make sure to change color values as you need.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

ZestardTech
Shopify Expert
5618 1022 1348

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.product-form__submit:hover path{
fill: #fff;
}
.product-form__submit:hover{
color: #fff;
}

 

ZestardTech_0-1698212538702.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing