How can I add border lines around my featured products?

Store Design
, ,
1

Hi, I want to add border / separator line around my products in a featured collection or product pages, This is the look that I want to have:

Screenshot 2023-09-27 170007.png
Screenshot 2023-09-27 170007.png1419×753 112 KB

2

I’m on DAWN theme btw

3

Hey @thevergreenlana

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

4

Hi Moeed,

there is no password!

URL : https://shopbreakthrough.com/

5

Hello @thevergreenlana
Its Artzen Technologies! We will be happy to help you today.

Follow the Below Steps:

  1. Go to your Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following CSS at the bottom of the file above 
ul#product-grid li.grid__item {
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding-left: 5px;
}

ul#product-grid {
    column-gap: 0;
}

AFTER ADDING ABOVE CSS THE RESULT:

Artzen_tech_0-1695817777832.png
Artzen_tech_0-1695817777832.png1311×597 45.2 KB

Let me know if need further assistance
Regards,
Artzen Technologies

6

It did work but it doesn’t look as aligned like in the reference picture I sent, Is there a way to make it full width of the page? and this should be for all products on all pages if possible, Thank you so much for your reply!

7

@thevergreenlana For full width of the page please add the below css. Yes this is for all products on all collection pages.

#ProductGridContainer .collection.page-width {
    padding: 0;
    width: 100%;
    max-width: 100%;
}

If you want to do this same for featured collection products on home page and for all other pages products please add the below css.

ul.product-grid li.grid__item {
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding-left: 5px;
}

ul.product-grid {
    column-gap: 0;
}
8

Edit on which files please, let me know, the first one and the second one!