How can I create round corners on images in the Prestige theme?

Store Design
1

Hi,

I would like to get round corners on all images, except for the slideshow images and full side-to-side images.
I’m using the prestige theme.

Can anyone help?

www.cutegeek.dk (Code: 1234)

2

@CuteGeek

Please add the following code at the bottom of your assets/theme.css file.

.Image--lazyLoaded.Image--fadeIn {border-radius: 7px;overflow: hidden;border: 1px solid #dddddd;}
@media screen and (min-width: 1008px){
.Product__Gallery--stack .Product__Slideshow .Image--lazyLoaded.Image--fadeIn {
border-radius: 7px;
overflow: hidden;
border: 1px solid #dddddd;
}
}

Hope this helps.

Thanks!

3

@CuteGeek

Any other problem Let me know.

Thanks!

4

@dmwwebartisan Thanks, it works on most of the images.
Now it’s only the collection images that also needs to be rounded - do you know how? :slightly_smiling_face:

It’s these:

Skærmbillede 2021-05-09 kl. 12.04.18.png
Skærmbillede 2021-05-09 kl. 12.04.18.png1221×613 546 KB

5

@CuteGeek

Please add the following code at the bottom of your assets/theme.css file.

.CollectionItem__ImageWrapper {
    border-radius: 25px ;
    overflow: hidden;
}

Hope this helps.

Thanks!

6

@dmwwebartisan Thanks, I removed “Image” from _ImageWrapper, and then it worked :slightly_smiling_face:

7

@dmwwebartisan

Could you help me with an update to this code for 2024. I am using the prestige theme as well but doesnt round the corners when I load into the assets/theme.css file

thanks a lot :slightly_smiling_face: