Filtering Collections by Product Type

Shopify Partner
1 0 0

Hi all, I'm trying to filter products by both vendor and product type - how would i do this? 

Initially i had put all my vendors (about 20) into collections, but i can only filter collecitons by tag i think? I'd seen that i could add the product type as a tag, but this would mean that i can only have one tag per product (as i wouldn't want to list all other tags not related to product type on a collection page).

Is there a way to instead filter by vendor+product type in the url? E.g. vendors?q=X&producttype=Y

I have seen that i could add extra smart collections with two rules (e.g. products from X vendor and Y product type) but this would take forever to do this for the 20 or so vendors multiplied by the 10 or so product types.

Any ideas on the best way to do this?

0 Likes
Tourist
9 0 1

Hi RizzleDizzle,

I think you can try this: 

 <ul class="product-grid clearfix">		
		 {% assign sorted_products = products | sort:'vendor' %}
				{% for product in sorted_products %}
	          		<li{% cycle '', '', ' class="last-in-row"' %}>
            			{% include 'product-grid-item' %}
          			</li>
        		{% endfor %}
        </ul>
 {% assign sorted_products = products | sort:'vendor' %}

You can refer to these two posts where I got if from

https://ecommerce.shopify.com/c/ecommerce-design/t/sort-filter-sorting-by-vendor-and-type-161547

https://ecommerce.shopify.com/c/ecommerce-design/t/filter-collection-by-product-type-96353

Hope it helps,

Alan

 

0 Likes
Highlighted
New Member
2 0 0

Hey guys!

I'm new here and I don't really know where to post it, but I had a similar problem and here's how I solved it.

The area marked red is where the product types are, at the beginning there's an All tag, this only works in /all/. This cannot further filter a collection because this method actually just links to smart collections containing the types, but you don't have to create the collections, it's automatic. Another pic:

I created a snippet called collection-types

here's the code in it:

<div class="form-horizontal">
  <ul class="tags tags--collection inline-list">
    <li {% unless collection.current_type %} class="tag--active" {% endunless %}>    
      <a href="/collections/all" title="{{ 'collections.sorting.all' | t }}">{{ 'collections.sorting.all' | t }}</a>
    </li>
        {% for product_type in collections['all'].all_types %}
            <li {% if collection.current_type == product_type %} class="tag--active" {% endif %}>
              {{ product_type | link_to_type }}
            </li>
        {% endfor %}
      </ul>
</div>

This needs a collections.sorting.all in your language file, like so:

After that, you need to include the snippet in your collection.liquid template like so:

here's the code for that:

{% if collection.current_type or handle == 'all' %}
      {% include 'collection-types' %}
    {% endif %}

This means that if you're currently viewing all products, or a product type based collection it will include the snippet.

You can see what the snippet looks like in the first picture.

Hope this helps!

0 Likes
New Member
1 0 0

Love this automatic product type list you've developed.  I understand it only works on /all but could logic be built in so that if the collection page and the vendor match, it would only display those results?  I've got 3 vendors for my store and don't want all of them to display at once.

0 Likes
New Member
2 0 0

I don't understand what you mean. Could you describe a little more clearly? maybe make a sketch

0 Likes