Display size availability in product grid - Dawn theme

Store Design
1

Hi,
How do I display the sizing availability on the webpage to appear as below:

Screen Shot 2022-03-06 at 1.27.36 pm.png
Screen Shot 2022-03-06 at 1.27.36 pm.png1570×350 55.3 KB

1 Like
2

@ceoclothing
Welcome to the Shopify community!
Thanks for your good question.

We are happy to help you.

you can add it by the custom code or app,
try out Shopify Sizing App.

3

Hi @ceoclothing

Since each theme has its own element, the theme provider is best equipped with the knowledge to answer your query. Shopify is Dawn theme provider. You can directly chat with them here: https://help.shopify.com/en/questions#/contact

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions :slightly_smiling_face:

4

How do I add it as a custom code?

5

@ceoclothing

{%- 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 -%}

try out this code.

6

Thank you
Where do I paste this in the snippets?

7

Hi,

where do I paste this snippet?

8

Hi where would I paste this code?