Rounded Images on all product photos, including collections

Hi,

I am trying to round all the corners of my product and collection images.

I am using the Showcase version 5.40 theme.

Can anyone help?

1 Like

Please share your store URL

URL: https://nerveprf.com

@NP2023

Please add the following CSS code to your assets/styles.css bottom of the file

.rimage-outer-wrapper {border-radius: 5% !important;}
.product-block .rimage__image, .collection-block .rimage__image {border-radius: 5% !important;}

Thanks!

.

Hi thanks!

I implemented this and it rounded the edges of the following: slideshow images and collection images.

Is there a way to only do collections and product photos?

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your style.css theme file
  3. Paste the code in bottom of file

.product-block .rimage__image, .collection-block .rimage__image {
border-radius: 20px;
}

@NP2023

Please share the screenshot.

@NP2023
Put below css into styles.css file

.product-block .rimage__image, .collection-block .rimage__image {
    border: double !important;
    border-radius: 99px !important;
}

This worked for the collection at the bottom of the homepage but not on products images on the home screen and on product pages

@NP2023

Please add provided CSS I will check the issue and fix it.

@NP2023
Add below one also

.product-block .image .image-inner, .collection-block .image .image-inner {
  border: double !important;
    border-radius: 100px !important;
}
.product-area .product-area__media .swiper-container:not(.swiper-container-horizontal) .swiper-wrapper img {
  
    border: double !important;
    border-radius: !important;
}

2 Likes

@NP2023

add following code

.product-block .image .image-inner, .collection-block .image .image-inner {
  border: double !important;
    border-radius: 100px !important;
}
.product-area .product-area__media .swiper-container:not(.swiper-container-horizontal) .swiper-wrapper img {
  
    border: double !important;
    border-radius: !important;
}