Display current available sizes under Product images

Highlighted
New Member
10 0 0

Hi all,

New to Shopify so I imagine there is a really simple way/app to achieve this however I am unable to finid it. We have an online clothing store and would like to display the current available sizes/stock under a product image. How would I go about doing this? Please see below for an example (stolen from another page)

Apologies if this is incredibly simple, new to Shopify!

Thanks!

 

0 Likes
Highlighted
Shopify Partner
1365 24 238

Hi,

You do not need an APP just few lines of code.

Here is a demo that shows the available sizes: S, M, XL: https://test-5791.myshopify.com/

In the Liquid code that generates the product item you need to add this:

      {% assign sizes = '' %}
      {% for variant in product.variants %}
        {% if variant.available %}
        {% assign sizes = sizes | append: variant.options[0] | append: '_' %}
       {% endif %}
      {% endfor %}
      
      {% assign sizesArr = sizes | split: '_' | uniq %}
      
      {% for size in sizesArr %}
        <span>{{ size }}</span>
      {% endfor %}

You need to adjust this for your product configuration. In this demo the size option is variant.options[0], this first option.

Hopeit helps

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
New Member
10 0 0

Thanks so much for the reply! Looks simple enough so will give it a try and let you know if we have any questions.

Thanks again

0 Likes
Highlighted
Shopify Expert
146 0 28

I know this is an old post but i wanted to put this here in case anyone needed a way without all their products having "size" as the first or nth option. You will want to add some css rules about making the 'not-available' class have a strikethrough or a different color..

 

{%- assign avail_variants = '' -%}
          {%- for variant in product.variants -%}
            {%- if variant.available -%}
            {%- assign avail_variants = avail_variants | append:', ' | append: variant.title | downcase -%}
            {%- endif -%}
          {%- endfor -%}
          {%- capture product_sizes -%}
            {%- for option in product.options_with_values -%}
            {%- assign downcase_option = option.name | downcase -%}
            {%- if downcase_option == 'size' -%}
                <ul class="sizeList HorizontalList HorizontalList--spacingTight">
                  {%- for value in option.values -%}
                    {%- assign downcase_value = value | downcase -%}
                    {%- if avail_variants contains downcase_value -%}
                    <li class="HorizontalList__Item">
                        <span>{{ value }}</span>
                    </li>
                    {%- else -%}
                    <li class="HorizontalList__Item">
                        <span class="not-available Text--subdued">{{ value }}</span>
                    </li>
                  {%- endif -%}
                  {%- endfor -%}
                </ul>
             {%- endif -%}
            {%- endfor -%}
          {%- endcapture -%}

          {%- if product_sizes != blank -%}
            <div class="ProductItem__SizeList">
              {{ product_sizes }}
            </div>
          {%- endif -%}

 

 

PLEASE NOTE: this only works if your sizes dont have overlapping words like Small and Extra Small - they would have to be unique from eachother.  

0 Likes
Highlighted
New Member
2 0 0

Hi, please assist in which html file in the Boundless Shopify theme should I put the code to be able to see the sizes of all the products when the user puts the cursor on the product image.

0 Likes
Highlighted
Tourist
5 1 1

Hi thanx for the tip, works well except for product without size variant, it displays "Default title". Any help will be welcome...

size collection page.png

0 Likes
Highlighted
New Member
3 0 0

Can you tell me which liquid file I would need to add this code to in minimal theme?

0 Likes
Highlighted
Shopify Expert
146 0 28

You would want to add it into the snippet file titled product-grid-item.liquid

you can put it in a few places but I would start here: (after the title and prices)

Screen Shot 2020-08-20 at 11.36.08 AM.png

0 Likes
Highlighted
New Member
3 0 0

That worked! Thank you!

0 Likes
Highlighted
New Member
3 0 0

I did notice the list is vertical. What would I change to make it horizontal?

 

0 Likes