Re: Variant filtering on product page

How can I filter product variants based on user inputs?

DavisT
Visitor
2 0 0

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!

Replies 3 (3)

oscprofessional
Shopify Partner
16020 2398 3107

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

Hope you this might be helpful for you.

Thanks...

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
DavisT
Visitor
2 0 0

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.

oscprofessional
Shopify Partner
16020 2398 3107

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free