drew-collection.liquid

<section class="section">
    <div class="grid column-1">
        <div class="grid__item-gallery">
        {% for collection in collections %}
            {% if collection.image %}
            <img src="{{ collection | img_url: '450x450' }}" alt="{{ collection.image.alt }}" />
            {% else %}
            <img src="{{ collection.products.first | img_url: '450x450' }}" alt="{{ collection.title | escape  }}" />
            {% endif %}
        {% endfor %}
        </div>
    </div>
</section>

<section class="section">
    <div class="grid column-1">
        <div class="grid__item-links">
            <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 */
                const collFilters = document.querySelectorAll('.coll-filter');
              
                if (collFilters.length > 0) {
                  collFilters.forEach((collFilter) => {
                    collFilter.addEventListener('change', function(){
                      var newTags = [];
                      collFilters.forEach((collFilter) => {
                        for(var i = 0; i <= collFilter.length-1; i++){
                          if(collFilter[i].selected == true && collFilter[i].value != "") {
                            newTags.push(collFilter[i].value);
                          }
                        }
                      });
              
                      if (newTags.length) {
                        var query = newTags.join('+');
                        window.location.href = '/collections/{{ collection.handle }}/' + 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>
        
    
        </div>
    
    </div>
</section>

<section class="section">
    <div class="grid column-1">
        <div class="grid__item-links">
            
            <ul class="subnav clearfix">
                <li{% unless current_tags %} class="active"{% endunless %}>
                  {% if collection.handle %}
                  <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
                  {% elsif collection.current_type %}
                  <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
                  {% elsif collection.current_vendor %}
                  <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
                  {% endif %}
                </li>
                {% for tag in collection.all_tags %}
                {% if current_tags contains tag %}
                <li class="active">
                  {{ tag | link_to_remove_tag: tag }}
                </li>
                {% else %}
                <li>
                  {{ tag | link_to_tag: tag }}
                </li>
                {% endif %}
                {% endfor %}
              </ul>
              <style>
                .clearfix:before, .clearfix:after { content: ""; display: table; }
                .clearfix:after { clear: both; }
                .clearfix { zoom: 1; }
                /* Subnavigation styles */
                .subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }
                .subnav li { display: block; float: left; }
                .subnav li a {
                  display: block;
                  height: 28px;
                  line-height: 28px;
                  padding: 0 7px;
                  -webkit-border-radius: 7px;
                  -moz-border-radius: 7px;
                  border-radius: 7px;
                  background: #eee;
                  margin: 0 7px 7px 0;
                  color: #666;
                }
                .subnav li a:hover, .subnav li.active a {
                  background: #666;
                  color: #fff;
                }
              </style>

    
        </div>
    
    </div>
</section>