How to add corner radius to all product images on the Dawn Theme

[havedolls]

Hey there!

I'm having difficulties with adding corner radius across all my product images. It seems that the solutions currently available don't work anymore, or at least on the Dawn theme.

I would appreciate if anybody helped 🙂

[Made4uo-Ribe]

Hi @havedolls 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Customize".

Click the gear icon on your left hand side to open the settings
Go to Media, under the Corner radius, change the 0 to number that you want. 
Click SAVE

This solution should work unless you have custom codes

[havedolls · Accepted solution]

Hey @Made4uo-Ribe!

Thank you so much for your effort in trying to help me! Unfortunately, the solution you suggested didn’t work for me. The default corner radius was already set to 18px, and changing it didn’t seem to affect the product media - at least not on the featured products section.

Regarding custom codes, I did modify the store's code once, but I'm not sure if that's even considered custom code.

The good news is that I found a solution! After playing around with the custom CSS, I simply added the following code under my product collections’ custom CSS:

.card__media {
  border-radius: 5px;
}

Thanks again for reaching out and offering your help 🙂

[suyash1]

@havedolls - do have an example of how do you want this corner radius?

[havedolls]

Hey @suyash1!

Thank you for your effort in trying to help me! I wanted the products to look like this:

 

But it's fine, because I already found a solution. After playing around with the custom CSS, I simply added the following code under my product collections’ custom CSS:

.card__media {
  border-radius: 5px;
}

Thanks again for reaching out and offering your help 🙂

[suyash1]

@havedolls - nice to know that your problems have been solved, do let me know if you need any updates later.

[devcoders]

Hello @havedolls 
Please send me your store URL and password, so I can check it and update you.

[havedolls]

Hey @devcoders!

I already found the solution, but thanks for trying to help me in the first place!

I simply added the following code under my product collections’ custom CSS:

.card__media {
  border-radius: 5px;
}

If you're interested in seeing how the products look now, you can check out my site here (there's no password): Click here to view site 

*Please be advised that the site contains mature content