How can I adjust the border radius of product images?

Store Design
1

Dear community,

I want to make some adjustments to my store. I’d like to know the following things:

  1. How do I change the border radius of my PRODUCT IMAGES on the PRODUCT PAGE and HOME PAGE

Website: https://coffee-chains-test.myshopify.com/?_ab=0&_fd=0&_sc=1

Password: owl

Theme: Motion

1 Like
2

@blcksoap

sorry but i can’t see its already fix this issue do you have anther store or theme?

1 Like
3

Hi Ketan,

It’s not fixed I manually changed the photos but I’d like to change the
coding which makes it easier.

1 Like
4

Hi @blcksoap ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.product__photos img {
     border-radius: 15px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

@blcksoap

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
.product__photos img {border-radius: 20px;}
1 Like
6

Thank you this worked!

Do you also have a coding for the border of product image in CART DRAWER?

IMG_2879.jpg
IMG_2879.jpg1170×2532 118 KB

7

Hi @blcksoap ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
#CartDrawerForm .image-wrap img {
     border: 1px solid #000;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
8

Hi,

This didn’t work unfortunately. The borders turned into black.

IMG_2884.PNG
IMG_2884.PNG1170×2532 209 KB

I want the following effect in the cart drawer:

IMG_2885.jpg
IMG_2885.jpg275×269 10.5 KB

9

Hi @blcksoap ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
#CartDrawerForm .image-wrap img {
     border-radius: 15px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like