How to add corner radius to product images in featured collections

Store Design

Topic summary

A user working with the Habitat theme wants to add rounded corners (border-radius) to product images in their featured collections section, which currently appear as perfect squares.

Solutions Provided:

Two working approaches were shared:

  1. Via Theme Customizer (simpler):

    • Navigate to featured collection section settings
    • Add CSS code in the custom CSS field:
    .product-card .product-featured-image-link {
  border-radius: 8px;
}
    • Adjust the pixel value (8px) as desired

  2. Via theme.liquid file (alternative):

    • Edit code in Online Store → Themes
    • Add CSS targeting .product-featured-image-link.aspect-ratio.aspect-ratio--square with border-radius: 25px; before the closing </body> tag

Outcome:
The original poster confirmed the solution worked successfully. A follow-up question emerged about applying similar styling to a “Featured product” section in the Fame theme, which remains unanswered.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

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.

Perspectry_0-1700823759406.png
Perspectry_0-1700823759406.png1706×610 124 KB

Any help would be greatly appreciated!

Thanks in advance.

2

Hi @Perspectry

Can you please share store URL?

3

Hello,

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

4

  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;
}
  1. 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.

Screenshot 2023-11-24 173659.png
Screenshot 2023-11-24 173659.png1922×948 327 KB

5

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 tag.

a.product-featured-image-link.aspect-ratio.aspect-ratio--square { border-radius: 25px; }
  1. 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.

6

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

7

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

8

How can I do this on a “Featured product” section? I’m using the theme called “Fame”