Shopify: Filtering collections by custom filter

Question

I'm new with liquid and ruby, but I would like to create a custom filter in a collection, to filter by metafields. I already have:

A dropdown in the collection.liquid, with the values I would like to filter for.
When selecting a filter, it goes to a link like: https://myshop.myshopify.com/collections/my-collection/my-filter . Basically it is like the tags, but with my filter instead

However, since it is a custom filter and not a tag, I get no results. I'm wondering where is the query that displays all the products (or filters) is in the code. I know that it depends on the theme, but I'm using the default theme: launchpad-star.

Not sure if I could do it this way or with a link like: https://myshop.myshopify.com/collections/my-collection?filter_by=my-filter , in which case, I would also need where should the logic go.

I've looked at the forums already and found two closed tickets with no responses: https://ecommerce.shopify.com/c/ecommerce-design/t/using-metafields-to-create-filter-drop-downs-in-collection-liquid-187513 and https://ecommerce.shopify.com/c/ecommerce-design/t/using-metafields-to-create-filter-drop-downs-in-collection-liquid-134401 .

Thanks in advance

Nope. Not possible. Shopify's structure is defined so are the URL navigations and filters you can use. — HymnZzy
Thanks for your quick reply @HymnZ . So, you're saying that I could not create custom filters? Is there anything else I could do, like a snippet, a layout, a module or something else to achieve that? Or it is just not possible at all? Thanks again. — vramiguez
Thank you @HymnZ. I found a solution. Not sure it is the best way to do it, but it is working for now. Regarding the use case, I'm trying to filter by days in the following week. In the combobox I have the following 7 days and each product has a metafield with the days as key. I'm now using that key (a day) as a class in the layout of the product and hiding/displaying with javascript. I added more information in the solution. — vramiguez

vramiguez vramiguez · Accepted Answer · 2016-10-28T17:13:47

Probably not the best solution, but this is what I did to solve the problem:

I changed to the second option of the url, so when a user selects an option in the combobox, it is sent to a URL like: myshop.myshopify.com/collections/my-collection?filter_by=my-filter

In product-grid-item.liquid, I'm getting the metafield value of the product and displaying it as a class, and hide all the products as default. In the collection.liquid I read with javascript the value of the parameter (filter_by) and remove the "hide" class of the products with the value of the filter_by as class, so it gets displayed.

I feel that it is not very clean, but it is working as expected. Problems with this solution: * Not displaying all the products and then filtering them * I need to display all the products to avoid pagination, which could be a big problem if I have a lot of products.

If anyone could post a better solution, welcome!.

Shopify: Filtering collections by custom filter

1 Answers