Open Appearance in Color Swatches. Use Product groups for swatches connecting separate products, or Variant swatches for choices within one Shopify product. Collection-card controls are in the Collection swatches section of Product groups.
These settings change how swatches look. To change the actual color, pattern, or product image used by a swatch, follow Change swatch colors, images, and patterns.
Open Appearance > Product groups.
Under General, choose Image / Color swatch style for visual swatches or Pill / Button swatch style for text buttons.
Under Product swatches, enter the Size in pixels. To make rectangular swatches, enable Use custom height and enter a Height.
Select Save.
Under Product swatches > Advanced, use Margin top and Margin bottom to adjust space around the widget. Set Alignment (mobile) and Alignment (desktop) separately if needed, then save.
Under Product swatches, enable Show label to display a heading above the swatches. The Label field supports:
{{option_name}} for the group's option name, such as Color.
{{current_value}} for the selected swatch name, such as Black.
For example, {{option_name}}: {{current_value}} displays Color: Black. Use {{option_name}} alone if you want only Color for product groups.
Under General, use Tooltip behavior to choose where swatch names appear on hover. Make sure the products in the group have swatch names to display. Select Save after changing these settings.
Open Appearance > Variant swatches. Find the section for the style your option uses and adjust its controls:
Section | Main controls |
|---|---|
Button swatches | Shape, Font size, Vertical padding, Horizontal padding, and Minimum width. |
Color or image swatches | Shape, Size, Use custom height, Height, and Image fit. |
Variant image swatches | Use the color/image settings, or turn off Use same settings as color or image swatches to set a separate appearance. |
Enable Hide current value in label in the relevant section to show only the option name, such as Color, instead of Color: Black. Then select Save.
If changing the variant-image controls has no effect, check whether Use same settings as color or image swatches is still enabled.
Open Appearance > Variant swatches.
Under General, reduce Gap between swatches to bring choices closer together, or increase it for more space.
Select Save.
Gap between swatches applies to button, color/image, and variant-image swatches. It controls the space between choices. Changing image size or margins around the widget is a separate adjustment.
Use Image fit in the relevant appearance section:
Contain keeps the whole image visible. It can leave empty space around the image.
Cover fills the swatch and can crop the edges.
If white space is part of the original image, you may need a more closely cropped image. Changing image fit does not remove an image's background.
Open Appearance > Product groups > Collection swatches. This is separate from product-page sizing.
Use Display to choose Swatches or Count only.
Adjust Size, or use Use custom height for a rectangular shape.
Set Swatches limit (desktop) and Swatches limit (mobile) to control how many choices fit on a card.
Enable Show hidden swatches count if you want an indicator for additional choices.
Use the section's Advanced controls for margins and desktop/mobile alignment.
Select Save, then check a collection page at both desktop and mobile widths. If swatches do not appear at all, follow Show swatches on collection pages.
There is no dedicated border-width or border-color control in the appearance forms. Product-group sections include Advanced > Custom CSS. If you need help with a border, label font, or spacing that the controls do not cover, send support the page URL and an example of the appearance you want.
