Adding borders lines around product images

Site URL: https://www.rotaterecordings.com

Hi,

Just wondering if any one would know how I could create borders around my product images like in the picture attached?

I was thinking of adding image borders using the code below and adding padding? Would I be in the right direction?

img {
	border: 1px solid black;
}

Can you share link to shop page?

On 8/8/2022 at 12:35 AM, HannahRoseShaw said:

Did you ever figure out how to do this? I've been trying to do this for a while and am yet to come up with answer!

 

Use this code (7.1)

.products.collection-content-wrapper .grid-item.is-loaded {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    border: 1px solid #000;
}

Hi! 

I am looking to put a small black border around my shop products in Squarespace 7.0.  I've been wrestling with this most of the day. I wanna pull my hair out! 
Here is the link to the products page: 

https://williamackerman.com/shop?category=cds 

I've tried everything. The code you have in your response worked for the image for "Will's Holiday Shop" I was able to put a black border around that. But the products? YIKES.. 

On 11/6/2022 at 4:47 AM, KoriLinae said:

Hi! 

I am looking to put a small black border around my shop products in Squarespace 7.0.  I've been wrestling with this most of the day. I wanna pull my hair out! 
Here is the link to the products page: 

https://williamackerman.com/shop?category=cds 

I've tried everything. The code you have in your response worked for the image for "Will's Holiday Shop" I was able to put a black border around that. But the products? YIKES.. 

Add to Design > Custom CSS

.tweak-product-list-meta-position-overlay .ProductList-item {
    border: 1px solid black;
    margin-left: -2px;
}