Change Color Image Product card

card-product.liquid

      {%- for option in card_product.options_with_values -%} 
                            {% if option.name == 'Farbe' or option.name == 'farbe' or option.name == 'color'  or option.name == 'Color' %}
                                <fieldset class="js product-form__input product-form__input--swatch {{ option.name | handleize }}">
                                  <legend class="form__label">{{ option.name }}<span>:<select-option>{% comment %}{{ option.selected_value }}{% endcomment %}</select-option></span></legend>
                                  {% render 'product-variant-options-card', product: card_product, option: option,product_form_id:product_form_id, picker_type: "swatch" %}
                                </fieldset>
                          {% endif %}
                        {%- endfor -%}
                      </variant-radios-card>
product-variant-options-card.liquid
{% comment %}
  Snippet: product-variant-options-card.liquid
  - Displays color swatches for product cards
  - Uses product.metafields.shopify.color-pattern for color data
  - picker_type defaults to "button"
{% endcomment %}

{%- assign picker_type = picker_type | default: "button" -%}

{%- for value in option.values -%}
  {%- assign option_obj = blank -%}

  {%- for value_main in product.metafields.shopify.color-pattern.value -%}
    {%- if value_main.label == value -%}
      {%- assign option_obj = value_main -%}
      {%- break -%}
    {%- endif -%}
  {%- endfor -%}

  {%- assign bg_style = '' -%}
  {%- assign is_white = false -%}

  {%- if option_obj.color != blank -%}
    {%- assign bg_style = 'background-color:' | append: option_obj.color | append: ';color:' | append: option_obj.color | append: ';' -%}
    {%- if option_obj.color == '#ffffff' or option_obj.color == '#fff' -%}
      {%- assign is_white = true -%}
    {%- endif -%}
  {%- endif -%}

  {%- assign img_url = '' -%}
  {%- for variant in product.variants -%}
    {%- if variant.option1 == value or variant.option2 == value or variant.option3 == value -%}
      {%- if variant.featured_media != blank -%}
        {%- assign img_url = variant.featured_media.preview_image | img_url: '600x' -%}
      {%- endif -%}
      {%- break -%}
    {%- endif -%}
  {%- endfor -%}

  {%- if img_url == '' -%}
    {%- assign img_url = product.featured_image | img_url: '600x' -%}
  {%- endif -%}

  <span
      data-image="{{ img_url }}"
      data-product-url="{{ product.url }}"
      data-title="{{ value }}"
      class="color-custom color-option {% if is_white %}border-white-css{% endif %}"
      style="{{ bg_style }}">
       
  </span>
{%- endfor -%}

<style>
  .color-custom {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    cursor: pointer;
    border: 1px solid #ccc;
    vertical-align: middle;
  }

  .color-custom.selected {
    outline: 1px solid #000;
    outline-offset: 1px;
  }

  .border-white-css {
    border: 1px solid #000 !important;
  }
</style>
main.js

(document).on('click', '.color-custom.color-option', function(){
  var $swatch = $(this);
  var newImage = $swatch.attr('data-image');  
  console.log('Click swatch, image =', newImage);

  if(newImage && newImage.length > 0){
    var $card = $swatch.closest('.card');
    var $mediaImgs = $card.find('.media--hover-effect img');

    $mediaImgs.each(function(){ 
      $(this).attr('src', newImage);
      $(this).attr('srcset', newImage);
    });

    $card.find('.color-custom.color-option').removeClass('selected');
    $swatch.addClass('selected');
  }