Dawn Theme - How to add rounded corners to main product image

Store Design
1

I’ve been trying to figure out where to add a border-radius for the main product’s image.
It does not work on .product or .product__media, I’m stumped. All help appreciated, thank you!

1 Like
2

Hi @Saturn9

Please follow the below steps, you can easily able to round the product image corners.

Just go to the Online stores > Themes > Customize:

Prezentech_0-1664362181898.png
Prezentech_0-1664362181898.png1920×929 112 KB

Once you save the settings then, output like the below screenshot.

Prezentech_1-1664362216969.png
Prezentech_1-1664362216969.png1044×608 251 KB

If its working on your store then, please do not forget to accept this solution :face_savoring_food:

4 Likes
3

Thanks! Any chance you can tell me how to do this in code? It is also changing the thumbnails which will need a smaller radius for proportion.

4

Hi @Saturn9

Please go to the Online Store > Themes > Edit code > Find base.css and add below code in the last line of the file.

.product__media img {
    border-radius: 5px !important;
}
1 Like
5

Hi, is it possbile to do this for product video aswell? just in the preview. And can you also round the corners of images in an “image with text” box, and lastly how do i make the corners rounded on the product images in collections?

1 Like
6

Following this as I have the same issue - would love to not have to get into adding code to fix this.

7

A white/grey line still surrounds the box how to remove that?

8

i have tried all the solutions provided by many but it still doesnt work

anyway you could help me?

my site is lifegud.in

thank you