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
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.
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.