Swatches

---

Swatches are visual representations of product variants (e.g., colors), helping customers quickly understand and select options. They enhance the shopping experience by updating product images instantly and creating a more interactive, visually appealing interface.

I. How to Add Color Swatches (Using Category Metafields)

1. Step 1: Assign a Product Category

In Shopify admin, assign a category that supports color metafields (e.g., Apparel & Accessories → Clothing → Shirts).

2. Step 2: Connect Color Metafields

Click the dynamic source icon (⛁) to link the Color field to the category metafield. You can add custom values via Edit → Add new entry → Save.

3. Step 3: Apply to Store

Once configured, swatches will appear across product cards and product pages. Customize via: Theme Editor → Theme settings → Swatches

II. Swatch Settings in Theme

1. Swatch display options

• Show swatches: Enable/disable swatches on product cards and product pages.

• Swatch type:

  • Color: Displays a color swatch for each variant.

  • Native: Uses the variant image (if available) instead of a color.

• Product card swatch shape: Defines the shape of swatches on collection grids: Square, Circle or Rectangle.

• Hide swatches when only one option exists: Automatically hides swatches if the product has only one variant.

2. Product card settings

• Maximum swatches on product cards: Limits the number of swatches displayed on product cards from 2 to 10 to maintain a clean layout.