THIS IS FOR COLLECTIONS FILTERING (also in gmail drafts)

{% paginate collection.products by 30 %}
<div>
<label for="sort-by">SORT BY</label>
<select id="sort-by">
<option value="price-ascending">Price: Low to High</option>
<option value="price-descending">Price: High to Low</option>
<option value="title-ascending">A-Z</option>
<option value="title-descending">Z-A</option>
<option value="best-selling">Best Selling</option>
</select>
</div>
<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('#sort-by')
.val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
});
</script>
<div id="collection-description" class="desktop-12">
<h1>{{ collection.title }}</h1>
{{ collection.description }}
</div>

{% if settings.filters %}
<div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
{% include 'dropdown-filter' %}
</div>
{% endif %}


<ul id="product-loop" style="width: 100%">
{% for product in collection.products %}
<li class="product desktop-4 mobile-3{% cycle ' first', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
{% if product.available %}
{% for col in product.collections %}
{% if col.handle == 'new' %}
<div class="new">NEW IN</div>
{% endif %}
{% endfor %}
{% if product.price < product.compare_at_price %}
<div class="sale-item">SALE</div>
{% endif %}
{% else %}
<div class="so">SOLD OUT</div>
{% endif %}


<a href="{{ product.url | within: collection }}">
<img src="{{ product.images[0] | product_img_url: 'grande' }}" alt="{{ product.title | escape }}"/>
</a>
<div id="product-info">
<a href="{{ product.url | within: collection }}">
{% if settings.vendor %}<p>{{ product.vendor }}</p>{% endif %}
<h3>{{ product.title }}</h3>
</a>
<div class="price">
{% if product.price < product.compare_at_price %}
<div class="onsale">{{ product.price | money }}</div>
<div class="was">{{ product.compare_at_price | money }}</div>

{% else %}
<div class="prod-price">{% if product.price_varies %} from {{ product.price_min | money }} - {{ product.price_max | money }} {% else %}{{ product.price | money }}{% endif %}</div>
{% endif %}


</div>
</div>
</li>
{% endfor %}

</ul>

<div id="pagination" class="desktop-12 tablet-6 mobile-3">

<span class="count">Showing items {{ paginate.current_offset | plus: 1 }}-{% if paginate.next %}{{ paginate.current_offset | plus: paginate.page_size }}{% else %}{{ paginate.items }}{% endif %} of {{ paginate.items }}.</span>

{% if paginate.previous %}
{{ '<' | link_to: paginate.previous.url }}
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
{{ part.title | link_to: part.url }}
{% else %}
{% if part.title == '&hellip;' %}
{{ part.title }}
{% else %}
<span class="current">{{ part.title }}</span>
{% endif %}
{% endif %}
{% endfor %}
{% if paginate.next %}
{{ '>' | link_to: paginate.next.url }}
{% endif %}
</div>
{% endpaginate %}