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

Store Design
1

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.

2

Not sure how I add staff member

3

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

1 Like
4

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

5

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

1 Like
6

@code_with_adam Yes. Sure. Please message me

1 Like
7

Hi,

Im also having this issue.

Any solutions?

Thank you

8

@mhmedia Hello,

Welcome to the Shopify Community.

It needed some coding to be implemented.

1 Like
9

Thank you for your response.

I am familiar with coding.

can you share the code?

thank you in advance

10

@Hardik29418

I can change it in the translation.

Can I do calc there?

11

@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' %}
        
          {% for value in product_option.values %}
          - {{ value }}
          {% endfor %}
        

{% endif %}
{% endfor %}
1 Like
12

@Hardik29418 Thank you so much it looks great!

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

Screen Shot 2021-05-30 at 6.19.21 PM.png
Screen Shot 2021-05-30 at 6.19.21 PM.png2574×844 173 KB

1 Like
13

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 %}
                            - {{ value }}
                            
                           {% break %}
                         {% endif %}            
                      {% endfor %}
                    {% endfor %}
                {% endif %}            
            {% endfor %}
1 Like
14

Thank you for your response,

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

15

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

16

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!

17

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.

18

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

19

I have the same question.

20

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.