Help adding border radius to collection product card

Store Design
, , , , ,

Topic summary

A user needed help adding border-radius to collection product cards on their Shopify store to create rounded corners.

Solution provided:

  • Navigate to Shopify Admin → Online Store → Theme → Edit code
  • Locate the theme.liquid file
  • Insert custom CSS code above the </head> tag targeting the product card elements
  • The CSS successfully rounded the card corners

Follow-up issue:
After implementing the border-radius, a gray background appeared on the cards.

Additional fix:
A second CSS snippet was provided to remove the unwanted gray background by setting background: transparent on the .card__inner element.

Status: Resolved. Both customizations were successfully implemented and confirmed working by the original poster.

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

Hi @INKLY ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1720779326820.png
BSSCommerceHDL_0-1720779326820.png1402×493 176 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like