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

Solved
New Member
10 0 0

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;
}
0 Likes
Shopify Partner
1788 298 385

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
0 Likes
New Member
10 0 0
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
New Member
10 0 0

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
New Member
10 0 0

Still hoping for a solution. Thanks in advance!

0 Likes
Shopify Partner
1788 298 385

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
0 Likes
New Member
10 0 0

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

0 Likes

Success.

Astronaut
886 107 199

Try this:

 

.product-card__image-with-placeholder-wrapper img {
    border: 2px solid black;
}
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
0 Likes
Highlighted
New Member
10 0 0

Hi Ninthony, that worked perfect. Many thanks!

0 Likes