Add Border Around Images Inside Collection Card - Refresh Theme

Store Design
, ,
1

Hello. I would like to add a border around all of the images in my collections so that there is a border around the image within the product card so that I do not have to photoshop them all individually. Can someone tell me how to do this please? I have attached a picture with an image circled that doesn’t have a border next to one that does that I photoshopped. Thanks!

URL: https://3c9oq7e555bfpek4-75037212951.shopifypreview.com

joshwp_0-1695230882093.png
joshwp_0-1695230882093.png1091×487 91.8 KB

2

Hello,

just paste this in the custom CSS of the section and it should work;

.media--transparent{
  border: 2px solid black;
}
3

Hey @joshwp

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1695232938559.png
Moeed_0-1695232938559.png1330×568 138 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Thank you. I did want it around the image inside of the product card, so using .card__media instead of .card-wrapper worked.

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.