Goal: add a hover (on-mouseover) effect to all buttons in a Shopify store using the Vantage theme. The requester already applied hover effects elsewhere but cannot find how to do it for a specific button style.
Proposed fix: a reply suggests adding custom CSS in assets/theme.css to change background and text color on hover for elements targeted by selectors like .product-info:hover .product-title. Steps to edit the theme code are provided.
Clarification: the requester says this CSS works as a nice homepage enhancement but does not address the specific button shown in their screenshot. They want that button’s style switched to a variant that highlights on hover, not just product titles.
Status: unresolved. The thread awaits guidance on how to modify that particular button’s markup/class or theme settings to enable a hover style. Screenshots and a password-protected preview link were provided to illustrate the target button.
I would like to add a hover effect to all the buttons on this website: https://o0pwd3vjmm1rlkub-58922991793.shopifypreview.com (Password: coachable)
I have added the hover effect to the rest of the buttons, but can’t find any way to do it with any theme using Google.
hello @tombarber92 for apply hover effect in your button
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot http://prnt.sc/1jat9s0
#shopify-section-162739622078e43cbf .product-info{
width: 15%;
margin: 0 auto;
}
#shopify-section-162739622078e43cbf .product-title{
display: block;
padding: 12px;
}
#shopify-section-162739622078e43cbf .product-info:hover .product-title{
background: #000000;
color:#ffffff ;
}
Hello @Kinjaldavra ,
Thank you for that, it’s a pretty cool addition to the homepage, however, I was talking about the button captured below.
Is there a way to change this button type in the theme code to the other type of button that highlights when you hover over it?
