Adding lines between my product in all pages
Hi , i want to show lines between my products like this image here
and this is my website url : saintalen.com
Hi @ai41
You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.collection slider-component { padding: 0 !important; }
.collection .product-grid {
column-gap: 0;
row-gap: 0;
border: 1px solid #000;
margin-top: 0;
justify-content: space-between;
}
.collection .product-grid .grid__item {
border-right: 1px solid;
border-bottom: 1px solid;
}
}
</style>
Hey @ai41
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.grid__item {
border: solid 1px black !important;
}
</style>RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you Moeed, i want it to be only 1 line not 2 lines near to each , also the lines disappear when i moved the mouse to it as you see here at the top of the proudct , i dont want this to happen
Hi @ai41
You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.collection slider-component { padding: 0 !important; }
.collection .product-grid {
column-gap: 0;
row-gap: 0;
border: 1px solid #000;
margin-top: 0;
justify-content: space-between;
}
.collection .product-grid .grid__item {
border-right: 1px solid;
border-bottom: 1px solid;
}
}
</style>
Community Blog Articles
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025