d
Topic
Posts:
5
January 10, 2017

Display collection based on tag

I'm using minimal template. 
I would like to display items based on tags on collection page like the image below. 

Currently all products mixed up.
https://pyjama-protocol.myshopify.com/collections/men

As I don't have many products - I'm happy to hard code as well. 

Or Can I use Page templates and add products collections based on tag manually? 

Does anyone have any idea? 
Thank you

i
Replies
John D Shopify Employee
Posts:
189
January 10, 2017

Hi there Aya!

My name is John and I'm a Guru here at Shopify!

It sounds like what you'd like to do here should be possible by filtering your collection with tags.

This would require just a little coding work on your behalf, as you would simply need to add the following code to your collection.liquid template where you want this filter to appear:

<div class="clearfix filter">
  <p>Browse by tag:</p>
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endfor %}
  </select>
</div>

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
    }
    else {
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
    }
  });
</script>

 

Let me know if you want any more info or advice on this Aya! :)

 

John D

Posts:
5
Last edited January 10, 2017

Thanks for helping me John D. 

I added the script. But I already have a filter on my page. I have two fileters now with the script. 
https://pyjama-protocol.myshopify.com/collections/women

I want to show all product on the page but I want to display exactly like the screenshot I attached. 

1 line/row - Collection / tag (Pyjama Tops) 
2 line/row - Collection / tag (Sleep Shorts)
3 line/row - Collection / tag (Pyjama Sets) etc... 

I found similar discussion but I added the script but It gave me an error.
https://ecommerce.shopify.com/c/ecommerce-design/t/getting-products-by-tags-when-in-a-collection-111353

 

Posts:
5
January 12, 2017

Thanks for helping me John D. 

I added the script. But I already have a filter on my page. I have two fileters now with the script. 
https://pyjama-protocol.myshopify.com/collections/women

I want to show all product on the page but I want to display exactly like the screenshot I attached. 

1 line/row - Collection / tag (Pyjama Tops) 
2 line/row - Collection / tag (Sleep Shorts)
3 line/row - Collection / tag (Pyjama Sets) etc... 

I found similar discussion but I added the script but It gave me an error.
https://ecommerce.shopify.com/c/ecommerce-design/t/getting-products-by-tags-when-in-a-collection-111353

Posts:
1
4 days ago

Hi I wanted to reply to this thread even though it is outdated since I have the *exact* same question. I do not want a tag chooser that shows things based on what the user chooses. I want one row to display medium roast coffees, the next row to display dark roast coffees, the next below it to display decaf, etc. Kind of like netflix' layout. 

Any ideas on this? I'll post in the main forums.