Shopify themes, liquid, logos, and UX
How to add hover effect for product price in brooklyn theme??
Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL.
So that I will check and let you know the exact solution here.
share store url
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
span.grid-product__price:hover {
color: red !important;
}
Add this code in the bottom of the theme.css file
1. Navigate to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste above code at the bottom of the file.
3. Save it.
did not work
also theme.css is not there in brooklyn
but where add it??
i can't find theme.css in assets
'
you have theme.scss not theme.css
ok
did this but still not working
by hover price, i meant, that the product prices stay hidden unless we hover over the product
@gurman ok then add this code and try
span.grid-product__price{ display:none !important }
span.grid-product__price:hover { color: red !important;display:block !important ;}
https://crepdogcrew.com/ see this website for example
i want the hover like this
I DID BUT THE PRICE IS STYAING HIDDEN, NOT POPPING UP ON HOVERING THROUGH
use this code
@gurman for animation use this code
span.grid-product__price{ display:none !important }
span.grid-product__price:hover { color: red !important;display:block !important ;transition: color .2s ease-in-out;}
remove previous code and add this one in theme.scss
span.grid-product__price{ display:none;color:red !important; }
add this code in theme.js
$(document).ready(function(){
$(".grid-product__wrapper").hover(function(){
$("span.grid-product__price").css("display", "block");
}
});
@Sajeel did but it changed the allignment on the website and also the price is not changing
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