Swatches

Theme settings – Swatches

Swatches are visual indicators of product variants, enhancing user experience by: providing instant feedback by updating the main product image when a swatch is selected and improving page aesthetics with an interactive color selection component.

1. Adding Color swatches using category metafields

• Assign a product category

  • Navigate to the Category section and select an applicable category, such as Apparel & Accessories > Clothing > Clothing Tops > Shirts or any category supporting the color metafield.

  
• Connect category metafields for color

  • Click the dynamic source icon ⛁ to link the category metafield to Color.

  • To add custom option values, click Edit > Add new entry, complete the fields, and click Save.

  
• Apply color swatches to your online store:

  • Once configured, swatches will be available across relevant product displays.

2. Swatch settings:

Customization options:

• Type: Defines swatch display method: Color – Shows variant color; Native – Displays an image if assigned to the variant.

• Ratio: Determines swatch shape: Square (1:1), Landscape (4:3), Portrait (3:4), Circle

• Style: Controls corner radius for a refined look.