How can I add hover to price only in Dawn 7?

Store Design
1

Hi, I’ve read every article on hover to price on product cards, but none are updated for the latest Dawn release. I’ve messed around with code in component-card and other places, but I’ve only been able to control the entire “.card-information” piece, not the “.card-information .price” specifically.

Please help. Thank you!

I’ll DM my website and password upon request.

Here is an example of how I’d like my prices to appear: https://cog-made.com/collections/rings

1 Like
2

@lljs

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Thank you - just DMed

1 Like
4

@lljs

Thanks

can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.collection .product-card-wrapper .price {
    transition: all 0.6s;
    transform: translateY(10px);
    opacity: 0;
}
.collection .product-card-wrapper:hover .price {
    opacity: 1;
    transform: translateY(0px);
}
2 Likes
5

Amazing!! So helpful. Thank you @KetanKumar

1 Like
6

@lljs

its my pleasure to help us

1 Like
7

Hi, unfortunately this coding did not fixed my problem. Can you help?