How to add corner radius to product images in featured collections

[Perspectry]

Hello Shopify community, 

I'm using the Habitat theme for my shopify store. 

I'm trying to figure out how to give the images in the "featured collections" area a radius. Right now they are perfectly square and I'd like to give them a radius to make them come across a little softer. 

Any help would be greatly appreciated!

Thanks in advance.

[Team_OSC · Accepted solution]

1. open customization

2. Go to featured collection section 

3. Go to custom CSS

4. add this code

.product-card .product-featured-image-link {
  border-radius: 8px;
}

5. Save it and refresh the website

You can the border radius according to what you want to set where i gave 8px. You can change this.

[vpsbohra]

Hi @Perspectry 

Can you please share store URL?

[Perspectry]

Hello,

the store url is - https://perspectry.com.au/

[Team_OSC · Accepted solution]

1. open customization

2. Go to featured collection section 

3. Go to custom CSS

4. add this code

.product-card .product-featured-image-link {
  border-radius: 8px;
}

5. Save it and refresh the website

You can the border radius according to what you want to set where i gave 8px. You can change this.

[Perspectry]

This worked an absolute treat, thank you so much!! 

[BAGELS1998]

How can I do this on a "Featured product" section? I'm using the theme called "Fame"

[Anshul_arora · Accepted solution]

Hello @Perspectry ,

As per my understanding you are looking to provide rounded corners to your store product images.

You can implement this change by adding the below mentioned code.

Please follow the following steps for adding the code.

1. Go to Online Store -> Themes -> Click on Three dots(Action) -> Edit code.

2. Search for the theme.liquid file and open it.

3. Next add the below mentioned code at the bottom of the theme.liquid file before </body> tag.

<style>
a.product-featured-image-link.aspect-ratio.aspect-ratio--square {
border-radius: 25px;
}

</style>

4. Save.

After implementing code, output will like this -> https://prnt.sc/1bYF7RF7zLe9

I hope the code helps you.

Please let me know if you have any query or need further assistance.

Thank you.

[Perspectry]

Thanks so much for your help!! greatly appreciated !!