How can i add border around my collection section + header

[krnknyc]

Hey guys i would to like to add a thin border around my collection/product list images and in the filter section above it. Attached is an image on what i want to achieve . Any help will be greatly appreciated thank you!

link: https://haltware.com/collections/all

[faisalxe]

Hi, You can add borders like this by using this simple code just follow below steps.

1 - Open your shopify store dashboard then click on "Online Store" from left sidebar.

2- On the right side you see published theme and there will be "three dots" click on them and click on "Duplicate" and wait untill you have backup of live theme.

3- Then again click on "three dots" on these three dots and click on "Edit Code" then editor will open.

4- Inside code editor there is search bar. You have to write "component-product-card" it will be available click on this file to open the code.

5- At the very bottom of this you have to copy and paste below code and save file that is it.

.sf__pcard .sf__pcard-image .spc__main-img{
	border:1px solid #000;
}

Note: If you are unable to make changes then I will recommend you to hire an expert.

[krnknyc]

just tried that and it only shows the border around the image and not the whole section

[faisalxe]

It can be done but it is a little bit complicated. I would suggest you hire an expert to get it done faster.

[diego_ezfy]

@krnknyc,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 750px){
    .sf__collection-toolbar{
    position: relative;
}

.sf__collection-toolbar:before{
    content: "";
    position: absolute;
    left: -10vw;
    right: 10vw;
    width: 150vw;
    
    
    height: 1px;
    background: black;
    top: -11px;
}

.sf__collection-toolbar:after{
    content: "";
    position: absolute;
    left: -10vw;
    right: 10vw;
    width: 150vw;
    
    
    height: 1px;
    background: black;
    bottom: -10px;
}

.sf__col-item{
    border-top-color: transparent !important;
    
}

.sf__col-item:first-child{
    
    border-left-color: transparent !important;
}

.sf__product-listing  > *:nth-child(1){
    margin-top: 10px !important;
}

.sf__pcard-image {
    padding-top: 10px;
}
}
</style>
<script>

</script>

Further customizations would be more complex and indeed require hiring a dev, but this is a start.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.


Kind regards,
Diego

[krnknyc]

hey thanks diego! i just tried it but it only shows on the filter section and not on the products

@diego_ezfy 

[ronaldmcdonald]

I would like the same thing, did you find any solution?