How can I add a border radius to images on the Dawn Theme?

Store Design
1

How do I add a border-radius to all images (or at least product images) on the Dawn Theme?

Tried adding “border-radius: 10px;” on a number of places but don’t seem to find a solution. I’m not that great with coding either.

Appreciate all help!

2

hello @vukkan

Please provide the website URL and if your store is password protected then also provide a password and provide a solution here and please provide the highlight of screenshot So I will check

3

Hi, here’s the info:

URL: https://blackisshop.myshopify.com/

Password: bläckis

Not sure what you want me to screenshot though.

4

hello @vukkan

do you want to look like this https://nimb.ws/XhvroJ

5

Yes! Would love to have it that way on all pages

6

Hi @vukkan ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > component-card.css and paste this at the bottom of the file:

.card–product{
border-radius: 10px;
overflow: hidden;
}

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

7

Hi @LitExtension ,

Thanks for your comment, this solved the border for the collections page! Unfortunately it didn’t solve it for the product page and home page. Will see if I possibly can see how to solve that

8

Was able to solve it, thanks @Kinjaldavra and @LitExtension for your help!

Here’s the solution I found:

  • To fix product images on home page:

    1. Go to Assets → section-main-product.css → .product__media-list
    2. Paste in the code:
      border-radius: 30px;
      overflow: hidden;
    3. Do the same in .product__media-item:first-child (same folder, section…)

  • To fix product images on collection page:

    1. Go to Assets → component-card.cc → .card–product
    2. Paste in the same code

  • To fix product images on product page:
    This was a bit more weird (maybe not the same for everyone), but I had to go to Assets → productwiz-rio.css → .pwzrswiper-container and paste in the code there.

Hope that it might help someone!

9

hello there,

I tried all of the solutions, its 2023 must have been changes thats why its not working for me, could you tell me how to do the same for images as well as for the “add to cart” button and also for the container where we put email for subscribing

10

My website is lifegud.in no password