Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi, i am not familiar with coding, try to display "size" for every products, anyone can help?
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.
Once you add the variant it will show up on your store like this.
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.
thanks for the reply, actually what i mean is to display the size to user. any idea how to make it happen?
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.
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 :
{% include "snippet-name " %}
Sorry for the dumb question, where do I copy and paste this?
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
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.
please share your url
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.
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 contact@sizeswatch.com and I can help to get the swatch displaying on your theme.
Let me know if you have any questions 🙂
Hi, Could you show me where to paste specifically? Which .liquid file should I paste into? Thanks!
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
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!
Hi Eleella,
Thanks for reaching out. Yes, happy for you to email me at contact@sizeswatch.com and we can help you with this,
Thanks, Amy
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!
Where is this located?
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
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
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:
Are you for hire? I'd like to get this on my site www.edgycowgirl.com to repalce the Size Swatch app but cannot figure out the coding.
I don't have product card grid.liquid i am using stiletto theme
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.
Thank you, you saved my time!!!
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 😃
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.
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
hello, If someone need it. Now include is deprecated then you need to use render:
{%- render 'ASSETNAME' with product as product -%}
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.
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.
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
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?
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
@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?
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
Thank you so much, I was able to go in and fix it!
can you explain in brief?
i couldn't get your idea.
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?
Hey there! Would you be willing to help me add this? I’ve been researching this everywhere.
Hey, i ended up giving a shopify expert access to our site and he made the changes for me. Sorry i cant help.
Can you share how to contact that shopify expert?
Thanks
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
it says page not found when i try to install
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 contact@sizeswatch.com
Thanks
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024