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

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

Pernilleslarsen
New Member
5 0 0

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!Screenshot 2023-03-17 at 11.26.49.png

Replies 5 (5)

Guleria
Shopify Partner
3187 620 891

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal
Pernilleslarsen
New Member
5 0 0

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
Shopify Partner
3187 620 891

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal
NYCK
Excursionist
46 1 2

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
Shopify Partner
3187 620 891

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal