How can I make product images rounded?

Store Design

Topic summary

A user sought help making product page images rounded on their Shopify store (nuvocollection.com). They had tried previous solutions without success.

Solutions Provided:

Three different CSS approaches were offered:

  • Custom CSS method: Add code to Theme Settings > Custom CSS targeting .swiper-zoom-container with border-radius: 18px

  • base.css modification: Insert code at the end of assets/base.css targeting .product--medium .swiper-slide img with border-radius: 20px

  • swiper.css modification: Add code to assets/swiper.css targeting .swiper-zoom-container>img with border-radius: 10px

Resolution:

The issue was successfully resolved. The original poster confirmed one of the solutions worked perfectly, though they didn’t specify which approach they implemented. Visual examples and code snippets were provided by multiple respondents to demonstrate the implementation.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi! I am wondering if there is a way to make the images on product pages rounded?

I have tried a few solutions I have seen on here, but none of them seem to work. My website is https://nuvocollection.com/

I would really appreciate any help on this!

Kind regards

Screenshot 2025-03-14 at 20.33.09.png
Screenshot 2025-03-14 at 20.33.09.png3024×1598 473 KB

1 Like
2

Hi @Theo_Bee

Try adding this CSS into theme settings > custom CSS

.swiper-zoom-container,
.swiper-zoom-container img {
  border-radius: 18px !important;
  overflow: hidden;
}

Hope that helps

3

Hello @Theo_Bee

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.product--medium .swiper-slide img {
border-radius: 20px;
}

devcoders_0-1742006573166.png
devcoders_0-1742006573166.png1312×617 425 KB

1 Like
4

Hello @Theo_Bee
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> swipper.css
add this code at the end of the file and save.

.swiper-zoom-container>img, .swiper-zoom-container>svg {
border-radius: 10px !important;
}

result

29.png
29.png952×607 336 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Thank you so much - this worked perfectly!

Much appreciated and kind regards

Theo

1 Like
6

Hello @Theo_Bee

You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!