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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024
In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024