Separator lines between Products

[thevergreenlana]

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:

[thevergreenlana]

I'm on DAWN theme btw

[Moeed]

Hey @thevergreenlana 

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

Best Regards,
Moeed

[thevergreenlana]

Hi Moeed,

there is no password!

URL : https://shopbreakthrough.com/

[Artzen_tech · Accepted solution]

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 </body>

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:

Let me know if need further assistance
Regards,
Artzen Technologies

[thevergreenlana]

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!

[Artzen_tech]

@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;
}

[thevergreenlana]

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