Re: How do I inset border on my product grid images? - Stiletto Theme

Solved

How do I inset border on my product grid images? - Stiletto Theme

SanghitaWW
Shopify Partner
22 0 5

Could someone help me with insetting the borders on my product grid on the collection page? Currently I have coded a border on so that it outlines the images on my product grid:

Screenshot 2024-09-12 at 19.48.48.png

 

However I can't figure out how to inset this border so it actually sits on top of the inside of the image slightly - like below: 

Screenshot 2024-09-12 at 19.50.27.png

 

any advice would be a major help!
Thanks

Accepted Solution (1)

DanCodes
Shopify Partner
37 5 3

This is an accepted solution.

Hi,

1. Go to Online Store

2. Click edit code

3. Find folder assets

4. Find file theme.css

5. Add below CSS code

.product-item__image {
  position: relative;
}

.product-item__image::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid white; 
  pointer-events: none; 
}

 

If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp

View solution in original post

Replies 2 (2)

DanCodes
Shopify Partner
37 5 3

This is an accepted solution.

Hi,

1. Go to Online Store

2. Click edit code

3. Find folder assets

4. Find file theme.css

5. Add below CSS code

.product-item__image {
  position: relative;
}

.product-item__image::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid white; 
  pointer-events: none; 
}

 

If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp
SanghitaWW
Shopify Partner
22 0 5

This worked perfectly, thank you!