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;
}
1 Like
Highlighted
Shopify Expert
3550 543 843

Hi @arnoldhobiz 

Add this css:

.product-card{border: 1px solid; padding: 5px; }
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
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
3550 543 843

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
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
1364 185 436

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
1 Like
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