Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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)

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
Visitor
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!

aframedesign
Shopify Partner
11 0 1

Hi Brittany,

We have an app called Size Swatch which can assist to display the size under the product thumbnail on your collection page for you.  

It allows you to customise how the size looks in terms of size, shape and color.

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

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

Amy

 

Shopdevapps
Shopify Partner
2 0 0

You can use the app Swatch specialist: https://apps.shopify.com/swatch-specialist

 

The app and the support is amazing! 

nazeer-ahmed
Visitor
3 0 0

Hey there, if you are looking to display infinite product variants on the collection page and want to show the variant as a separate product and with add to cart option on the variant you can try the Variator with a free trial option
With the Variator Shopify app, you can effortlessly integrate and display product variants on collection pages based on size, color, and pricing. 
With the Variator Shopify app, you can effortlessly incorporate and display product variants based on size, color, and pricing.