Solved

How can I add border lines around my featured products?

thevergreenlana
Excursionist
17 0 3

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

Accepted Solution (1)
Artzen_tech
Shopify Partner
536 107 107

This is an 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:

Artzen_tech_0-1695817777832.png

 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Replies 7 (7)

thevergreenlana
Excursionist
17 0 3

I'm on DAWN theme btw

Moeed
Shopify Partner
3878 980 1224

Hey @thevergreenlana 

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
thevergreenlana
Excursionist
17 0 3

Hi Moeed,

there is no password!

URL : https://shopbreakthrough.com/

 

Artzen_tech
Shopify Partner
536 107 107

This is an 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:

Artzen_tech_0-1695817777832.png

 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
thevergreenlana
Excursionist
17 0 3

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
Shopify Partner
536 107 107

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




If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
thevergreenlana
Excursionist
17 0 3

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