What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

Mohidtaha
Tourist
5 0 1

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

 

Store link:

https://mohidtaha.com

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
460 158 157

This is an 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,
Vinsinfo_0-1731661855039.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Reply 1 (1)

Vinsinfo
Shopify Partner
460 158 157

This is an 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,
Vinsinfo_0-1731661855039.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support