title: Shopify / Liquid: Separate a group of tags, then placing them on a select component
body: <p>I have a large set of tags, and I want to be able to sepparate them. For example, I have the <code>Green</code>, <code>Blue</code>, <code>Red</code>, <code>Black</code>, <code>Colorless</code> and <code>White</code> tags (as well as some other tags that aren't colors, so I won't put them here) and I want to place them in an array.
  I tried with something like this:</p>
  <pre><code>{% assign colors = &quot;&quot; | split: '' %}
  {% for tag in collection.all_tags %}
      {% if tag == 'Black' or tag == 'Blue' or tag == 'Colorless' or tag == 'Red' or tag == 'White' %}
          {% assign comma = &quot;,&quot; %}
          {% assign color = tag | split: '_' %}
          {% assign colors = colors | concat: color %}
          {% assign colors = colors | concat: comma %}
      {% endif %}
  {% endfor %}
  </code></pre>
  <p>However, that returns me <code>BlackBlueGreenRedColorlessWhite</code>, without any spaces whatsoever. Also, is there a way I can place those selected tags in a <code>&lt;select&gt;</code> component so I can filter my products by the selected tag? Like in the example provided in <a href="https://shopify.dev/themes/navigation-search/filtering/tag-filtering" rel="nofollow noreferrer">this page</a> but using a <code>&lt;select&gt;</code> instead of a <code>&lt;ul&gt;</code>.</p>