How can I give product images rounded corners in a custom theme?

Store Design

Topic summary

A user seeks help adding rounded corners to product images in their custom theme (developed by Dawn).

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add CSS code at the bottom:
.product-image img {
  border-radius: 30px;
}

For collection images specifically:

.zi-banner-image {
  border-radius: 30px;
}

The solution successfully applies rounded corners to both product grid images on the homepage and collection images. The helper includes visual examples showing the before/after results and requests marking the post as a solution if helpful. An additional video tutorial link is also shared as a resource.

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

Thank you for your assist that worked a treat

1 Like