Debut Theme - how to add border around images (collection list, featured collection)

Solved
Highlighted
Tourist
10 0 2

Hi, as titled, for debut theme, how do I add border around images (collection images in a collection list, product images in a featured collection)?

 

The following worked for Simple theme but wont for Debut. I tried looking through debut's theme.css.liquid but couldn't find exactly which to override.

 

Many thanks in advance.

 

//Make products have black border.
.product .product__image {
  border: 1px solid; border-color: #000;
}

//Make collection list have black border.
.collection-grid-item__overlay {
  border: 1px solid; border-color: #000;
}
Highlighted
Shopify Expert
3915 559 940

Hi @arnoldhobiz 

Add this css:

.product-card{border: 1px solid; padding: 5px; }
Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
10 0 2
I have not tried it but it looks vaguely similar to what I tried before.
That time, I ended up with a border not just around the image, but also
around the product title and price. Which I did not want.

I'm looking to only put a border around just the image without any padding.

Will try nonetheless. Many thanks.

0 Likes
Highlighted
Tourist
10 0 2

Hi, the above was like I expected, it created a border around the entire image and product name, price.

 

I am only hoping to only envelop the image without any padding. Many thanks for your suggestion though.

0 Likes
Highlighted
Tourist
10 0 2

Still hoping for a solution. Thanks in advance!

0 Likes
Highlighted
Shopify Expert
3915 559 940

If you want to remove padding then remove or adjust "padding: 5px;" from my css

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
10 0 2

Hi Jasoliya, it will not work. I want to have a border around the image ONLY.

0 Likes
Highlighted
Shopify Partner
1445 195 525

This is an accepted solution.

Try this:

 

.product-card__image-with-placeholder-wrapper img {
    border: 2px solid black;
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Highlighted
Tourist
10 0 2

Hi Ninthony, that worked perfect. Many thanks!

0 Likes
Highlighted
Tourist
8 0 0

I am trying to do the same thing as mentioned here on the Debut theme, where do I add this line of code?  I want a border around just the image for the collection in collection list, around product image in product lists.  

0 Likes