Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi Shopify community,
I made some changes to my theme code some time ago and since then, the outline of the add to cart button on my product pages dissapears on hover. Here's a product page for reference.
Any help would be appreciated to restore the outline on hover.
Thanks
Seb
Solved! Go to the solution
This is an accepted solution.
Hi @survivalsquadau ,
Try this one.
button.product-form__submit.button.button--full-width.button--secondary:hover {
border: 1px solid #1B8649;
}
Result:
This is the result when it hover. There is a border-radius in your base.css for this button. If you dont like this radius you can take out by finding the code and remove.
i hope it help.
This is an accepted solution.
Hi @survivalsquadau ,
Try this one.
button.product-form__submit.button.button--full-width.button--secondary:hover {
border: 1px solid #1B8649;
}
Result:
This is the result when it hover. There is a border-radius in your base.css for this button. If you dont like this radius you can take out by finding the code and remove.
i hope it help.
Thanks @Made4uo-Ribe. That worked, but I wanted to ask if you could help with stopping the button from becoming rounded on hover? A lot of my other buttons are rounded so I need to find a way to only apply this change to these kind of buttons?
Thanks.
Try this one. Same instruction. Thats is also my concern when I give you the code.
.button {
border-radius: 0px !important;
}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025