Change product variation swatch shape from sharp edges to round edges

Store Design

Topic summary

A user wanted to modify product variation swatches to have rounded edges (15px border-radius) instead of sharp corners, matching the styling of their subscribe & save box.

Solution Provided:

  • Add custom CSS code to the theme.liquid file before the closing </body> tag
  • The CSS targets the variation swatch elements to apply rounded corners

Outcome:

  • The solution was successfully implemented
  • The user confirmed it worked as intended

The discussion includes before/after screenshots showing the visual transformation of the swatches from sharp to rounded edges.

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

Hi!

I want to make my product variation swatch shape have round edges (15px) like the subscribe & save box.

Thanks in advance

Picture:

Screenshot 2025-02-15 at 14.41.13.png
Screenshot 2025-02-15 at 14.41.13.png818×680 37.1 KB

Site: https://wr5sym-yi.myshopify.com/products/carnosport

1 Like
2

Hi @Rixxrd ,
Go to your theme.liquid file and add the following code at the end of it before the tag:

Result:

Abdosamer_0-1739625692406.png
Abdosamer_0-1739625692406.png578×527 22.2 KB

1 Like
3

This worked, thank you so much!

1 Like