How can I display size variants on collection pages in Impulse theme?

[HeyBelle]

Help Please... We 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. We are using impulse theme. Would like size to cross out if unavailable.  I have tried everything but am unable to make it happen. 

[HeyBelle]

Not sure how I add staff member

[tewe · Accepted solution]

Hi @HeyBelle ,

to achieve what you want you must edit and extend your theme code. Here is a description how to do that.

If you do not feel comfortable with HTML, JavaScript and LIQUID you can ask an someone for help, e.g @Hardik29418 or us :).

To add someone to your staff, in your admin for the shop go to settings->Plan and permissions->Add Staff. You can find more details here.

Regards
Thomas

[HeyBelle]

Thomas I have tried adding codes that I found in discussion groups but haven't found one that works, or I'm not doing it correctly 

[Hardik29418]

If you still not find the solution, then you can add me as a  staff member.

[Hardik29418]

@code_with_adam Yes. Sure. Please message me

[mhmedia]

Hi,

Im also having this issue.

Any solutions?

Thank you

[Hardik29418]

@mhmedia Hello,

Welcome to the Shopify Community.

It needed some coding to be implemented.

[mhmedia]

Thank you for your response.

I am familiar with coding.

can you share the code?

thank you in advance

[mhmedia]

@Hardik29418 

I can change it in the translation.

Can I do calc there?

[Hardik29418]

@mhmedia 
Please go to Snippets -> product-grid.liquid or similar name file, Find right place to place this code

{% for product_option in product.options_with_values %}
{% if product_option.name == 'Sizes' or product_option.name == 'sizes' or product_option.name == 'size' or product_option.name == 'Size' %}
        <ul>
          {% for value in product_option.values %}
          <li>{{ value }}</li>
          {% endfor %}
        </ul>
{% endif %}
{% endfor %}

[mhmedia]

@Hardik29418 Thank you so much it looks great!

How do I only show the variants that are in stock?

[Hardik29418]

Please update my code with this.

{% assign product_option_color2 = false %}
            {% for product_option in product.options_with_values %}
                {% if product_option.name == 'Sizes' or product_option.name == 'sizes' or product_option.name == 'size' or product_option.name == 'Size' %}
        			{% assign product_option_color2 = true %}         
            		{% assign product_option_key = 'option' | append: forloop.index %}                        
                    {% for value in product_option.values %}
                      {% for variant in product.variants %}          
                         {% if variant.available %}
                            <li>
                               {{ value }}
                            </li>
                           {% break %}
                         {% endif %}            
                      {% endfor %}
                    {% endfor %}
                {% endif %}            
            {% endfor %}

[mhmedia]

Thank you for your response,

I updated it but I still see all the variants even though some are sold out.

[SIMPLESOUL]

Has anyone figured out the code to make sure sold out size variants dont show? 

[Mark118]

Hi Mhmedia, did you manage to get this working? I also use the Impulse theme and am trying to display only the current sizes in stock. 

[mhmedia]

HI,

Unfortunately, I didn't.

[Mark118]

I had to use an app. Looks exactly how I wanted it but pretty steep at $10 a month. Called Size Swatch. 

[mhmedia]

Thanks, This is a very good app;)

[asadmehmood]

try this code....

{% for product_option in product.options_with_values %}
{% if product_option.name == 'Sizes' or product_option.name == 'sizes' or product_option.name == 'size' or product_option.name == 'Size' or product_option.name == 'Taglia' %}
{% assign product_option_color2 = true %}
{% assign product_option_key = 'option' | append: forloop.index %}
<ul class="SizeSwatchList HorizontalList HorizontalList--spacingTight" style="text-align:left;margin-top:10px;">
{% for value in product_option.values %}

<li class="{% if product.variants[forloop.index0].available == false %} hide{% endif %} bill-list" data-avaliable= "{{ variant.inventory_quantity }}">
{{ value }}
</li>

{% endfor %}
</ul>
{% endif %}
{% endfor %}

.hide{display:none!important}

[mkoldun]

Hi @AlexEffron,

Can you advice where should I put the code if I don't have Snippets -> product-grid.liquid file in my theme ?

Thanks,

Michael.

[zohairali]

I have the same question.

[zohairali]

where did you post it? i am unable to find the similar file

[ChaneAllison]

Hi @Hardik29418 ,

Do you know where I can paste the code in for the Dawn theme? I only want it to show on the collection page products. Thanks!