add border radius

Store Design

Topic summary

A user seeks help adding border radius to images on specific sections of their Shopify store (ateliercharisma.com). Two screenshots are provided showing the current image display.

Proposed Solutions:

  • Solution 1: Add CSS code to the theme.liquid file targeting .product-card__image with border-radius: 12px and additional object-fit properties

  • Solution 2: Insert CSS into the theme.css file targeting .featured-collections-carousel__item.is-selected .object-cover with border-radius: 20px !important

Both responses provide CSS snippets but target different elements, suggesting the solutions may address different image sections on the site. The discussion remains open with no confirmation from the original poster about which solution worked or if the issue is resolved.

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

Hi everyone,

How can i add border radius to the images on the following sections?

URL is www.ateliercharisma.com

Image 19-11-2024 at 11.12 (1).jpeg
Image 19-11-2024 at 11.12 (1).jpeg1788×1084 53.8 KB

Image 19-11-2024 at 11.12.jpeg
Image 19-11-2024 at 11.12.jpeg2148×1296 170 KB

2

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Open your theme.liquid file
  4. Add the following code in the bottom
#img.product-card__image.product-card__image--primary.object-cover.aspect-square{
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

Thanks!

3

Hello @JarnoBroekkamp

Go to the setting> Theme> Edit code> Choose Theme.css > Paste below the code

.featured-collections-carousel__item.is-selected .object-cover {
    border-radius: 20px !important;
}