How can I create rounded product images on my website?

[Dekanten]

Hello

I have tried several codes but nothing works so i will ask the specialists here, just a simple rounding on images since im tired of the sqares boxes.

Link to my site:

www.dekanten.no 

[dannyelo · Accepted solution]

Hey,

Go to Online store > theme > actions > edit code.

Find assets folder > component-card.css file.

At the bottom of the file copy and paste this code.

.card .card__inner .card__media {
  border-radius: 15px;
}

Result:

I want to recommend change the background to white, so the design is more clean.

Look:

Hope it helps!

[dannyelo · Accepted solution]

Hey,

Go to Online store > theme > actions > edit code.

Find assets folder > component-card.css file.

At the bottom of the file copy and paste this code.

.card .card__inner .card__media {
  border-radius: 15px;
}

Result:

I want to recommend change the background to white, so the design is more clean.

Look:

Hope it helps!

[dannyelo · Accepted solution]

Also product info centered looks nice.

[Dekanten]

@dannyeloHello, the round corners works like a charm, it looks pretty good too. 🙂

Big thank u, do you have a code for center the text under the products as you showed here? 🙂

[dannyelo]

Hey,

I'm glad it worked!

The code to center the text is this one.

Add to the bottom of base.css file.

.card__information, .card-information {
  text-align: center;
}

[MRamzan]

Here is the quick solution to make your images rounded: