Color Swatch Setting

Color Swatch Setting

This feature allows you to display color swatches (visual representations of colors) for products with color options, instead of just displaying the color names as text.
product-with-color-options
Configuring Color Swatches on Product Page:
  1. Under the Product Information Settings, then go to Theme Settings > add information for swatch.
  2. For each color option you want to display as a swatch:
    1. In the Label field, enter the exact name of the color option as it appears in your product variants (e.g., "Color," "Colour").
    2. In the Swatches field, enter the corresponding color code (e.g., White: #FFFFFF).


Configuring Color Swatches on Collection Page:
  1. In the Theme Editor, click on Theme Settings.
  2. Enter the color swatch information as above. For example: Swatches Label: Color; Swatches: White: #FFFFFF.

Note:
  1. Label: The "Label" must match the option name in your product's variant.
  2. Swatches: The "Swatches" are the different values for that color option in your product's variant (e.g., "Red", "Blue", "Green").