Color swatches on product detail page debut theme

Shopify Discussion
1

Hello All,

I am working on to display colour swatches on product detail page.

I have applied solution and its working fine when all options are available(in-stock variants), but when some of variants are not available(out of stock) at that time its not working proper.

Here I am sharing with you “swatch.liquid” file code , Please look into it and help me where I have to change the code.

Please help me in this asap.
Note : I am using two option Size and Colour here.

Ankit_Jayswal_0-1691577123610.png
Ankit_Jayswal_0-1691577123610.png400×214 17.5 KB

{% if swatch == blank %}
  
    

You must include the snippet swatch.liquid with the name of a product option.

    

      Use: `{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}`
    

    

      Example: `{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}`
    

  

{% else %}
  {% assign found_option = false %}
  {% assign is_color = false %}
  {% assign option_index = 0 %}

  {% for option in product.options %}
    {% if option == swatch %}
      {% assign found_option = true %}
      {% assign option_index = forloop.index0 %}
      
      
      {% assign downcased_option = swatch | downcase %}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
        {% assign is_color = true %}
      {% endif %}
    {% endif %}
  {% endfor %}

  {% unless found_option %}
    

      

        You included the snippet swatch.liquid with the name of a product option — `'{{ swatch }}'` — that
        does not belong to your product.
      

      

        Use `{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}`
      

      

        Example: `{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}`
      

      

        **This is case-sensitive!** Do not put in `'color'` if your product option name is
        `'Color'`.
      

    

  {% else %}
    
      
{{ swatch }}

      {% assign values = '' %}
      {% for variant in product.variants %}
        {% assign value = variant.options[option_index] %}
        {% unless values contains value %}
          {% assign current_variant = product.selected_or_first_available_variant %}
          {% assign values = values | join: ',' %}
          {% assign values = values | append: ',' | append: value %}
          {% assign values = values | split: ',' %}
          
            
            {% if is_color %}
              
            {% else %}
              
            {% endif %}
          

        {% endunless %}
        {% if variant.available %}
          
        {% endif %}
      {% endfor %}
    

  {% endunless %}
{% endif %}
2

Hey,
Try this updated code. Please must take backup of your exiting file.

{% if swatch == blank %}
  
    

You must include the snippet swatch.liquid with the name of a product option.

    

      Use: `{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}`
    

    

      Example: `{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}`
    

  

{% else %}
  {% assign found_option = false %}
  {% assign is_color = false %}
  {% assign option_index = 0 %}

  {% for option in product.options %}
    {% if option == swatch %}
      {% assign found_option = true %}
      {% assign option_index = forloop.index0 %}
      
      
      {% assign downcased_option = swatch | downcase %}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
        {% assign is_color = true %}
      {% endif %}
    {% endif %}
  {% endfor %}

  {% unless found_option %}
    

      
    

  {% else %}
    
      
{{ swatch }}

      {% assign values = '' %}
      {% for variant in product.variants %}
        {% assign value = variant.options[option_index] %}
        {% unless values contains value %}
          {% assign current_variant = product.selected_or_first_available_variant %}
          {% assign values = values | join: ',' %}
          {% assign values = values | append: ',' | append: value %}
          {% assign values = values | split: ',' %}
          {% assign value_available = false %}
          {% for v in product.variants %}
            {% if v.options[option_index] == value and v.available %}
              {% assign value_available = true %}
            {% endif %}
          {% endfor %}
          
            
            {% if is_color %}
              
            {% else %}
              
            {% endif %}
          

        {% endunless %}
      {% endfor %}
    

  {% endunless %}
{% endif %}