Product Tag Filter drop-down menu - location

Store Design
1

Hi there,

I have included below script into my collections so I can have a drop-down menu for filtering by product tag. Its working great for me but with one issue.

I dont know how to do it so that the drop-down menu is showing under the collection image and name. I am using Brooklyn Theme. Hope someone clever can point me in the right direction :slight_smile:

Here is the code from collections.liquid :

<!-- /templates/collection.liquid -->

{% comment %}

  The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}
<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>
{% section 'collection-template' %}

How Can I have this drop-down located between collection description and product images?

123456 copy.png
123456 copy.png1252×472 53.5 KB

Thank you very much in advance :slight_smile:

Kind regards

Theriion

2

you added code before collection template, so if you want to add after title / description, then you need to add it to collect location in collection template

3

Hi there Suyash1!
Thank your very much for a quick advice. Unfortunately it seems that I am so bad with the scripts and stuff that I’m not sure where to paste this into even with your pointers ;(.
No matter where I put this code in its either as shown on screenshot or it goes all the way to the ed of page.
I don’t know what to do lol.

4

if you can add me to staff then I can try it.

5

how can i show the product collection names instead of tags is it possible?