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

Technical Q&A
,
1

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

Store link:

https://mohidtaha.com

2

@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,

Vinsinfo_0-1731661855039.png
Vinsinfo_0-1731661855039.png1365Ă—767 407 KB

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