Shopify Collection Tag Filter

Hi everyone,

I have a Shopify website and on the product page [login to view URL], I have a filter Location that includes certain tags, Melbourne & Sydney. I would like to add additional filters based on other groups of tags e.g. No of Guests, with an AND condition so that users can select one tag from each filter. Thank you :)

The current code is:

<ul class="subnav clearfix">

<li{% unless current_tags %} class="active"{% endunless %}>

{% if [login to view URL] %}

<a href="/collections/{{ [login to view URL] }}{% 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>

{% assign show_tags = "Sydney,Melbourne" | split: "," %}

{% for tag in collection.all_tags %}

{% unless show_tags contains tag %}

{% continue %}

{% endunless %}

{% 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>

/* Contain floats: [login to view URL] */

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/* Subnavigation styles */

.subnav { clear: both; list-style-type: none; margin-left: 43.75%; 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: #000000;

}

.subnav li a:hover, .subnav [login to view URL] a {

background: #F5C6AA;

color: #fff;

}

</style>

Shopify Templates Shopify HTML JavaScript CSS

Project ID: #32660733

About the project