How to hide unavailable product variants in Shopify?

Prabha2
Tourist
6 0 2

Product:
Style 1 have 7 colors
Style 2 have 3 colors

i need to display color that have...

But currently both styles have display 7 colors please help us...

 

Replies 19 (19)
Prabha2
Tourist
6 0 2
Brandon22
Shopify Staff
206 0 19

Hello Prabha,

Brandon here from the Shopify Guru Team :)

If you have the Styles and Colors set up as variants for the products, you can remove the specific variants that do not exist. Beside each of the variants that combine Style and Color there will be a little trash can icon.  Just click on that for the combinations that you don't actually sell.

However if it is just that those certain variant combinations are sold out and you want to hide the sold out variants you can use this document to help with that: https://help.shopify.com/themes/customization/products/hide-variants-that-are-sold-out

Thanks for posting!

Brandon | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

EI
New Member
1 0 0

Hi Brandon,

Just a quick question: 

I have multiple variants for a single product however despite deleting the variant combinations as per your advice above, certain combinations that are invalid continue to appear on the the product's page. 

Using the linked product options I can remove those that are invalid, however it also removes those that currently have a Stock Count of 0, which is not ideal for my store. Do you have any other tips to remove invalid variant combinations while maintaining the "out of stock" message if the product is not currently instore?

EDIT: Issue resolved here
 

Alex_Jensen
New Member
3 0 0

Has anyone ever found a solution to this? Thinking about moving from another shopping cart to Shopify and would need this solution as this affects most of my products.

I've used the linked product options tutorial and that works, but only once you change the first option. Has anyone discovered a way so you don't have to select an option the first time for this to work? Or have the words "Select option" show on the first option while the 2nd option is greyed out?

tim
Shopify Expert
2925 143 1042

Alex, 

the tutorial was written pretty long ago and does not account for many theme changes which happened since. It is possible to make it work as expected, I helped several people in this forum  to make it work.

If you share your storefront password (from Online Store->Preferences->Password Page) (and provide an example link) I will be able to have a look at yours.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Alex_Jensen
New Member
3 0 0

Hi Tim,

I figured it was outdated. Password is towgao. Thank you so much!

-Alex

tim
Shopify Expert
2925 143 1042

There are errors in your code:

1. remove this:

    selector.prepend('<option value="">Pick a ' + null + '</option>');
.val('');

2. Fix your comments for second and third drop-downs

// Gathering values for the 2nd drop-down.

3. The code fires a bit early, that's why it requires changing a first drop-down to update the options. Try changing this code at the bottom:

 var selector = jQuery('.single-option-selector:eq(0)');
 selector.trigger('change'); 

to this:

 $( function(){ 
   var selector = jQuery('.single-option-selector:eq(0)');
   selector.trigger('change'); 
 });

or, alternatively, change DOMContentLoaded  to load  event at the top of the snippet to run code only when page is fully loaded.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Alex_Jensen
New Member
3 0 0

Awesome! That worked perfectly. Thank you so much!