Hey,
Im pretty new on Shopify. Im trying to do some modifications on my theme. And now im trying to make swatch variant working just on hover instead of click. I wrap variants code to id and give function which set check on true. This solution works outside of shopify when i create radio inputs and simply add some script to it. Can anybody take a look ? Warehouse Theme.
Product-info.liquid
{%- when 'variant' -%}
<span class="product-form__option-name text--strong">{{ option.name }}: <span class="product-form__selected-value">{{ option.selected_value }}</span></span>
<div id="radio-buttons" class="variant-swatch-list">
{%- capture option_name -%}option{{ option.position }}{%- endcapture -%}
{%- for value in option.values -%}
{%- capture variant_swatch_id -%}{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[option_name] == value and variant.image -%}
<div class="variant-swatch">
<input class="variant-swatch__radio product-form__single-selector" type="radio" name="{{ option_name }}" id="{{ variant_swatch_id }}" value="{{ value | escape }}" {% if option.selected_value == value %}checked{% endif %} data-option-position="{{ option.position }}">
<label class="variant-swatch__item" for="{{ variant_swatch_id }}" title="{{ value | escape }}">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: variant.image.aspect_ratio }}%">
<img src="{{ variant.image | img_url: '120x' }}" alt="{{ variant.image.alt | escape }}">
</div>
{% render 'icon', icon: 'cross-sold-out' %}
</label>
</div>
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
</div>
JS
document.getElementById("radio-buttons").onmouseover = function (e) {
e.target.checked = true;
}
