Assign group of collections depending on metafield assigned to the collections?

Store Design
,
1

I am trying to make a menu for a client. For the example, let’s say it is a fruit store. (It’s not actually a fruit store.)

The fruit store has automated collections. Each of these automated collections has one of four collection.metafields.grouping.menusection values assigned to it. The four possible values are: “texture”, “color”, “type”, and “size”. This value corresponds to where the collection’s link will appear in the menu.

For example, if the collection’s grouping.menusection equals “texture”, it will appear in the menu under the “Shop by Texture” list. Examples of collections with the “texture” value might be “Squishy Fruits”, “Hard Fruits”, “Grainy Fruits”. If the value is “color”, collections appearing under “Shop by Color” might include “Red Fruits”, “Yellow Fruits”, “Purple Fruits”. So on and so forth, “type” might include “Tree Fruits” or “size” might include “Giant Fruits”.

I would like to know if it is possible to use grouping.menusection to create four lists of collections, depending on whether the value is “texture”, “color”, “type”, or “size”.

This code works, but might be considered clunky. I would like to change it:

<h2>Shop by Texture</h2>
  <ul>
    {% for collection in collections %}
      {% if collection.metafields.grouping.menusection == 'texture' %}
        <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>

<h2>Shop by Color</h2>
  <ul>
    {% for collection in collections %}
      {% if collection.metafields.grouping.menusection == 'color' %}
        <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>

<h2>Shop by Type</h2>
  <ul>
    {% for collection in collections %}
      {% if collection.metafields.grouping.menusection == 'type' %}
        <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>

<h2>Shop by Size</h2>
  <ul>
    {% for collection in collections %}
      {% if collection.metafields.grouping.menusection == 'size' %}
        <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>

This code does not work, but I would like it to, because I think it might take less load time:

{% assign texture_collections = collections | where: 'collection.metafields.grouping.menusection', 'texture' %}
{% assign color_collections = collections | where: 'collection.metafields.grouping.menusection', 'color' %}
{% assign type_collections = collections | where: 'collection.metafields.grouping.menusection', 'type' %}
{% assign size_collections = collections | where: 'collection.metafields.grouping.menusection', 'size' %}

<h2>Shop by Texture</h2>
  <ul>
    {% for collection in texture_collections %}
      <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
    {% endfor %}
  </ul>

<h2>Shop by Color</h2>
  <ul>
    {% for collection in color_collections %}
      <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
    {% endfor %}
  </ul>

<h2>Shop by Type</h2>
  <ul>
    {% for collection in type_collections %}
      <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
    {% endfor %}
  </ul>

<h2>Shop by Size</h2>
  <ul>
    {% for collection in size_collections %}
      <li><a href={{ collection.url }}>{{ collection.title }}</a></li>
    {% endfor %}
  </ul>

It will later become a more complex mega menu. Technically we can use the first example of code-- but as I understand it, the more things for loops have to run through, the worse the load time.

If you have any suggestions, please let me know. Thank you!