Developers guide

Styles customization

For more advanced design customization you can use custom CSS fields for both product and collection widget. They're available in Appearance settings under Advanced link.

Accessing metafields

To perform deep customizations you might need to access app metafields directly. Example use cases:

• Building custom swatches widget
• Using swatches data in product schema (for SEO)

Our metafields are published under app--4638357--pl_swatches.groups key on Product resource. You can read them in Liquid:

{%- assign groups = product.metafields["app--4638357--pl_swatches"].groups.value -%}

{%- if groups -%}
  {%- for group in groups -%}
    {% for option in group.swatches %}
      {%- assign url = product.url | url_decode | replace: product.handle, option.handle | strip -%}
    
      <a href="{{ url }}">
        {{ option.name }}
        {%- if product.handle == option.handle -%}
          (current)
        {%- endif -%}
      </a>
    {%- endfor -%}
  {%- endfor -%}
{%- endif -%}