Adding border on product list

[remz1234]

Hi, how can I replicate this to my product list? It has border with rounded corners. Thank you

Here is my store url : https://89dd9e-27.myshopify.com/

[Moeed]

Hey @remz1234 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[remz1234]

Hi @Moeed here is my store url : https://89dd9e-27.myshopify.com/ 

[Moeed]

Hey @remz1234 

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 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[remz1234]

Hi @Moeed already tried to add these code and it works but I want the corners to be rounded also. Thank you

[remz1234]

Hi @Moeed it also applies on product page. How can we remove this border on product page ?

[Dan-From-Ryviu]

Hi @remz1234 

Please go to your Online Store > Themes > Customize > Theme settings > Custom CSS, paste this code and save the change.

.spb-item .product-grid .grid__item {
border-radius: 8px;
}

[remz1234]

Hi @Dan-From-Ryviu already tried your code and it applies on my homepage but on collection it does not reflect. Thank you

[Dan-From-Ryviu]

Hi, please update the code you added to this 

.grid__item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden;
}

[remz1234]

Hi @Dan-From-Ryviu it worked now my collection but it also applies on my product page. How can we remove this? 

[Dan-From-Ryviu · Accepted solution]

Code updated 

.collection .grid__item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden;
}

[remz1234]

@Dan-From-Ryviu it worked. Thank you so much. 

[Dan-From-Ryviu]

You are very welcome.