Edit image border radius for specific collection list on landing page Boost theme

Technical Q&A

Topic summary

A user needs to override the Boost theme’s default rounded corners to make image borders square for a specific collection list (“Shop by Character” section) on their landing page.

Solution provided:

  • Add custom CSS code to remove border radius
  • Navigate to: Online Store > Themes > Edit code > Assets > custom.css
  • Insert CSS targeting .product-block.hover-images with border-radius: 0;

Status: Resolved - the original poster confirmed the solution worked successfully.

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

My Boost theme rounds all of my corners automatically but I want to make them square again for a specific collection list on my landing page. I’ve tried using the custom css section to no avail. Can someone help me with the proper code for this? My store is https://huggabuddies.com/. The collection list I want to square is the “Shop by Character” section. Thanks!

2

HI,

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

.product-block .hover-images {     border-radius: 0;
}
3

Can’t thank you enough!