Rounded Images on all product photos, including collections

Store Design
, , ,
1

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
2

Please share your store URL

3

URL: https://nerveprf.com

4

@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!

.

5

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?

6

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;
}

7

@NP2023

Please share the screenshot.

8

@NP2023
Put below css into styles.css file

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

Ujjaval_0-1673246299201.png
Ujjaval_0-1673246299201.png1600×751 134 KB

9

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

10

@NP2023

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

11

@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;
}

Ujjaval_0-1673247077093.png
Ujjaval_0-1673247077093.png1600×753 86.4 KB

Ujjaval_1-1673247103204.png
Ujjaval_1-1673247103204.png1600×753 157 KB

2 Likes
12

@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;
}