How can I create rounded product images on my website?

Store Design
, , , ,
1

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

2

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:

dannyelo_0-1690248781772.png
dannyelo_0-1690248781772.png2508×1148 322 KB

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

Look:

dannyelo_1-1690248950580.png
dannyelo_1-1690248950580.png3022×1660 450 KB

Hope it helps!

3

Also product info centered looks nice.

dannyelo_0-1690249581825.png
dannyelo_0-1690249581825.png3024×1666 442 KB

4

@dannyelo Hello, the round corners works like a charm, it looks pretty good too. :slightly_smiling_face:

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

5

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

Here is the quick solution to make your images rounded: