How To Show Size Variants On Collection Page In Be Yours Theme

[nicolemn]

I would like to show size variants (and what sizes are sold out) on collection pages, featured collections in my store.  For example if a customer viewed to "TOPS" or "NEW ARRIVALS" they could easily see what sizes are offered and what sizes are available/sold out without having to click into view each item. According to the app developers I can only show size variants on these pages if I enable color swatches on and hover with the mouse over the color swatches (then the sizes show up also?).  I'm not interested in adding color swatches and most customers are mobile so will not have a mouse to hover. 

LINK TO MY STORE: https://theroveboutique.com/

Thanks in advance!

[Guleria · Accepted solution]

Hello @nicolemn ,

  It's possible but not without the customization.   

[EYCB]

It sounds like the app developers you've spoken with have suggested that the only way to show size variants on collection pages is by enabling color swatches and hovering over them with a mouse. However, there are a few other options you can consider:

1. Use a different app: There are many apps available on the Shopify App Store that allow you to display size variants on collection pages without having to use color swatches. You can try searching for "size swatches" or "size variants" to find some options.

2. Use a custom solution: You can hire a Shopify developer to create a custom solution that displays size variants on collection pages without using color swatches. This can be a bit more expensive, but it can also allow you to have more control over the final design and functionality.

3. Use a third party plugin: Look for a third party plugin that can be added to your Shopify store and allows you to show size variants on the collection pages.

4. Show the sizes and stock on the product card: You can show the available sizes and stock status on the product card on the collection page itself so that customer can quickly see what is available without having to open the product page.

5. Show the stock status next to the size on the product page: you can show the stock status next to the size options on the product page, so the customer can see which sizes are sold out.

In any case, it is important to note that the best solution will depend on the specific needs of your store and your customers.

[ShubhamJain]

Is it possible to add Size Swatches in the Collection Page below the prices? 

[OneCommerce]

Hello @nicolemn ,

We are OneExperts from OneCommerce and we're here to support you.

Apart from your app developers suggestion, you may want to try edit the code if you comfortable with it and you can follow these steps:

• Go to your Shopify store's panel -> Themes -> Edit Code
• Go to "Section" folder -> Find product-grid-item.liquid
• add a new line of code that shows the size variants below the codes that controls how product information is displayed on the collection page like this:

<p>{{ product.options[0] }}: {{ product.variants[0].option1 }}</p>

• Save and test

Hope we can help you with this. Please hit the Like Button or mark this as Accepted Solution if you think our answer is helpful, it means a lot to us.

Best regards,

OneCommerce team.

[ShubhamJain]

Can you please guide us on where do we paste these codes to get the attached results? We want to show Size Swatches in the Collection/Product Pages. 

[hypeharborcrew]

Unable to find that n Dawn theme

[Alok_Kasgar]

Put this script in header
<script>
function addItemToCart(variant_id) {
data = {
"id": variant_id,
"quantity": 1
}
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
window.location.href = '/cart';
//alert('added');
}
});
}
</script>

Add this code in product-cart or grid-item or may be other name 

<span class="add-to-cart-button" style="display:block; margin-top:5px">
{% unless card_product.has_only_default_variant %}
{% for option in card_product.options_with_values %}
{% assign downcased_option = option.name | downcase %}
{% if downcased_option contains 'size' %}
<div>{{ option.name }} </div>
{% assign is_size = true %}
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if card_product.options.size == 1 %}
{% unless card_product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<span onclick="addItemToCart({{ card_product.variants[forloop.index0].id }})" data-variantid="{{ card_product.variants[forloop.index0].id }}" data-variantsku="{{ card_product.variants[forloop.index0].sku }}" class="add-to-cart-button size-values {% unless variant_avialable %}soldout{% endunless %} text-center">{{ value | escape }}</span>
{% endfor %}
{% endif %}
{% endfor %}
{% endunless %}
</span>

[ShubhamJain]

Can you please guide us on where do we paste these codes to get the attached results? We want to show Size Swatches in the Collection/Product Pages. 

[Daniel_Ward_CC]

Bump for this! 

[Daniel_Ward_CC]

Which page does the code need adding too specifically? and where on the page page should it be placed exactly please? 

[KabirDev]

This video shows a neat way to display every variant and price of products on your Shopify collection pages.