Product.liquid applying swatch to EVERY product. It only needs to apply it when Option 1 = Color

Highlighted
New Member
5 0 0

Trying to resolve a swatch.liquid issue where we would not use Option 1 as "Color" but instead call it anything else and it causes an error for reasons that are unclear.

It displays correctly when the product page DOES contain Option 1 as "Color".

When we make a product with Option 1 anything else, it creates this error on the product page.

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

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

Example: {% include 'swatch' with 'Color' %}

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

Is there a way to have it report Option 1 as normal (no error message when Option 1 is not color) or "turn off" option 1 and only use option 2 or 3? I don't think the second option is supported. Putting Default Title / Title as Option 1 causes it to populate with Title as the option, no good either!

0 Likes
Highlighted
New Member
5 0 0

Here is the full swatch.liquid file:

 

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if swatch == blank %}
<div class="swatch error">
  <p>You must include the snippet swatch.liquid with the name of a product option.</p>
  <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% 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 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
    
    <script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
    
    {% 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 %}
<div class="swatch error">
  <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
  <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
</div>

{% else %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
  <div class="header">{{ swatch }}</div>
  {% assign values = '' %}
  {% 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: ',' %}
      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
        {% if is_color %}
        <div class="tooltip">{{ value }}</div>
        {% endif %}
        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
        {% if is_color %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% else %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}">
          {{ value }}
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% endif %}
      </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
  {% endfor %}
</div>

{% endunless %}

{% endif %}

0 Likes
Highlighted
New Member
5 0 0

This seems relevant:

https://ecommerce.shopify.com/c/ecommerce-design/t/color-swatch-repair-204222

 

If anyone else runs into the same problem, you can fix it with a tiny code modification in product.liquid to make sure you're not calling for the color swatches when you don't need them.

{% for option in product.options %}
     {% if product.available and product.variants.size > 1 and option == 'Color' %}
          {% include 'swatch' with 'Color' %}
     {% endif %}
{% endfor %}

Unclear if this actually fixes the issue or not though?

0 Likes
Highlighted
New Member
5 0 0

Looking into this further, it seems that this is the relevant code in product.liquid that causes this:

               <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
            {% if product.available and product.variants.size > 1 %}
                 {% include 'swatch' with 'Color' %}
            {% endif %}

It should not check to see if there are 1 or more variants and assume that Color is going to be an available option.

0 Likes
Highlighted
New Member
5 0 0

Modifying it slightly such that:

          <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
           {% for option in product.options %}
            {% if product.available and product.variants.size >= 1 and option == 'Color' %}
                 {% include 'swatch' with 'Color' %}
            {% endif %}
           {% endfor %}

is now the relevant code seems to resolve this issue. Had to add size of the variants >= and add the option == 'Color' parts as we only want the swatches.liquid to be called when Option 1 is Color. Technically, it would still be called when Option 2 or 3 is Color but we (try to) restrict that from happening upstream.

0 Likes
Highlighted
New Member
2 0 0

THANK YOU SO MUCH

For writing all your issues and results, you saved my day, I was having the exact same problem !

Best regards

0 Likes