I've been trying to add the colour swatches from a product variant on the collection pages in Shopify- enabling in theme settings does not work. so its clearly not coded into the liquid files.
I tried adding:
{% render 'collection_swatch' %}
to the product-loop.liquid file - right under the thumbnail. where it should appear, and this does not work.
Oddly, it does show up on featured items on home page, but not on any collection pages.
the contents of the collection_swatch snippet appear to be correct:
{% if settings.collection_swatches %}
{%- assign file_extension = 'png' -%}
{% for option in product.options %}
{%- assign downcased_option = option | downcase -%}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
<div class="collection_swatches">
{% for variant in product.variants %}
{%- assign value = variant.options[option_index] -%}
{% unless values contains value %}
{%- assign values = values | join: ',' -%}
{%- assign values = values | append: ',' | append: value -%}
{%- assign values = values | split: ',' -%}
<a href="{{ variant.url | within: collection }}" class="swatch" data-swatch-name="meta-{{ downcased_option }}_{{ value | replace: ' ', '_' | downcase }}">
<span {% if section.settings.products_per_row == 2 %}data-image="{{ variant.featured_image | product_img_url: '600x' }}"{% elsif section.settings.products_per_row == 3 %}data-image="{{ variant.featured_image | product_img_url: '500x' }}"{% else %}data-image="{{ variant.featured_image | product_img_url: '400x' }}"{% endif %} style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' | prepend: 'https:' }}); background-color: {{ value | split: ' ' | last | handle }};">
</span>
</a>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% endfor %} {% endif %}
So the swatches do appear in other places, but not on the collection pages. Any thoughts would be appreciated, thanks!