Solved

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

nicolemn
Visitor
1 0 0

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!

 

Accepted Solution (1)

Guleria
Shopify Partner
3087 606 864

This is an accepted solution.

Hello @nicolemn ,

 

  It's possible but not without the customization.   

 

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 11 (11)

Guleria
Shopify Partner
3087 606 864

This is an accepted solution.

Hello @nicolemn ,

 

  It's possible but not without the customization.   

 

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

EYCB
Shopify Partner
70 5 13

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.

banned
ShubhamJain
Tourist
3 0 1

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

 

SizeSwatch.PNG

OneCommerce
Shopify Partner
253 19 108

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.

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us

ShubhamJain
Tourist
3 0 1

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. SizeSwatch.PNG

hypeharborcrew
New Member
12 0 0

Unable to find that n Dawn theme

 

Alok_Kasgar
Shopify Partner
112 26 27

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>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
ShubhamJain
Tourist
3 0 1

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. SizeSwatch.PNG

Daniel_Ward_CC
Shopify Partner
28 0 13

Bump for this! 

Daniel_Ward_CC
Shopify Partner
28 0 13

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

KabirDev
Shopify Partner
248 61 67

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

 

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com