Showing Product Variants Color On Collection Page - Excluding Sizes

[Kher]

Hi All,

I'm currently trying to adapt the theme of my store to show case all product variant COLORS only. I've managed to create the loop and show case the variant but I'm running into an issue where ALL the variants (colors and sizes) are showing.

For example : on a T)SHIRT the product is set up with 5 COLOR variant and 5 SIZE variant. So what ends up happening at the moment is I get 10 of the same colored tshirt .

What I'm trying to do is only show the 5 color variant only and skip the sizes.

On my Collection section I've been using the following code with my product loop:

{%- for product in collection.products -%}
          {% comment %}
            {%- liquid
              if forloop.index <= 2
                assign preload = true
              else
                assign preload = false
              endif
              render 'product-item', product: product, product_collection: collection, section_blocks: section.blocks, index: forloop.index, layout: section.settings.layout
            -%}
          {% endcomment %}
          {% for option in product.options %}
            {% if option == 'Color' %}
              {% assign index = forloop.index0 %}
              {% assign colorlist = '' %}
              {% assign color = '' %}
              {% for variant in product.variants %}
                {% capture color %}
   {{ variant.options[index] }}
   {% endcapture %}
                {% unless colorlist contains color %}
                 {% render 'product-item',
                    product: product,
                    product_collection: collection,
                    title: product.title,
                    section_blocks: section.blocks,
                    index: forloop.index,
                    layout: section.settings.layout
                  %}
                  {% capture tempList %}
      {{colorlist | append: color | append: " " }}
      {% endcapture %}
                  {% assign colorlist = tempList %}
                {% endunless %}
              {% endfor %}
            {% endif %}
          {% endfor %}

and on my product snippet I've added (highlighting in red the code I've just added) (sharing a section of it due to how long the code is)

{%- assign product_variant = product.options_by_name.Color.values %}
   {% for variant in product.variants %}
  <div id="product-item-{{ variant.id }}" class="product-item card" data-js-product-item>
    {%- liquid
      if settings.product_card_aspect_ratio == 'natural'
        if product.media.size == 0 or blank_product
          assign aspect_ratio = 1
        else
          unless product.featured_media.aspect_ratio > 0
            assign aspect_ratio = 1
          else
            assign aspect_ratio = product.featured_media.aspect_ratio
          endunless
        endif
      else
        assign aspect_ratio = settings.product_card_aspect_ratio
      endif

      if settings.within_filter_enabled and product_collection
        assign product_url = variant.url | within: product_collection
      else
        assign product_url = variant.url
      endif
    -%}

    <a
      href="{{ product.url | within: collection }}?variant={{ variant.id }}"
      class="
        card__image product-item__image
        {% if section_blocks.size == 0 %} product-item__image--no-text {% endif %}
        {% if settings.product_card_show_secondary_image and product.media.size >= 2 %} product-item__image--has-secondary {% endif %}
      "
      style="padding-top:{{ 100 | divided_by: aspect_ratio }}%"
    >
             if product.media.size == 0 or blank_product
          echo 'image' | placeholder_svg_tag

        else
          render 'lazy-image', image: variant.image.src, alt: product.title, ratio: aspect_ratio, fit: settings.product_card_aspect_ratio_fit, type: 'background', class: 'product-item__image-figure product-item__image-figure--primary lazy-image--animation', sizes: sizes, preload: preload
endif

 </div>
{% endfor %}

Does any one have any idea if there's something I'm missing ?

[tim]

You do a bit more loops then needed.

I'd approach it like this(some typos may be possible):

collection section:

{%- for product in collection.products -%}
  {% assign color_option = product.options_by_name['color'] %}
  {% for color_value in color_option.values %}
    {% render 'product-item',
      product: product,
      product_collection: collection,
      title: product.title,
      section_blocks: section.blocks,
      index: forloop.index,
      layout: section.settings.layout,

      color_index: color_option.position
      color: color_value
    %}
  {% else  %}
    {% render 'product-item',
      product: product,
      product_collection: collection,
      title: product.title,
      section_blocks: section.blocks,
      index: forloop.index,
      layout: section.settings.layout
    %}
  {% endfor %}
{% endfor %}

Snippet idea:

{% liquid
  assign image = product.featured_image
  assign url = product.url

  if color_index and color
    assign property = "option" | append: color_index
    assign color_variants = product.variant | where: property, color
    assign with_images = color_variants | where: image
    if with_images.size > 0
      assign image = with_images[0].image
      assign url = with_images[0].url
    else
      assign url = color_variants[0].url
    endif
  endif
%}

<div id="product-item-{{ variant.id }}" class="product-item card" data-js-product-item>
  . . .
</div>

I'd also be careful with product card item id -- it may be used somewhere in JS, so need an extra check for this.