filter_value_swatch

filter_value.swatch returns this object only when the parent filter uses a swatch presentation and the value has a valid color or pattern assignment. Otherwise it returns nil.

Example

{% assign swatch = value.swatch %}
{% if swatch %}
  <span class="swatch" aria-label="{{ value.label | escape }}">
    {% if swatch.image %}
      {{ swatch.image | image_url: width: 48 | image_tag: alt: value.label }}
    {% elsif swatch.color %}
      <span style="background-color: {{ swatch.color }}"></span>
    {% endif %}
  </span>
{% endif %}

Pattern images are exposed through both image and pattern_url. Use image with image_url and image_tag when rendering responsive storefront markup.

Properties

Property	Description
filter_value_swatch.color	Primary swatch color, or nil.
filter_value_swatch.colors	All configured swatch colors in display order.
filter_value_swatch.image	Pattern image, or nil.
filter_value_swatch.pattern_url	Pattern image URL, or nil.
filter_value_swatch.type	Swatch composition: single, dual, triple, or pattern.

Property list is generated from the storefront engine (FilterValueSwatchDrop), so it always matches what your theme can use. Use {{ value.swatch | json }} only as a curated debug snapshot; it can omit lazy or otherwise public properties.