How can I display size variants on collection pages with mouse hover?

[Pernilleslarsen]

Help Please... I would like to show size variant on our collection pages not just on product page to make it easier for customers to see what's available instead of having to go into actual product. I am using impulse theme version 7.20 . I would like to only show the sizes when people are mouse hover over det image? Also I would like for the sold out size to be crossed over with on line. Something similar with like the picture below. Please help with the coding!

[Guleria]

Hello @Pernilleslarsen ,

Create a new file under snippets. 
Copy and paste this code in that file and save it.

	<div class="desktop_only {{ template.name }}"> 
    {% assign variantCount = product.variants | size %}
    {% assign variantlength = product.variants | length %}
    {% if product.available and variantCount > 0 %}

    {% for option in product.options %}
    {% assign is_size = false %}
    {% assign downcased_option = option | downcase %}

    {% if downcased_option contains 'size' or downcased_option contains 'length' %}
    {% assign option_index = forloop.index0 %}
    {% assign option_count = 0 %}
    {% assign values = '' %}
  
    <div class="overlay_swatch {{ downcased_option }}">
      {% for variant in product.variants %}
      {% assign value = variant.options[option_index] %}
      {% unless values contains value %}

      {% if option_count > 0 %}
      {% assign values = values | join: '|' | append: '|' %}
      {% endif %}

      {% assign values = values | append: value %}
      {% assign values = values | split: '|' | sort %}
      {% assign option_count = values | size %}
			<a {% if variant.available %} data-var_id="{{ variant.id }}" {% endif %} class="size-values {% unless variant.available %}soldout{% endunless %} text-center options_sw" href='{{ product.url }}/?variant={{ variant.id }}' title='{{ value }}'>{{value}}  </a>
        {% assign option_count = option_count | plus : 1 %}
         {% endunless %}
      {% endfor %}
    </div>
     {% endif %}
    {% endfor %}
    {% endif %}
    
    </div> 

Next find your collection loop and next to price or where you need to show the size call the file you created. 
e.g. If my file name is  'collection-size-variants' then I'll call it like this:
{% render 'collection-size-variants' %}

And in the last step do the css /to your need.

Thanks

[Pernilleslarsen]

I don't understand this part "Next find your collection loop and next to price or where you need to show the size call the file you created." I am no good with coding so I need to know specific where to go haha

[Guleria]

Then I suggest go with developer  because in this way you will break other things.

[NYCK]

Hi 

i use dawn them , i need to do the above with dawn them version 11 , can i hire you to do the above ? 

[Guleria]

Yes sure, you can share the details here guleriathakur43@gmail.com 

[Maisoldout]

ciao. per non fare danni sul mio tema Dawn, puoi aiutarmi a visualizzare le taglie del prodotto al passaggio del mouse? Invece di pagare un esperto, sarei disposto a pagare te per fare questo lavoro. è possibile? info@maisoldout.com