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

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

thexstyle
Visitor
2 0 2

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

Replies 54 (54)

Dallas
Shopify Staff (Retired)
916 61 212

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

To learn more visit the Shopify Help Center or the Community Blog.

thexstyle
Visitor
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 (Retired)
916 61 212

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

To learn more visit the Shopify Help Center or the Community Blog.

Silverclouding
Shopify Partner
96 14 28

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 Partner
96 14 28

{% include "snippet-name " %}

Lolo254
New Member
4 0 0

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

Silverclouding
Shopify Partner
96 14 28

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 Partner
96 14 28

please share your url

Lolo254
New Member
4 0 0
Emma891
Tourist
8 0 2

Hello Silverclouding, 

I have the same issue with the Stiletto theme. 
I was wondering if you could please help me too? I am a novice at Shopify, and I’m not tech savvy with coding. What you’ve done above is exactly what I’d like help with please. 

aframedesign
Shopify Partner
11 0 1

Hi Emma!

If you're interested in this feature, you can add this using our app Size Swatch.   You can take a look here:

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

Once you've added the app, just send a message at [email protected] and I can help to get the swatch displaying on your theme.

Let me know if you have any questions 🙂 

Party_Force
Visitor
1 0 0

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

aframedesign
Shopify Partner
11 0 1

Hi,

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

Amy

eleella
Tourist
3 0 0

Hi,

 

Can I get in touch with you directly? I would like to hire you to apply this to my theme as I am having trouble.

Thank you!

aframedesign
Shopify Partner
11 0 1

Hi Eleella, 

Thanks for reaching out.  Yes, happy for you to email me at [email protected] and we can help you with this,

Thanks, Amy

eleella
Tourist
3 0 0

Thank you, I am not looking to add an app, I am looking to update my code @Silverclouding I am hoping you can help me! 

Shilowe101
Visitor
2 0 0

Where is this located? 

kristennrhodes
Visitor
2 0 0

Can you elaborate on this? where do I paste the above snippet once created? I see you say between collection title and price but I'm not finding exactly where it needs to go... in assets? templates? layouts? snippets? just a little lost on where it should be placed

 

JPCancino
Shopify Partner
36 1 12

Hi @kristennrhodes 

I put it in product-grid-item.liquid. In the line 213.

 

Captura de Pantalla 2022-08-12 a la(s) 12.33.49.png

kristennrhodes
Visitor
2 0 0

I'm still not finding it unfortunately. I'm using the Craft theme so i'm not sure if that has anything to with it. Only finding main collection product grid.liquid. Spent too many hours on this lol. I'm prob gonna just leave it be at this point

JPCancino
Shopify Partner
36 1 12

@kristennrhodes 

Do you have the product-card-grid.iquid in your theme?

 

If you have it, you can place the code at the end, before the </div>

like the image:

Captura de Pantalla 2022-08-12 a la(s) 15.19.47.png

edgyc
Visitor
1 0 0
JPCancino
Shopify Partner
36 1 12

Hi Edgyc. Yes, write me to [email protected] and explain me what do you want to do.

 

Best,

JP

Saheli_12
Shopify Partner
1 0 0

I don't have product card grid.liquid i am using stiletto theme

JPCancino
Shopify Partner
36 1 12

Hi @Saheli_12 ,

Maybe product-card.liquid or something like that. Something with "grid" in it...

You can try if you are not sure adding the code just before las </div> in the theme that is't published.

Stefan992
Visitor
1 0 0

Thank you, you saved my time!!!

swankybutterfly
Visitor
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 Partner
11 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 [email protected] if you need any help setting it up.

JPCancino
Shopify Partner
36 1 12

Hi @Silverclouding !

Thanks for your code.

I'm using it in my current theme but the problem is that "include" is deprecated. How can I show the variant options in the product-grid-item.liquid using render instead of include?

The code didn't work when I changed include for render.

Please your help.

Best,

JP

JPCancino
Shopify Partner
36 1 12

hello, If someone need it. Now include is deprecated then you need to use render:

{%- render 'ASSETNAME' with product as product -%}

Weartrot
Visitor
1 0 0

Hi 
Needed some help

I have the Avone theme,

Can't figure how to show sizes in my collection page. 

I do have have an option to show color swatches.

at21
Visitor
1 0 0

Thank you so much for this snippet! It worked perfectly for me.

Would you know how to get it to display a shortened version of the variant? Ex: "Small" --> "S"

I tried using  {% if variant.options == "small" | replace: "small", "S" %} or {% if variant.options contains "small" | replace: "small", "S" %}  but it didn't work. 

JPCancino
Shopify Partner
36 1 12

Hello @at21  I think it's a sintaxis problem.

Maybe you need to try this:

{% if variant.options == "small"}

{% variant.options | replace: "small", "S" %}

{% endif %}

 

Best,

JP

hypnotize
Excursionist
12 0 5

Hi. How are you? I used your code on theme minimal and it worked. But minimal dont have so many functions for the first page... i tried to use the code in another theme but it doesnt work. Like Dawn and DEBUT.

 

Can you help me please?

hypnotize
Excursionist
12 0 5

Hi.

How are you?

 

I used the code you shared with us in Minimal theme and it worked perfectly, but i would like to update for Dawn Theme, but it doesn't work. Do you know any code that can help me?

 

Thanks

itsmek8i
Visitor
2 0 0

@Silverclouding This code is exactly what I was looking for, but for some reason I have an extra circle on each item. Do you know what I need to do to get rid of it?problem.JPG

JPCancino
Shopify Partner
36 1 12

@itsmek8i 

Hi,

Is the position where you put the lines in the liquid code. Try to put it higher in the code. Try another <div>.

Best,

JP

itsmek8i
Visitor
2 0 0

Thank you so much, I was able to go in and fix it!

hiten996
Shopify Partner
1 0 0

can you explain in brief?
i couldn't get your idea.

comey_in
Visitor
1 0 0

Hey, i am facing the same issue as you did, i am also having a small circle above the variants, can you explain in detail how to fix it?

Emma891
Tourist
8 0 2
Hi,

I ended up letting a Shopify helper access our page and he fixed it all for us.

I hope this helps.

Shilowe101
Visitor
2 0 0

Hey there! Would you be willing to help me add this? I’ve been researching this everywhere.

Emma891
Tourist
8 0 2

Hey, i ended up giving a shopify expert access to our site and he made the changes for me. Sorry i cant help. 

eleella
Tourist
3 0 0

Can you share how to contact that shopify expert?

 

Thanks

aframedesign
Shopify Partner
11 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

jodi230
Visitor
1 0 0

it says page not found when i try to install 

aframedesign
Shopify Partner
11 0 1

Hi Jodi,

Thanks for your message. I am sorry you were unable to install the app.

This has been fixed and you can install now here:

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

Please let us know if you need any assistance to get the app setup on your theme at [email protected]

Thanks