I am trying to get borders around my products as in the screenshot added below. I have contacted the support team of my theme itself but they were unable to help.
My url is https://roix2echklbozhv0-53265825967.shopifypreview.com
Thank you
Hello @Bramm
Can you please specify which section do you want the border around the products to belong to?
Best regards,
GemPages Support Team
1 Like
Login Admin and then follow the below steps:
Step 1: Go to Online Store->Theme->Actions->Edit code.
Step 2: Search file styles.css
Step 3: Paste the below code at bottom of the file → Save
.product-block {
border-radius: 5px;
box-shadow: 0 0 6px #00000029;
padding: 10px;
border: 1px solid #eeeeee;
}
.grid-flex {
display: flex;
row-gap: 15px;
column-gap: 15px;
justify-content: center;
}
.one-fifth {
width: calc(20% - 20px);
}
Output:
If you find our reply helpful, please hit Like and Mark it as a Solution.
An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
2 Likes
Hello @WebDeskSolution
Is there any way to remove the code from the featured collection-list and featured collections on the home page? I would love to keep it in all other collections because the lay-out is perfect! Thank you so much.
Hello @Bramm
Replace the above code with the below code and check it
.template-collection .product-block {
border-radius: 5px;
box-shadow: 0 0 6px #00000029;
padding: 10px;
border: 1px solid #eeeeee;
}
.template-collection .grid-flex {
display: flex;
row-gap: 15px;
column-gap: 15px;
justify-content: center;
}
.template-collection .one-fifth {
width: calc(20% - 20px);
}
If you find our reply helpful, please hit Like and Mark it as a Solution.
Desktop I love it, but when I change the view to mobile the entire thing gets pressed together. When I change the products per row from 5 to 4 it automatically shows 3 products. 3 products per row makes 2 products automatically and on mobile I wanted 2 products per row but it automatically changes it to one product.