Hello,
I’ve been trying to figure out how to change my color filter colors to a prettier hue for some time now. I’ve tried adding png to assets but nothing changes. Going deeper into my theme’s code, I think maybe the code below can help you help me. It is in the snippets with the name “nov-swatch.liquid”
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% capture variantsswatch %} {% endcapture %}
{% capture variantsswatch %}{{ nov-swatch }}{% endcapture %}
{% if nov-swatch == blank %}
<div class="swatch error">
<p>You must include the snippet nov-swatch.liquid with the name of a product option.</p>
<p>Use: <code>{% raw %}{% include 'nov-swatch' with 'name of your product option here' %}{% endraw %}</code></p>
<p>Example: <code>{% raw %}{% include 'nov-swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% else %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% assign indexChild = 0 %}
{% for option in product.options %}
{% if option == nov-swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
{% assign indexChild = forloop.index %}
<style rel="stylesheet" type="text/css" >
.selectorVariants .selector-wrapper:nth-child({{ indexChild }}){display: none;}
</style>
{% assign downcased_option = nov-swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}
{% unless found_option %}
{% else %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
<div class="swatch clearfix {% if is_color %}swatch_color{% else %}swatch_size{% endif %}" data-option-index="{{ option_index }}">
<div class="watch_availabel">
<div class="header">{{ variantsswatch }}: <span class="variant_current">{{ current_variant.options[option_index] }}</span></div>
<div class="swatch_filter">
{% 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 forloop.first %}act{% endif %} {% if is_color %}bg_color{% else %}bg_size{% endif %} {% if is_color %}color {% endif %}{{ value | handle }}{% if variant.available and is_color %} available{% else %} soldout{% endif %}" data-id="{{ variant.id }}" data-name="{{ variantsswatch }}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
<input id="swatch-{{ option_index }}-{{ value | handle }}" data-sku="{{ variant.sku }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"/>
{% if is_color %}
<label class="bg_color_img{% if settings.variant_color_image != true %} hide{% endif %}" for="swatch-{{ option_index }}-{{ value | handle }}" style="background-image: url({{ variant.image.src | img_url: '50x50' }});background-size: cover;background-repeat: no-repeat;background-position: center center!important;" data-toggle="tooltip" data-placement="top" title="{{ value | escape }}" data-swatch-img data-img_src="{{ variant.image.src | img_url: '1120x' }}">
</label>
<label class="color_bg{% if settings.variant_color_image == true %} hide{% endif %}" for="swatch-{{ option_index }}-{{ value | handle }}" style="background: {{ value | split: ' ' | last | handle }}" data-toggle="tooltip" data-placement="top" title="{{ value | escape }}"data-swatch-img data-img_src="{{ variant.image.src | img_url: '1120x' }}">
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}" class ="{% if is_color %}swatch_color{% else %}swatch_size{% endif %}">
<span>{{ value }}</span>
<span class="crossed-email"><i class="zmdi zmdi-email"></i></span>
</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>
</div>
</div>
{% endunless %}
{% endif %}
If anyone finds out what I have to do, I’d be very grateful!