Color Swatches

Replace boring dropdown menus with visual color circles or squares.

1. Appearance

• Shape: Choose between Circle, Square, or Rounded Square.
• Type:
  • Color Block: Shows the color.
  • Dropdown: Shows a text list (classic style).

2. How to Set Colors

There are two ways to tell the theme what "Navy Blue" looks like.

Method A: Standard Colors (Easiest)

The theme automatically recognizes standard names like "Red", "Blue", "Black", "White", etc. You don't need to do anything!

Method B: Custom Images (Best for Patterns)

If you have a specific pattern (like "Leopard Print") or a unique shade (like "Rose Gold"):

1. Create a small PNG image (approx 50x50px) of the pattern.
2. Name it exactly like your color option, but in lowercase with hyphens.
   • Example: Rose Gold -> rose-gold.png
   • Example: Navy Blue -> navy-blue.png
3. Upload this image to Content > Files in your Shopify Admin.
4. The theme will automatically find it and use it as the swatch.

3. Hover Effect

• Hover to switch image: When a customer hovers over a color swatch on the collection page, the product image will instantly switch to show that color variant.