Open Swatchfy → Appearance. Everything here is visual only — it never changes which swatches appear or what they do.
They are different surfaces with different needs: a 44px circle that reads well beside an add-to-cart button is too heavy in a collection grid.
Pick the surface at the top of the page, then style it. If you want them to match, use Copy from product card rather than setting the same numbers twice.
Shape and size — circle or square, corner rounding, the swatch's own size
Borders and background — including the selected and hover states
The box around a text swatch — corner shape, padding, colours, font size
Spacing between swatches and between rows
Out-of-stock display — how a value that cannot be bought is shown
Tooltip — whether the value's name appears on hover
The preview is a sketch, not your theme. It shows the swatch row, its order and its shape so you can judge the settings quickly. It does not use your theme's fonts, colours or spacing, so do not treat a difference between the preview and your storefront as a bug.
Check the real thing on a product page once the settings look close.
If you use image swatches, upload the images at at least twice the size you display them — a 66px swatch wants an image 180px wide or more. The app already requests a larger version from Shopify for sharp screens, but it cannot add detail that was never in the file.
