Variant limit to first size available

Store Design
, , ,

Topic summary

A user is working with Shopify Liquid code to display product variants on a collection page. They want each color variant to appear as a separate product listing, but only show the first available size variant for each color—not every size as its own product.

Initial Problem:

  • The existing loop displays both color AND size variants as independent products
  • Goal: limit display to only the first available size per color variant

Solution Attempts:

  • EBOOST provided multiple code snippets attempting to filter variants by checking for Color/Colour options and adding availability conditions
  • The user confirmed one solution worked for displaying colors correctly

Current Issue:

  • The working code successfully shows color variants separately
  • However, it’s not properly selecting the size variant, resulting in missing price information for the displayed products

Status: The discussion remains open with a partial solution implemented. The code now correctly filters color variants but needs refinement to properly handle size variant selection and display associated pricing data.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Need to limit the limit of the loop to display only first size variant available keeping the following loop that shows each color variant as independent product. The code works really well but keeps showing sizes as independent product too so need to limit to show only the first avialable size variant.

{%- if collection.products.size > 0 -%} {% for product in collection.products %} {% assign color_active = true %} {% for option in product.options %} {% if option == 'Color' or option == "Colour" %} {% assign color_active = true %} {% endif %} {% endfor %} {% assign size_active = false %} {% if product.variants.size > 1 and color_active == true %} {% for option in product.options %} {% if option == 'Color' or option == "Colour" %} {% assign index = forloop.index0 %} {% assign colorlist = '' %} {% assign color = '' %} {% assign color_scheme = '' %} {% for variant in product.variants offset:0 limit:8 %} {% capture color %} {{ variant.options[index] }} {% endcapture %}

{% unless colorlist contains color %}

{%- include 'product-grid-item-variant' -%}
{% capture tempList %} {{colorlist | append: color | append: " " }} {% endcapture %} {% assign colorlist = tempList %} {% endunless %} {% endfor %} {% endif %} {% endfor %} {% else %}
{%- include 'product-grid-item' -%}
{% endif %} {%- endfor -%}
2

Hi @Asepul ,

May I suggest you code below:


    {%- if collection.products.size > 0 -%}
	    {% for product in collection.products %}
	      {% assign color_active = false %}
	      {%  if product.options contains "Color"  or product.options contains "Colour" or product.options contains "colour" or product.options contains "color" %}
	       {% assign color_active = true %}
	      {%  endif %}
	      {% if color_active == false %}
		      {%  if product.options contains "Size"  or product.options contains "size" %}
		       {% assign color_active = true %}
		      {%  endif %}
	      {%  endif %}
		    {% if product.variants.size > 1 and color_active == true %}
		    	{% assign flag = false %}
			    {% for option in product.options %}
			    	{% assign optionDownCase = option | downcase %}
			    	{% if flag == false %}
					    {% if optionDownCase == 'color' or optionDownCase == "colour" or optionDownCase == "size" %}
					    	{% assign flag = true %}
						    {% assign index = forloop.index0 %}
						    {% assign colorlist = '' %}
						    {% assign color = '' %}
						    {% assign color_scheme = '' %}
						    {% for variant in product.variants offset:0 limit:8 %}
							    {% capture color %}
							    	{{ variant.options[index] }}
							    {% endcapture %}
							    {% unless colorlist contains color %}
								    

										{%- include 'product-grid-item-variant' -%}
									

								    {% capture tempList %}
								    	{{colorlist | append: color | append: " " }}
								    {% endcapture %}
							    	{% assign colorlist = tempList %}
							    {% endunless %}
						    {% endfor %}
					    {% endif %}
				    {% endif %}
			    {% endfor %}
		    {% else %}
			    
					{%- include 'product-grid-item' -%}
				

		    {% endif %}
	    {%- endfor -%}
    {% endif %}
3

Thank you, keep showing all the sizes as independent. Need to only show each color as independent but not the sizes

4

Hi @Asepul ,

You can try code below:


    {%- if collection.products.size > 0 -%}
      {% for product in collection.products %}
        {% assign color_active = false %}
        {%  if product.options contains "Color"  or product.options contains "Colour" or product.options contains "colour" or product.options contains "color" %}
         {% assign color_active = true %}
        {%  endif %}
        
        {% if product.variants.size > 1 and color_active == true %}
          {% assign flag = false %}
          {% for option in product.options %}
            {% assign optionDownCase = option | downcase %}
            {% if flag == false %}
              {% if optionDownCase == 'color' or optionDownCase == "colour"  %}
                {% assign flag = true %}
                {% assign index = forloop.index0 %}
                {% assign colorlist = '' %}
                {% assign color = '' %}
                {% assign color_scheme = '' %}
                {% for variant in product.variants offset:0 limit:8 %}
                  {% if variant.available %}
                    {% capture color %}
                      {{ variant.options[index] }}
                    {% endcapture %}
                    {% unless colorlist contains color %}
                      

                      {%- include 'product-grid-item-variant' -%}
                    

                      {% capture tempList %}
                        {{colorlist | append: color | append: " " }}
                      {% endcapture %}
                      {% assign colorlist = tempList %}
                    {% endunless %}
                  {% endif %}  
                {% endfor %}
              {% endif %}
            {% endif %}
          {% endfor %}
        {% else %}
          
          {%- include 'product-grid-item' -%}
        

        {% endif %}
      {%- endfor -%}
    {% endif %}

EBOOST_0-1715221629348.png
EBOOST_0-1715221629348.png1014×526 32.5 KB

5

It didn´t work but this one did:

{%- if collection.products.size > 0 -%} {% assign color_option_index = 0 %} {% assign size_option_index = 0 %} {% for product in collection.products %} {% assign color_active = false %} {% assign size_active = false %} {% for option in product.options %} {% if option == 'Color' or option == "Colour" %} {% assign color_active = true %} {% assign color_option_index = forloop.index0 %} {% elsif option == 'Size' %} {% assign size_active = true %} {% assign size_option_index = forloop.index0 %} {% endif %} {% endfor %} {% if color_active and size_active %} {% assign colorlist = '' %} {% for variant in product.variants %} {% capture color %} {{ variant.options[color_option_index] }} {% endcapture %} {% unless colorlist contains color %} {% assign colorlist = colorlist | append: color | append: " " %}
{%- include 'product-grid-item-variant' variant: variant -%}

Color: {{ color }}

{% endunless %} {% endfor %} {% else %}
{%- include 'product-grid-item' -%}
{% endif %} {%- endfor -%} {%- else -%}

{{ 'collections.general.empty' | t }}

{{ 'collections.general.sort_result' | t }}

{%- endif -%}

Now the issue is that is not selecting the size variant and it´s not displaying the price information