I have been trying to set up image swatches for the Palo Alto theme on Shopify. By default, the theme uses color swatches, but I want to display images instead. I’ve attempted to modify the code myself, but I’m encountering issues. Needs guidance on how to successfully implement image swatches for this theme ?

The code of color swatches(Default):

 <div class="{{ selector_wrapper_class }}"
            data-option-position="{{ option.position }}"
            {% if animations_enabled %}
              data-aos="hero"
              data-aos-anchor="{{ animation_anchor }}"
              data-aos-order="{{ animation_order }}"
              {%- assign animation_order = animation_order | plus: 1 -%}
            {% endif %}>
            {%- if enable_variant_boxes or is_swatch_option -%}
              {%- assign current_value = current_variant.options[forloop.index0] -%}
              <fieldset class="radio__fieldset radio__fieldset--{{ settings.color_swatches_product_style }}{% if show_size_guide_as_label %} radio__fieldset--sizeguide{% endif %}"{% if is_swatch_option %} data-swatches-container{% endif %}>
                <legend class="radio__legend"{% if is_swatch_option %} data-swatches-label{% endif %}>
                  <span class="radio__legend__label label-typography">{{ option.name | escape_once }}</span>
                  {%- if show_size_guide_as_label -%}{{- size_chart_button -}}{%- endif -%}
                </legend>
                {%- for value in option.values -%}
                  {%- capture input_id -%}{{ unique }}-{{ product.id }}-{{ option.name | escape_once }}-{{ value | handle }}{%- endcapture -%}

                  {%- if is_swatch_option -%}
                    {%- liquid
                      assign current_option_variants = product | map: 'variants' | where: current_option_position, value
                      assign current_option_variants_id = current_option_variants | map: 'id' | join: ','
                    -%}

                    <span class="swatch__button swatch__button--{{ settings.color_swatches_product_style }}" data-swatches-button>
                      <input type="radio"
                        class="swatch__input"
                        data-single-option-selector
                        data-index="{{ current_option_position }}"
                        name="options[{{ option.name | escape_once }}]"
                        value="{{ value | escape_once }}"
                        id="{{ input_id }}"
                        {% if value == current_value %}checked{% endif %}>
                      <label for="{{ input_id }}" class="swatch__label" data-swatch="{{ value | escape_once }}" data-tooltip="{{ value | escape_once }}" data-swatch-variant="{{ current_option_variants_id }}">
                        <span class="visually-hidden">{{ value | escape_once }}</span>
                        <span class="icon icon-check"></span>
                      </label>
                    </span>
                  {%- else -%}
                    {% comment %} radio button {% endcomment %}
                    <span class="radio__button">
                      <input
                        type="radio"
                        class="radio__input"
                        data-single-option-selector
                        data-index="{{ current_option_position }}"
                        name="options[{{ option.name | escape_once }}]"
                        value="{{ value | escape_once }}" id="{{ input_id }}"
                        {% if value == current_value %}checked{% endif %}>
                      <label for="{{ input_id }}" class="radio__label">
                        <span>{{ value | escape_once }}</span>
                      </label>
                    </span>
                  {%- endif -%}
                {%- endfor -%}
              </fieldset>
              {%- if is_swatch_option -%}
                <button type="button" class="btn btn--text swatch__more" aria-expanded="false" aria-controls="CollectionFilterActions--product-type" data-swatches-more>
                  <span>{{ 'products.product.show_more' | t }}</span>
                  <span>{{ 'products.product.show_less' | t }}</span>
                </button>
              {%- endif -%}
            {%- else -%}
              {%- assign selects_counter = selects_counter | plus: 1 -%}
              <div class="select__fieldset">
                {%- capture input_id -%}{{ unique }}-{{ product.id }}-option-{{ option.position }}{%- endcapture -%}
                <div class="select__label label-typography" id="{{ unique }}-select-{{ option.name | handle }}-label">
                  {%- if show_size_guide_as_label -%}
                    {{- size_chart_button -}}
                  {%- else -%}
                    {{- option.name | escape_once -}}
                  {%- endif -%}
                </div>

                <div class="select-popout" data-popout data-popout-prevent="true">
                  <button type="button" class="select-popout__toggle" aria-expanded="false" aria-controls="{{ unique }}-select-{{ option.name | handle }}" aria-labelledby="{{ unique }}-select-{{ option.name | handle }}-label" data-popout-toggle>
                    <span class="select-popout__value" data-popout-text>{{ option.selected_value }}</span>
                    {%- render 'icon-select' -%}
                  </button>

                  <div id="{{ unique }}-select-{{ option.name | handle }}" class="select-popout__list" data-popout-list>
                    <ul class="select-popout__list__scroll">
                      {%- for value in option.values -%}
                        <li class="select-popout__item {% if option.selected_value == value %}select-popout__item--current{% endif %}">
                          <a class="select-popout__option" href="#" {% if option.selected_value == value %}aria-current="true"{% endif %} data-value="{{ value | escape_once }}" data-popout-option>
                            <span>
                              {{ value | escape_once }}
                            </span>
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                  <input type="hidden" name="options[{{ option.name | escape_once }}]" id="{{ input_id }}" value="{{ option.selected_value | escape_once }}" data-popout-input data-single-option-selector data-index="option{{ option.position }}"/>
                </div>
              </div>
            {%- endif -%}
          </div>
        {%- endfor -%}
      </div>
    {%- endunless -%}
  {%- endcapture -%}

  {{- form_fields -}}

  <noscript>
    <select name="id" class="product__form__select" aria-label="{{ product.options_with_values | map: 'name' | uniq | join: ', ' }}">
      {%- for variant in product.variants -%}
        <option
          {% if variant == current_variant %}selected="selected"{% endif %}
          {% unless variant.available %}disabled="disabled"{% endunless %}
          value="{{ variant.id }}">
            {{- variant.title -}}
        </option>
      {%- endfor -%}
    </select>
  </noscript>

 

