how to make this pictures corner rounded and add a little bit shadow

[Mohidtaha]

How to make  product pictures in best selling or featured collection rounded and add a little bit shadow

Store link:

https://mohidtaha.com

[Vinsinfo · Accepted solution]

@Mohidtaha Please follow below steps to make the product images rounded and add a little bit shadow. Let us know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click the action button from the current theme and select "Edit code".

3. Go to "base.css" file and paste the below code at the bottom of the file.

Note: This will also update the pictures in collection page and you may also like section in product page.

.grid-product__image-mask {
    border-radius: 20px;
    box-shadow: 0px 2px 5px 1px #5e5e5e;
}
.grid-product__tag {
    border-top-right-radius: 20px;
}

To update only for the home page, please use below code.

body.template-index .grid-product__image-mask {
    border-radius: 20px;
    box-shadow: 0px 2px 5px 1px #5e5e5e;
}
body.template-index .grid-product__tag {
    border-top-right-radius: 20px;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.