Adding product colours to collection page

Store Design
1

Hello!

Screenshot 2023-08-06 at 13.37.59.png
Screenshot 2023-08-06 at 13.37.59.png2412×714 359 KB

I’d like to add the colour of the item to the collection page. I’ve attached a screenshot with a red oval where I’d like the colour to show. E.g. ‘Teal’

Thanks!

2

Hello @Posibl

Glad to help you today…

Can you tell me if you have mentioned the text Teal somewhere in the product page, for eg: Metafield or variant etc…???

Let me know.

Thanks

3

Hi!

It’s in the variant

Thank you!

4

Hello @Posibl ,

It needs customization.
Well if you are good with code you can follow this code and use a/to your needs.

{%- assign size_swatch_list = '' -%}
{%- assign length_swatch_list = '' -%}

{%- assign size_label = 'color,Color,COLOR' | split: ',' -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}

{%- for option in product.options_with_values -%}
	{%- assign downcased_option = option.name | downcase -%}

	{%- if size_label contains downcased_option -%}
		{%- assign variant_option = 'option' | append: forloop.index -%}

		{%- for value in option.values -%}
			{%- assign downcased_value = value | downcase -%}
			{%- capture size_id -%}{{ section.id }}-{{ product.id }}-{{ forloop.index }}{%- endcapture -%}

              {%- for variant in product.variants -%}
                {%- if variant[variant_option] == value -%}
                  {%- assign variant_for_value = variant -%}
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
			{%- if variant_for_value -%}
				{{ variant_for_value }}
			{%- endif -%}

		{%- endfor -%}

    {%- endif -%}

{%- endfor -%}

{% assign variantCount = product.variants | Size %}
{% assign variantlength = product.variants | length %}
{% if product.available and variantCount > 0 %}
  
  {% for option in product.options %}
      {% assign is_size = false %}
      {% assign downcased_option = option | downcase %}

    {% if downcased_option contains 'size' %}
        {% assign option_index = forloop.index0 %}
        {% assign option_count = 0 %}
        {% assign values = '' %}

      {% for variant in product.variants %}
          {% assign value = variant.options[option_index] %}
        {% unless values contains value %}

          {% if option_count > 0 %}
              {% assign values = values | join: '|' | append: '|' %}
          {% endif %}

            {% assign values = values | append: value %}
            {% assign values = values | split: '|' | sort %}
            {% assign option_count = values | size %}

          
            {% if option_count <= 6 %}
            

            
            {{ value }}
            
            {% assign option_count = option_count | plus : 1 %}
            

            {% endif %}
          

        {% endunless %}
      {% endfor %}

    {% endif %}

  {% endfor %}
  

{% endif %}

Thanks

5

Hi @Posibl

What if the product have more than 1 variant colours??? Do you want to show all of theme??

Thanks

6

Hi, I want to show just the first variant colour on the collection page. And then when you click onto the item, you will see the other variants. Is that possible? Thanks!

7

Hello! I think this might be too complex for me, but I will take a look. Thank you!