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?

Dallas
Shopify Staff
Shopify Staff
911 60 175

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

0 Likes
Dallas
Shopify Staff
Shopify Staff
911 60 175

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
85 14 21

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?
0 Likes
Silverclouding
Shopify Expert
85 14 21

{% include "snippet-name " %}

0 Likes
Lolo254
New Member
4 0 0

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

0 Likes
Silverclouding
Shopify Expert
85 14 21

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 

0 Likes
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. 

0 Likes