d
Topic
Posts:
4
14 days ago

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:
14
14 days ago

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:
4
Last edited 14 days ago

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:
4
12 days ago

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