How can I round collection images in Craft v. 11.0.0 theme?

Store Design
, , ,
1

Hi!

I would like to round the images for collections, what bit of code do I need to use? The theme I use is Craft v. 11.0.0 and I would like to have them full circles instead of squares.

Many thanks in advance!

2

Hey @ananna ,

Please provide the store URL

3

Hi @ananna

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

you can learn about the CSS property “border-radius” to be able to do this

Hope you find my answer helpful!
Best regards,
Richard | PageFly

5

Hi!

URL is this:

d43c26.myshopify.com

and password I now set as:

ylsi123

Thanks!

6

Hi!

URL is this:

d43c26.myshopify.com

and password I now set as:

ylsi123

Thanks!

7

Hey @ananna ,

Add the following code to the bottom of your component-card.css file:

.card__inner {
  border-radius: 50% !important;
  width: 20em !important; /* Adjust the width as needed */
  height: 20em !important; /* Adjust the height as needed */
  overflow: hidden;
}
8

Thank you for the information. Is this solve?

9

Thank you very much!