Displaying Product Types as buttons that will take customer to filtered page.

[Annuksun]

Hi Dear Shopify Community,

Looking for some help on a complicated task I have in hand. Sorry, I'm not a developer but trying to introduce some complex features to the website. 

Essentially, I have a number of collections that are vendor collections that have their own Collection Template.

As the first step for such collections, I need a liquid that will display all product types that exist only in this collection. 

As the second step, each of those collections needs to be a button that will take to a filtered URL that will look something like 

https://www.shop_name/collections/{{VENDOR_NAME}}/?filter.p.product_type={{product_type}}

Any thoughts on how to tackle this job?

Also, I'm assuming that it will require cycling through the products to get all product type so for big collection there maybe an issue with performance. 

Any help is much appreciated!

Thanks

[jsteven831]

I accomplished this by creating a collections template adding custom liquid and css as follows and it gives me a button for each product type for that collection. (the css just prettifies my buttons) 😉

Custom Liquid



{% for product_type in collection.all_types -%}

  <button class="ui button">{{- product_type | link_to_type }}</button>

{%- endfor %}





CSS





button {

  display: inline-block;

   padding: 0.3em 1.2em;

   margin: 0 0.1em 0.1em 0;

   border: 0.16em solid rgba(255, 255, 255, 0);

   border-radius: 2em;

   box-sizing: border-box;

   text-decoration: none;

   font-family: "Roboto", sans-serif;

   font-weight: 300;

   color: #ffffff;

   text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);

   text-align: center;

   transition: all 0.2s;

}

button:hover {

  border-color: rgba(255, 255, 255, 1);

}

[jsteven831]

Actually issue with buttons not working right. Use this code to get what you want:

{% for product_type in collection.all_types -%}
  <a href="{{collection.url}}?filter.p.product_type={{product_type}}"><button class="ui button">{{product_type}}</button></a>
{%- endfor %}