How to display "size" in collection page and product detail page?

thexstyle
New Member
2 0 2

Hi,  i am not familiar with coding, try to display "size" for every products, anyone can help?

Replies 34 (34)
Dallas
Shopify Staff
Shopify Staff
915 61 189

Hey, there. 

 

Dallas here from the Social Care team at Shopify.

 

If you are looking to add sizes you can add them as a variant. If you go into the product under Products in the Store Admin you will see an area where you can add variants. It will look something like this.

04-27-01uuw-cjpqg

 

 

Once you add the variant it will show up on your store like this.

04-29-3qgyt-lwzjd

 

When you are talking about the collection page are you wanting to have it so that you are able to organize by size to narrow down the items in the collection? If you are you will want to use an app like Collection Filter. This will allow your customers to filter products by different variants.

 

I hope that helps

Best,
Dallas

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

thexstyle
New Member
2 0 2

thanks for the reply, actually what i mean is to display the size to user. any idea how to make it happen?

variants.jpg

Dallas
Shopify Staff
Shopify Staff
915 61 189

Ah I see what you mean! So more like a display of variants on your collection page? 

In that case maybe you would want to try this app. It is called "Products List Variants Viewer". 


I think that will be your best option. 

 

Let me know how it goes for you.

Dallas

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Silverclouding
Shopify Expert
96 14 25

Create a snippet and paste below code and assign where you want show size variants. 

<style>

.product-grid-options-size {
list-style: none;
padding: 0px;
font-size: 10px;
opacity: 1;
margin: 0 auto;
text-align: center;
}

.product-grid-options-size .altli a:hover {
background: #000;
border: 1px solid #000;
color: #fff;
}
.product-grid-options-size .altli a {
text-decoration: none;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
-ms-flex-align: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
padding: 0;
min-width: 30px;
min-height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #fff;
border: 1px solid #989898;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
font-weight: 700;
}

.product-grid-options-size .altli {
display: inline-block;
margin: 0 1px 5px 1px;
line-height: normal;
}
.product-grid-options-size .altli a:hover {
background: #000;
border: 1px solid #000;
color: #fff;
}

</style>

{% assign variantCount = product.variants | size %}
{% if product.available and variantCount > 0 %}
<div class="product-grid-options-size">
{% for option in product.options %}
{% assign is_size = false %}
{% assign downcased_option = option | downcase %}

{% if downcased_option contains 'size' %}
{% assign option_index = forloop.index0 %}
{% assign option_count = 0 %}
{% assign values = '' %}

{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}

{% if option_count > 0 %}
{% assign values = values | join: '|' | append: '|' %}
{% endif %}
{% assign values = values | append: value %}
{% assign values = values | split: '|' | sort %}
{% assign option_count = values | size %}

{% if variant.available %}
{% if option_count <= 6 %}
<div class="altli {% unless variant.available %}soldout{% endunless %}">
<a title="{{value}}" href="{{ product.url}}?variant={{ variant.id }}">
{{ value }}
</a>
{% assign option_count = option_count | plus : 1 %}
</div>
{% endif %}
{% endif %}

{% endunless %}
{% endfor %}

{% if values.size >= 6 %}
<div class="altli">
<a title="More" href="{{ product.url}}">...</a>
</div>
{% endif %}

{% endif %}


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

 

Example image :

Untitled-1.png

Lolo254
New Member
4 0 0
Once I create a snippet and paste that code how do I assign it?
Silverclouding
Shopify Expert
96 14 25

{% include "snippet-name " %}

Lolo254
New Member
4 0 0

Sorry for the dumb question, where do I copy and paste this?

Silverclouding
Shopify Expert
96 14 25

In between Title and price in collection page ..

If you not understand where you assign then please join with my skype : live:saikat.santra i will tell you the details 

 

 Thanks 

Lolo254
New Member
4 0 0

Thank you. I found where to add it but for some reason I still can not get it to show the individual blocks for the sizes without having to have the drop down option. 

Silverclouding
Shopify Expert
96 14 25
Lolo254
New Member
4 0 0
Stefan992
New Member
1 0 0

Thank you, you saved my time!!!

aframedesign
Shopify Expert
7 0 1

Hi, 

Just saw your post looking for help to add sizes under the product thumbnail on your collection page.

We have just launched an app that does this for you that might be of interest:

https://apps.shopify.com/product-size-swatch

Let me know if you have any questions, happy to help.

Amy

swankybutterfly
New Member
1 0 0

I love this is there a certain code I need to add to this above code to make all available sizes show and have sold out greyed out?

Thank you in advance! you can also email me 😃

aframedesign
Shopify Expert
7 0 1

Hi, so glad to hear that you love the app.   I had a look at your site and it is looking really good.

You can customize the colors of the swatches for both in stock and out of stock in the app dashboard.  This lets you make the sold out products greyed out on your collection page.   Feel free to send us a message at support@sizeswatch.com if you need any help setting it up.

Party_Force
New Member
1 0 0

Hi, Could you show me where to paste specifically? Which .liquid file should I paste into? Thanks!

aframedesign
Shopify Expert
7 0 1

Hi,

This depends on what theme you are using.  If you send me through an email at support@sizeswatch.com I can have a look at your store and assist to get the Size Swatch app up and running.

Amy

erkankaragulmez
New Member
4 0 0

am not sure if you are still looking for a solution but I have applied underneath in my case in order to add size selector in collection pages

  • create snippet with underneath content

{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden"
{% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select style="display:block" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

 

include that into ''product-grid-item.liquid'' with underneath syntax

{% include 'snippet_name'%}

 

by the way, I am using supply theme...

 

goog luck

 

 

brittany-TDA2
New Member
1 0 0

Hi, I have the same problem. Using Artisan theme. Sizes show on the individual product landing pages but don't show on the product grid or collections. This is a major issue because we are consignment - we only have one of each item we are posting, so the size is one of the most important descriptors. I copied the code above and saved as snippet, but I don't know which liquid file to paste it into. Here is my url: https://topdrawera2.com/collections/shirts-blouses/ Any direction would be much appreciated. Thank you!