Add Color CLick attr

tzn-main.js

  $(".color-option").on("click", function() {
        let src = $(this).attr("src");
  
      if (src) {
         $('.custom-img-click').attr('srcset', '');
         $(this).closest('.card-wrapper').find('.custom-img-click2').attr('srcset', src);  
          $(this).closest('.card-wrapper').find('.custom-img-click').attr('srcset', src);  
          $(this).closest('.card-wrapper').find('.custom-img-click2').attr('src', src);  
          $(this).closest('.card-wrapper').find('.custom-img-click').attr('src', src);  
      }
      
  }); 

product-variant-options-card.liquid


{% assign color_mapping = settings.color_mapping %}
{% assign current_value = value %}
{% assign matched_variant_id = "" %}
{% assign matched_variant_image = "" %}
    
{% assign flash = 0 %}
{% for variant in product.variants %}
  {% if variant.option1 == current_value or variant.option2 == current_value %}
    {% assign matched_variant_id = variant.id %}
    {% assign matched_variant_image_url = variant.featured_image | img_url: 'original' %}

    {% if variant.featured_image == null %}
      {% assign flash = 1 %} <!-- If no featured_image exists, set flash to 1 -->
    {% endif %}

    {% break %}
  {% endif %}
{% endfor %}
{% assign matched_color = color_mapping | where: "name", current_value | map: "color_code" | first %}

{% if matched_color %} 
   {% if flash == 0 %}
       <span  src="{{ matched_variant_image_url}}"  data-product-url="{{ product.url }}" data-variant-id="{{ matched_variant_id }}" 
        data-title="{{ current_value }}" class="color-custom color-option" 
        style="background-color:{{ matched_color }}">  </span>
     
    {% else %}
       <span   data-product-url="{{ product.url }}" data-variant-id="{{ matched_variant_id }}" 
        data-title="{{ current_value }}" class="color-custom color-option" 
        style="background-color:{{ matched_color }}">  </span>
   {% endif %} 

{% else %}
  <span data-title="Default Color" class="color-custom-no-matched color-custom" 
        style="background-color:#fff">  </span>
{% endif %}

card-product.liquid
 {%- if card_product.featured_media -%}
          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <a href="{{ card_product.url }}" class="overlay"></a>
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="
                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                "
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce custom-img-click"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >