How can I have the product borders darken when you hover over them

Store Design
, , , , , , , , , , , , , ,
1

I want to have my borders darken when you hover over them like it does in this website here:

https://www.towerhousewares.co.uk/cooking-appliances
Whereas currently it is like this:

lukafernada_0-1728747154992.jpeg
lukafernada_0-1728747154992.jpeg2880Ă—1800 352 KB

1 Like
2

Hi, adding dark border when hover over the products is possible using CSS custom code,

You have to target the product item div and add css like this

.product item:hover {border: 1px solid black }

Hope this will help you, if you still need you can contact me

We can sort this problem.

3

Where to add this exactly?

4

Hi @lukafernada

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.underline-links-hover:hover a {
        text-decoration-thickness: 1.5px;
    }

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

this wasn’t what i was asking for unfortunately, if you could see the example site referenced

6

i dont understand sorry, it is not working

7

Hi @lukafernada

Sorry, I misunderstood. Check this code instead

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card-wrapper.product-card-wrapper:hover .card__inner {
    border-color: black;
}
  • And Save.
  • Result:

Made4uoRibe_1-1728780942054.png
Made4uoRibe_1-1728780942054.png1756Ă—696 175 KB

8

That didn’t work but this did:

Edit Code > Assets > Bottom of base.css

.card-wrapper.collection-card-wrapper:hover .card__inner {
     border: solid 1px #252268;
    transition: all 0.8s;
  }
9

Hello, can you help me to have the same effect but on my store?
It’s womber.fr and the password is PROPAGANDAAA
Because your code didn’t work for my store… I use dawn theme.
Thanks!