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

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)

Shopify Partner
1283 228 261

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>

.product-form__submit:hover {
background: red !important;
    color: white !important;

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



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.

Shopify Partner
7990 1560 1583

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.

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

Shopify Expert
5615 1021 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;
color: #fff;




Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Shopify Apps URL :-
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing