Customize Styles
Match swatches to your brand by adjusting colors, borders, sizes, and hover effects.
What You Can Customize
Each swatch style (Rounded, Square, Pill, etc.) has its own settings:
- Selected state — How the chosen swatch looks (border, background)
- Deselected state — How unselected swatches look
- Hover state — What happens when customers hover
- Sizes — Width and height of swatches
- Colors — Borders, fills, text
How to Customize
- Go to Customize Styles (or Appearance → Customize for a specific type)
- Pick the swatch type from the tabs (Rounded, Square, Pill, etc.)
- Change the settings in the panels
- Use the Preview to see your changes
- Click Save
What You Can Adjust by Style
| Style | Main options |
|---|---|
| Rounded / Square | Border color and width, swatch size, hover effect |
| Image | Border, image fit (cover/contain), size |
| Pill / Rectangle | Container style, text color and size, color swatch inside |
| Buttons | Background, text color, border, hover and selected states |
| Dropdown | Trigger style, list styling |
Changes apply to all products that use that swatch style.
Related
- Appearance — Choose default styles
- Product Options Settings — Assign styles to options