Show available sizes without viewing product

Tourist
8 0 1

Hi Shopify forums

I have a 'problem' with my shop http://raysskateshop.dk

I have tried searching these forums for help on how to make the available sizes show up underneeth the product or hovering over or whatever is possible. We sell a lot of different shoes and stuff like that, and it is really annoying clicking every single shoe just to realize none of them is in you size. It would make it so much easier for the costumer if it appeared under the product?

But - how can i do this? My theme is New Standard 

Thank you

0 Likes
Shopify Partner
1346 22 208

Hi,

This is a simple code that shoould give you a clue:

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

This should work assuming that your Size is option 0.

Here is a little demo I've put up: http://test-5791.myshopify.com/

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
8 0 1

Thank you so much for the quick reply!

The demo you put up is exactly what i was looking for!

Where should i place this code? In a snippit or in the collections template? I am not too good at figuring out the Liquid code yet!

0 Likes
Shopify Partner
1346 22 208

Hi,

I am not sure how your thee is structured. In most themes you should look for a snippet, something like product-grid-item.liquid. 

You an place it below the "coll-prod-price accent-text" element. On mouse hover you can make this visibile or not using an opacity transition.

It really does depend on your theme.

 

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
8 0 1

I read about the product-grid-item.liquid on another forum post, but that snippet is not in the theme (New Standard) i am using! I will try finding the coll-prod-price accent-text element in one if the others! Hopefully i will find it somewhere :-)

Again, thanks a lot! 

0 Likes
Shopify Partner
1346 22 208

Just look in your theme and I am sure that you will find the right place for it.

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
8 0 1

I found the prod-price accent-text element. I tried fitting it in like this, and directly beneath the line, but none of it worked. 

Right now the code is looking like this - what am i doing wrong?:


{% if template == 'index' %}<ul id="fp-product-list" class="clearfix default" >{% endif %}
{% if template contains 'collection' %}<ul id="coll-product-list" class="clearfix default">{% endif %}

  {% for i in (1..4) %}

  <li class="{% if settings.products_per_row == '3' and template contains 'collection' %}three{% else %}four{% endif %}-per-row default clearfix">
    <div class="coll-image-wrap">
      <p>Example</p>
    </div><!-- .coll-image-wrap -->
    <div class="coll-prod-caption">
      <a class="coll-prod-buy styled-small-button" href="/">{{ settings.buy_medallion_text }}</a>
      <div class="coll-prod-meta {% if settings.show_buy_medallion == false %}no-medallion{% endif %}">
        <p class="coll-prod-title">Your Product</p>
        <p class="coll-prod-price accent-text">$0.00</p>
      </div><!-- .coll-prod-meta -->      
    </div><!-- .coll-prod-caption -->
  </li>

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

  {% endfor %}

0 Likes
Tourist
8 0 1

Okay - I got it working of some sorts, but the space between the sizes is non existing and on products with a discount the sizes is not showing! :) I might be in over my head with this one, even though it is simple.

Is there anybody (maybe you Mircea) that can help implement it for like 30 dollars or so? I dont know how much time this will take :-)

 

0 Likes
Shopify Partner
1346 22 208

Feel free to mail me at mircea@typefolly.com. I'll send you my availability and rates.

Thank you.

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
1 0 0

Hey, nice site.

I just looked at it. There may be an easier way to do this. 

What you could do is add a "refine" option to your product pages, and make one of the options "Refine by size", which would eliminate all the shoes not available in that size from the page.

I'm sure it's much easier than inserting code. A bonus may be to let people choose multiple sizes to refine by.

0 Likes