How can I round the corners of collection images on my homepage?

Store Design
1

Hi:

Does anyone know how to make the corners of my collection images round on my homepage? My theme is Dawn.

Thanks!

2

Hello @jiangxinj ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

Yes, it’s:

endoxoslife.com

PW: Psalm_103

4

I’m trying to imitate this store:

Collections – Belesmé - Memorable Jewelry Gifts (belesme.com)

See that they have the rounded corner on their collection images, which is what I intend to do.

5

Hello @jiangxinj ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671073311829.png
GemPages_0-1671073311829.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1671073579001.png
GemPages_1-1671073579001.png1916×904 77.8 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

6

Hi @jiangxinj ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

  • Go to Online Store->Theme->Edit code
  • Asset->component-card.css
  • Paste the below code at the bottom of the file
.card.card--standard.card--media {

 border: solid gray 0.3rem;

 border-radius: 1rem;

}

.card.card--standard.card--media img {

  border-top-left-radius: 1rem;

  border-top-right-radius: 1rem;

}

PageFlyVictor_0-1671074549696.png
PageFlyVictor_0-1671074549696.png1366×768 249 KB

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

7

It worked! Thank you so much!!! :smiley:

8

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team