Collection filter on certain tags - multiple choice radio buttons and background colour

simonski
Shopify Partner
121 8 46

Hey community,

I work with minimal theme, and I filter on certain "-filter" tags in my collection using this method:

https://community.shopify.com/c/Shopify-Design/Collection-filtering-only-on-certain-tags/td-p/210935

Does anybody know how to realize a multiple choice for the radio buttons? It would be perfect if the user is not limited to one choice. Also, it would be great to keep a darker background-colour for the activated radio button(s). And one more dream, if it's possible to activate multiple radio buttons, it would be great to implement a "x clear selection" button, which resets the activated radio buttons.

Any help would be very much appreciated.

My store: menschenskinder-shop.de

Password: vuffey

Thank you!

simonski
Shopify Partner
121 8 46

The code inside the collection.liquid is this:

<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 tag contains 'filter-' %}
    {% assign tagName = tag | remove: 'filter-' %}
    {% if current_tags contains tag %}    
        <li class="tag--active">
          {{ tagName | link_to_remove_tag: tag }}
        </li>
      {% else %}
        <li>
          {{ tagName | link_to_tag: tag }}
        </li>
      {% endif %}   
  {% endif %}
{% endfor %}
</ul>
<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.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>
{% section 'collection-template' %}
<script>

I don't understand why the radio button is going back to neutral colour after activating it. Actually it should keep the ".subnav li.active a {" color as defined right? But after clicking, the page reloads correctly to show the selected products with the tag, but the radio button that was just clicked on looks like all the others?

Johann-Davel
Tourist
7 0 0

Did you ever find a solution, im in need of the same thing.

0 Likes