Skip to content

Instantly share code, notes, and snippets.

@kbxian
Created April 16, 2018 07:02
Show Gist options
  • Save kbxian/7235cb05d1e7e6ca729f15d9a54ae031 to your computer and use it in GitHub Desktop.
Save kbxian/7235cb05d1e7e6ca729f15d9a54ae031 to your computer and use it in GitHub Desktop.
Add filter to Shopify collection page
<div class="custom-filter-div">
<label for="custom-filter-by">Filter By</label>
<select name="custom-filter-by" class="custom-filter-by" style="width: 100%; font-size: 15px; line-height: 15px; cursor: pointer; background: #ededed; text-align: left; -webkit-appearance: none; padding: 10px 50px 10px 20px; border-radius: 0; border: 0;">
<option value="">{{ 'collections.filtering.all' | t }}</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>
<label for="custom-sort-by">Sort By</label>
<select name="custom-sort-by" id="custom-sort-by" style="width: 100%; font-size: 15px; line-height: 15px; cursor: pointer; background: #ededed; text-align: left; -webkit-appearance: none; padding: 10px 50px 10px 20px; border-radius: 0; border: 0;">
<option value="manual">{{ 'collections.sorting.featured' | t }}</option>
<option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
<option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
<option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
<option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
<option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
<option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
<option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
</select>
<button id="apply-sort-filter" class="button" style="margin-right: 10px;">{{ 'sidebar.collection_filters.submit' | t }}</button>
<!--<button id="clear-sort-filter" class="button">{{ 'sidebar.collection_filters.clear' | t }}</button>-->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment