Dear Shopify Community,
The swatches (on the collection page, product lists, etc.) are set to appear when there is an option named 'color' or 'اللون' (which translates to color in Arabic). However, even if there is just one variant available within the 'color' or 'اللون' option, it displays a single swatch under the product. This behavior seems counterintuitive.
My objective is to ensure that swatches are displayed only when the product has an option named 'color' or 'اللون,' and that these options should have at least two variants (or more) for the swatches to appear.
current code:
{%- if settings.enable_grid_swatches -%}
<!-- Start Color swatches 4 -->
{%- liquid assign swatch_file_extension = 'png'
assign color_count = 0
if settings.product_swatch == "thumbnail_swatch"
assign show_images_or_color = 1
endif
if settings.product_swatch == "color_swatch"
assign show_images_or_color = 2
endif
-%}
{%- for option in card_product.options_with_values -%}
{%- assign option_name = option.name | downcase -%}
{%- if option_name contains 'color' or option_name contains 'اللون' -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- if show_images_or_color == 1 %}
<div class="grid-product__colors grid-product__colors--{{ card_product.id }}">
{%- endif -%}
{%- if show_images_or_color == 2 %}
<label class="variants hidden">Available in</label>
<ul class="grid-product__colors">
{%- endif -%}
{%- for variant in card_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: ',' %}
{%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
{%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
{%- assign color_count = color_count | plus: 1 -%}
{%- if show_images_or_color == 1 %}
<a title="{{ value | handle }}"
href="{{ variant.url | within: collection }}"
class="prod_swatch color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %} tooltip-top"
{% if variant.image %}
data-variant-id="{{ variant.id }}"
data-variant-image="{{ variant.image | image_url: width: 400, height: 400 }}"
{% endif %}
style="background-image: url( '{% if variant.image %} {{ variant.image | image_url: width: 80, height: 80 }}{% endif %}'); background-color: {{ color_swatch_fallback }};">
<span class="tooltip-label top">{{ color_swatch_fallback }}</span>
</a>
{%- endif -%}
{%- if show_images_or_color == 2 %}
<li class="prod_variant">
<a title="color - {{ color_swatch_fallback }}" class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %} tooltip-top" href="{{ variant.url | within: collection }}">
<span {% if variant.image %}
data-variant-id="{{ variant.id }}"
data-variant-image="{{ variant.image | image_url: width: 400, height: 400 }}"
{% endif %} class="dot prod_swatch" style="background-color:{{ color_swatch_fallback }}">
</span>
<span class="tooltip-label top">{{ color_swatch_fallback }}</span>
</a>
</li>
{%- endif -%}
{% if variant.image %}
<script>
document.addEventListener( 'DOMContentLoaded', function() {
preload('{{ variant.image | image_url: width: 400, height: 400 }}');
});
</script>
{% endif %}
{%- endunless -%}
{%- endfor -%}
{%- if show_images_or_color == 1 %}
</div>
{%- endif -%}
{%- if show_images_or_color == 2 %}
</ul>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<!-- End Color swatches 4 -->
{%- endif -%}
