Add Border To Only Images of Features Collection Using Brooklyn Theme

Store Design
1

Hi, I need help with making border to images only of my featured collection.

Thanks

2 Likes
2

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

3

Hi @LeoRobert ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

My URL: https://uallo.com/

5

Hi @LeoRobert ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
#shopify-section-featured-collections .collection-grid__item-link {
    border: 1px solid black;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

Hello There,

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset > timber.scss.css and paste this at the bottom of the file:
.collection-grid__item-overlay.grid__image {
border: 2px solid #000;
border-radius: 6px;
}

Screenshot:-Screenshot by Lightshot

7

This works but not on my wanted collection. The collection I mentioned of is right under “New In” (screenshot attached).

Uallo-com-Customize-Copy-of-Brooklyn-Shopify.png
Uallo-com-Customize-Copy-of-Brooklyn-Shopify.png1357Ă—722 218 KB

8

Can you help me add border like the screenshot below but add only to images? thanks.

Uallo-com-Customize-Copy-of-B.png
Uallo-com-Customize-Copy-of-B.png1332Ă—743 211 KB

9

Hi @LeoRobert ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
.template-index .grid-product__wrapper {
    border: 1px solid black;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

10

it ended up with borders around image, title and price. I only wish to add border to image only

11

Hello There,

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset > timber.scss.css and paste this at the bottom of the file:
.template-index .product--wrapper {
border: 1px solid black;
border-radius: 6px;
}
12

it work! thank you so much

1 Like
13

Thank you for your response. It’s good to know that it’s worked for you.

If helpful then please Like and Accept the Solution All.