Shopify themes, liquid, logos, and UX
How do I change color of hoover button on the product page and text?
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.
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.
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; }
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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
Make sure to change color values as you need.
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;
}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025