0

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!

M21
  • 343
  • 3
  • 14
  • Did you already look at what packages are being included in the Home view/controller that are missing from the collections? – microsaurus_dex Jan 09 '23 at 22:49
  • Have you tried debugging the output? Which value is null? – TwistedOwl Jan 10 '23 at 13:03
  • I am somewhat new to shopify - very familiar with other platforms like BigCommerce. But I will look into the debugging. and @microsaurus_dex, yes I found the render code for "collection swatch" and tried including it on the template that is showing the products on the collection pages, but this did not work. – M21 Jan 11 '23 at 20:10

0 Answers0