Product Image Doesn't Change When Select A Variant

[batulkr]

Hey everyone! I recently came accross this issue where the variant option doesn't make the product image change live, but the changes get applied when I reload the page.

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
  {% for option in product.options_with_values %}
    {% assign option_index = forloop.index0 %}
    {%- capture option_id -%}
      single-option-{{ form_id }}-{{ option_index }}
    {%- endcapture -%}

    <div class="selector-wrapper js-required">
      <div class="select-wrapper">
        <label
          class="selected-text"
          for="{{ option_id }}"
          data-select-text>
          {{ option.name }}:
        </label>
        <span class="selected-option" data-selected-option aria-hidden="true">{{ option.values | first }}</span>
        <select
          class="single-option-selector"
          id="{{ option_id }}"
          data-option-select="{{ form_id }}"
          data-option-index="{{ option_index }}">
          {% for value in option.values %}
            <option
              value="{{ value | escape }}"
              {% if option.selected_value == value %}selected="selected"{% endif %}>
              {{ value }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
  {% endfor %}
{% endunless %}

Is there any problem with this code do you think the main issue would be in the JavaScript file?

[batulkr]

Anyone that could help?

[IttantaTech]

Hello  @batulkr ,

Can you please provide your store URL ?

[BananaMoon]

This code is probably broken on any theme, because we have zero context about the theme.