Filter by Product Variant

sml — Sat, 25 Feb 2012 10:14:49 +0000

I would like to filter my products by the product variant.

The filter will only show the in-stock products that match the variant filter.

Is this possible with shopify?

Caroline Schnapp commented

Caroline Schnapp — Sat, 25 Feb 2012 20:52:39 +0000

Hi Simon,

Do you only need to do a Shop by (in stock) size? Do you need to filter any collection by available size...?

If yes, how many sizes do you have? Are you selling shoes that come in 20 or so sizes or do you have only Small/Medium/Large...?

sml commented

sml — Mon, 27 Feb 2012 02:44:42 +0000

thanks for the reply caroline.

1. Yes, correct. Sort of like the concept of the magento layered navigation which i am currently using.

2. I would like to filter any collection by the variants applicable to the products in that collection.

3. About 12 sizes for my main collection products .. but other collections might only have 3 or 4 .... but I'm curious what difference that could make to the filter if the products in the collection have 3 or 4 attributes or 20+ attributes.

Caroline Schnapp commented

Caroline Schnapp — Mon, 27 Feb 2012 02:58:51 +0000

but I'm curious what difference that could make to the filter if the products in the collection have 3 or 4 attributes or 20+ attributes.

I was thinking about using the 'view' parameter: http://www.shopify.com/technology/3608572-new-liquid-template-features. Look at the 'Alternate views' section in that blog post.

One cannot use view with the ambitions you have, though, as you would then need to manage tons of collection templates.

Maybe you can look into using the Query String app with the help of someone who knows Liquid inside out:

- http://padberg-auer-and-kemmer4199.myshopify.com/a/collections/chairs

- http://apps.shopify.com/querystring

- http://qsapp.sinelabs.com/

Caroline Schnapp commented

Caroline Schnapp — Mon, 27 Feb 2012 03:01:22 +0000

Beware of the querystring limitations:

There are a few limitations to keep in mind, yes.First and most importantly, this app DOES NOT make querystring variables suddenly work for any Liquid template or snippet in a Shopify store. ONLY the liquid snippet (and it must be a snippet) that you specify when you install this application will be affected using ONLY the application's specific proxy URL (by default this is /a/collections).Also, built-in Shopify/Liquid pagination will not work properly when this application is used to manually filter products from being displayed. Unfortunately there is no way currently to pare down a collection into a new array and paginate that array within Liquid syntax.However, it should be possible to utilize additional querystring parameters to provide for basic pagination functionality. Using the for loop syntax of limit: and offset: along with variables that indicate how far into the collection we have previously searched should do the trick, although it will be virtually impossible to know how many pages of results there are overall until you get to the end of the collections products. We will post some additional working sample code later once we have the opportunity to implement this. Feel free to send over any code you write if you beat us to it. Also, the "infinite scrolling" technique of pagination might be recommended here (a "SHOW MORE" button at bottom of page) (http://uxmovement.com/navigation/infinite-scrolling-best-practices/).

sml commented

sml — Mon, 27 Feb 2012 03:09:05 +0000

Thanks Caroline. I will review & research those details later this evening. Unfortunately I cannot write the code myself by would need to find a developer. I have been trying to assess if Shopify can meet my needs and whether it is worth transferring from Magento. So based on the above, it sounds like it is possible but would take some work? :)

I think a 'layered navigation' shopify app would be very popular!

Stephen Pratley commented

Stephen Pratley — Mon, 11 Feb 2013 17:30:28 +0000

Hi,

I've been researching this subject and found a blog post with what I think you are looking for.

Blog post is referenced in this thread, to try to keep discussion in the same place:

http://ecommerce.shopify.com/c/ecommerce-design/t/side-filter-navigation-102596#comment-131690