Use data-filter to categorize products by tags?

Question

I added MixItUp to my Shopify store. https://mixitup.kunkalabs.com/

How to use data-filter to categorize products by tags?

{% for collection in collections %}
<div class="productwrapper">

<div class="controls">
<a class="logo" href="/"></a> 

  <button class="filter" data-filter="all">Alle Produkte</button>
  <button class="filter" data-filter=".mappen">Mappen</button>
  <button class="filter" data-filter=".ordner">Ordner</button>



  <button class="sort" data-sort="myorder:asc">Beliebtheit</button>
  <button class="sort" data-sort="myorder:desc">A-Z</button>
</div>

<div id="Container" class="container">
{% for product in collection.products limit: settings.pagination_limit %}
{% include 'product-loop' with collection.handle %}
{% endfor %}  


</div>
<div class="gap"></div>
<div class="gap"></div>
</div>  

{% endfor %} 

My Shopify store:

http://gloria22x.myshopify.com/

Thanks, Alex

Answer 1

Simply include the correct class name for the product:

// These will show when .mappen is selected
<div class="mappen">
    // mappen category product
</div>
<div class="mappen">
    // mappen category product
</div>
<div class="mappen">
    // mappen category product
</div>


// these will show when .ordner is selected
<div class="ordner">
   // Ordner category product
</div>
<div class="ordner">
   // Ordner category product
</div>
<div class="ordner">
   // Ordner category product
</div>