hi, i only want to display one image as circular on my home page. where do I add the css for image with text. https://jywpmw3p3haxgc49-49960190121.shopifypreview.com
Topic summary
Goal: make product and collection images circular in Shopify’s Debut theme using CSS.
Core solution: add CSS border-radius: 50% to image selectors. This rounds corners into a circle (if the image container is square). Use class selectors to target specific images.
Suggested selectors:
- Grid view: .grid-view-item__image-wrapper .grid-view-item__image { border-radius: 50%; }
- Collection/product listing: .grid-view-item__image { border-radius: 50%; }
- Product page featured image: .product-featured-img { border-radius: 50%; }
- All images: img { border-radius: 50%; }
- Exclude certain images: img:not(.class-name) { border-radius: 50%; }
Implementation location: Online Store → Customize (theme) → select the section with the image → scroll to “Custom CSS” and paste the code.
Confirmed outcome: circular styling works for the OP.
Open questions: removing or making the gray square overlay on home page collection tiles circular; targeting a single home page image; how to find the exact class name for a given image. A screenshot was provided to illustrate the gray overlay issue.
Resources: a YouTube tutorial link was shared for a theme-agnostic approach.
Status: partially resolved (circular images working); overlay styling and specific targeting remain open.