How to make product pictures in best selling or featured collection rounded and add a little bit shadow
Store link:
Topic summary
A user seeks help making product images rounded with shadows in their online store. A solution is provided with step-by-step instructions:
Implementation Steps:
- Navigate to Online Store → Themes → Edit code in admin
- Add CSS code to the bottom of “base.css” file
CSS Solution:
The code applies border-radius: 20px and box-shadow: 0px 2px 5px 1px #5e5e5e to .grid-product__image-mask
Scope:
- Default code affects product images across collection pages, featured/best-selling sections, and “you may also like” sections
- Alternative code snippet provided if changes should only apply to homepage
Status: Solution provided, awaiting confirmation from original poster on whether it resolves the issue.
@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.
- From admin go to “Online Store” → “Themes”.
- Click the action button from the current theme and select “Edit code”.
- 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.
1 Like