How can I filter product variants based on user inputs?

Shopify Apps
1

Hi team,

I am working on a store that sells products that can have hundreds of variants based on different lengths, widths etc. Typically these products are sold through cumbersome multi-hundred page catalogues.

How would I create a product page that can filter individual variants based on the users options inputs? For example, if I have products with the following attributes;

option1, option2, option3

M5, 20mm, zinc

M5, 20mm, stainless

M5, 50mm, stainless

M6, 20mm, raw

M6, 30mm, stainless

If the customer first selects M5 for option1, the 30mm for option2 must be unselectable, and both stainless and raw options are available for option3. The customer can’t choose M5, 30mm, stainless as this product does not exist.

In another example, if the customer first selects 50mm for option2, the M6 (option1) and raw (option3) must be unselectable, as the only product that is 50mm length is the M5, 50mm, stainless product.

I have attempted this using conditional logic through some variant apps, but the logic requirements are too complex when there are hundreds of variants, and can become circular.

Any suggestions appreciated! Cheers!

2

Hi @DavisT ,

You have to create variant for all as you mention list.

For Example, I have created variants on my store,

M5, 20mm, zinc

M5, 20mm, stainless

M5, 50mm, stainless

M6, 20mm, raw

M6, 30mm, stainless

And it is visible on Store. Then you need to handle variant options to show selected/unselected through javascript or jquery on product page. This is definitely going to work for you.

oscprofessional_0-1688554212230.png
oscprofessional_0-1688554212230.png3712×984 358 KB

Hope you this might be helpful for you.

Thanks…

3

Hi @oscprofessional ,

Thanks for your reply!

The problem is that there are not just 3 options, some products can have 5+ user selectable options. This already pushes outside of the built in shopify variant capabilities.

Disabling input to individual radio buttons through javascript/jquery would still need to be completed per variant and combination of selected options which is not possible with so many combinations. It needs to be filtered.

4

Hi @DavisT ,

Then you need to go with form fields and metafield that will be best option.

In form display all options in dropdown(static value) and manage selected/unselected through javascript or jquery.

Thanks…