Reading swatch data in Liquid

Read swatch data straight from product.metafields.pl_swatches.groups to render swatches your own way. The metafield exposes the same data the default widget uses, so you can build custom layouts, alternative markup, or theme-specific styling without losing parity.

Note

Enable public metafields first. Without that setting, the metafield isn’t populated and groups will be nil.

The basic pattern

{%- assign groups = product.metafields.pl_swatches.groups.value -%}

{%- if groups -%}
  {%- for group in groups -%}
    <div class="my-swatch-group">
      <span class="label">{{ group.option_name }}</span>
      <ul>
        {%- for swatch in group.swatches -%}
          <li>
            <a href="{{ product.url | replace: product.handle, swatch.handle }}">
              {{ swatch.name }}
            </a>
          </li>
        {%- endfor -%}
      </ul>
    </div>
  {%- endfor -%}
{%- endif -%}

groups is an array because a product can belong to several groups at once (for example, a Color group and a Size group). Each group carries its own option_name and swatches list.

Swatch fields

Each entry in group.swatches has these fields:

Field	What it is
handle	Shopify handle of the linked product
name	Display name (e.g. “Black”, “Navy”)
type	one_color, two_colors, custom_image, product_image, image_with_text, or pill
color_one	Hex color (when type is one_color or two_colors)
color_two	Second hex color (when type is two_colors)
image	Image URL (when type is custom_image or image_with_text)
out_of_stock	true or false

Detecting the active swatch

The active swatch is the one whose handle matches the current product:

{%- for swatch in group.swatches -%}
  {%- if swatch.handle == product.handle -%}
    <span class="current">{{ swatch.name }}</span>
  {%- else -%}
    <a href="{{ product.url | replace: product.handle, swatch.handle }}">
      {{ swatch.name }}
    </a>
  {%- endif -%}
{%- endfor -%}