The code i have written (Improved)

    <div class="{{ selector_wrapper_class }}"
    data-option-position="{{ option.position }}"
    {% if animations_enabled %}
      data-aos="hero"
      data-aos-anchor="{{ animation_anchor }}"
      data-aos-order="{{ animation_order }}"
      {%- assign animation_order = animation_order | plus: 1 -%}
    {% endif %}>
    {%- if enable_variant_boxes or is_swatch_option -%}
      {% assign variant_index = '' | split: ',' %}
      <span>{{variant_index[forloop.index]}}</span>
         {% assign flag =  0 %}        

      {%- assign current_value = current_variant.options[forloop.index0] -%}
      <fieldset class="radio__fieldset radio__fieldset--{{ settings.color_swatches_product_style }}{% if show_size_guide_as_label %} radio__fieldset--sizeguide{% endif %}"{% if is_swatch_option %} data-swatches-container{% endif %}>
        <legend class="radio__legend"{% if is_swatch_option %} data-swatches-label{% endif %}>
          <span class="radio__legend__label label-typography">{{ option.name | escape_once }}</span>
          {%- if show_size_guide_as_label -%}{{- size_chart_button -}}{%- endif -%}
        </legend>
        {%- for value in option.values -%}
          {%- capture input_id -%}{{ unique }}-{{ product.id }}-{{ option.name | escape_once }}-{{ value | handle }}{%- endcapture -%}
          {%- if is_swatch_option -%}
            
            {%- liquid
              assign variant_image_url = ''
              for variant in product.variants
                if variant.options contains value
                  assign variant_image_url = variant.image.src
                  break
                endif
              endfor
              assign current_option_variants = product.variants | where: 'option1', value | where: 'option2', value | where: 'option3', value
              assign current_option_variants_id = current_option_variants | map: 'id' | join: ','
            -%}

            <span class="swatch__button swatch__button--{{ settings._swatches_product_style }}" data-swatches-button>
              <input type="radio"
                class="swatch__input"
                data-single-option-selector
                data-index="{{ current_option_position }}"
                name="options[{{ option.name | escape_once }}]"
                value="{{ value | escape_once }}"
                id="{{ input_id }}"
                {% if value == current_value %}checked{% endif %}>
              <label for="{{ input_id }}" class="swatch__label" data-swatch="{{ value | escape_once }}" data-tooltip="{{ value | escape_once }}" data-swatch-variant="{{ current_option_variants_id }}">
                <span class="visually-hidden">{{ value | escape_once }}</span>
                <span class="icon icon-check"></span>
                <!-- Image swatch update -->
                <img src="{{ variant_image_url }}" alt="{{ value | escape_once }}" class="swatch__image">
              </label>
            </span>
          {%- else -%}
            {% comment %} radio button {% endcomment %}
            <span class="radio__button">
              <input
                type="radio"
                class="radio__input"
                data-single-option-selector
                data-index="{{ current_option_position }}"
                name="options[{{ option.name | escape_once }}]"
                value="{{ value | escape_once }}" id="{{ input_id }}"
                {% if value == current_value %}checked{% endif %}>
              <label for="{{ input_id }}" class="radio__label">
                <span>{{ value | escape_once }}</span>
              </label>
            </span>
          {%- endif -%}
        {%- endfor -%}
      </fieldset>
      {%- if is_swatch_option -%}
        <button type="button" class="btn btn--text swatch__more" aria-expanded="false" aria-controls="CollectionFilterActions--product-type" data-swatches-more>
          <span>{{ 'products.product.show_more' | t }}</span>
          <span>{{ 'products.product.show_less' | t }}</span>
        </button>
      {%- endif -%}
    {%- else -%}
      {%- assign selects_counter = selects_counter | plus: 1 -%}
      <div class="select__fieldset">
        {%- capture input_id -%}{{ unique }}-{{ product.id }}-option-{{ option.position }}{%- endcapture -%}
        <div class="select__label label-typography" id="{{ unique }}-select-{{ option.name | handle }}-label">
          {%- if show_size_guide_as_label -%}
            {{- size_chart_button -}}
          {%- else -%}
            {{- option.name | escape_once -}}
          {%- endif -%}
        </div>

        <div class="select-popout" data-popout data-popout-prevent="true">
          <button type="button" class="select-popout__toggle" aria-expanded="false" aria-controls="{{ unique }}-select-{{ option.name | handle }}" aria-labelledby="{{ unique }}-select-{{ option.name | handle }}-label" data-popout-toggle>
            <span class="select-popout__value" data-popout-text>{{ option.selected_value }}</span>
            {%- render 'icon-select' -%}
          </button>

          <div id="{{ unique }}-select-{{ option.name | handle }}" class="select-popout__list" data-popout-list>
            <ul class="select-popout__list__scroll">
              {%- for value in option.values -%}
                <li class="select-popout__item {% if option.selected_value == value %}select-popout__item--current{% endif %}">
                  <a class="select-popout__option" href="#" {% if option.selected_value == value %}aria-current="true"{% endif %} data-value="{{ value | escape_once }}" data-popout-option>
                    <span>
                      {{ value | escape_once }}
                    </span>
                  </a>
                </li>
              {%- endfor -%}
            </ul>
          </div>
          <input type="hidden" name="options[{{ option.name | escape_once }}]" id="{{ input_id }}" value="{{ option.selected_value | escape_once }}" data-popout-input data-single-option-selector data-index="option{{ option.position }}"/>
        </div>
      </div>
    {%- endif -%}
  </div>
{%- endfor -%}
</div>
{%- endunless -%}
{%- endcapture -%}

{{- form_fields -}}

<noscript>
  <select name="id" class="product__form__select" aria-label="{{ product.options_with_values | map: 'name' | uniq | join: ', ' }}">
    {%- for variant in product.variants -%}
      <option
        {% if variant == current_variant %}selected="selected"{% endif %}
        {% unless variant.available %}disabled="disabled"{% endunless %}
        value="{{ variant.id }}">
          {{- variant.title -}}
      </option>
    {%- endfor -%}
  </select>
</noscript>