How to Loop through & Sort Metaobjects in Shopify (Code Included)

<style>
  .ig-story-flex-ctr {
    padding: 10px 0px 5px 10px;
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  }
  .ig-story-flex-ctr::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
  .ig-story-flex-ctr .story-link:first-child {
    margin - left: auto;
  }

  .ig-story-flex-ctr .story-link:last-child {
    margin - right: auto;
  }

  .story-img {
    width: 90px;
  height: 90px;
  background-position: center;
  background-size: cover;
  border-radius: 15px; 
  }
  .story-collection-title {
    margin - block - start: 0;
  margin-block-end: 0;
  font-size: 10px;
  margin-top: 5px;
  }
  .story-link {
    text - decoration: none;
  color: #727272;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 90px;
  height: auto;
  margin-right: 10px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  }
  .story-link:hover{
    color: #26a1de;
  font-weight: bold;
  }
  .story-link:active{
    color: #26a1de;
  }

  @media only screen and (min-width: 500px) {
    /* For tablet: */
   .ig - story - flex - ctr {
    display: none;
  padding: 10px 0px 10px 10px;
  }
  .ig-story-flex-ctr * {
    width: 100px;
  height: auto;
  }
  .story-img {
    width: 100px;
  height: 100px;
  }
  .story-collection-title {
    font - size: 12px;
  margin-top: 10px;
  }
    }

  @media only screen and (min-width: 768px) {
    /* For desktop: */
  .ig - story - flex - ctr {
    display: none;
  padding: 10px 0px 10px 10px;
  }
  .ig-story-flex-ctr * {
    width: 130px;
  height: auto;
  }
  .story-img {
    width: 130px;
  height: 130px;
  }
  .story-collection-title {
    font - size: 14px;
  margin-top: 10px;
  }
    }

</style>

{% assign collectionArray = shop.metaobjects.collection_item.values %}
{% assign sortedArray = collectionArray | sort: 'order' %}

<div>
  <div class="ig-story-flex-ctr">
    {% for collection in sortedArray %}
    <a href="{{ collection.collection_url.value }}" class="story-link">
      <div class="story-img" style="background-image: url('{{ collection.collection_image.value | img_url: '500x500'}}')"></div>
      <p class="story-collection-title">{{ collection.collection_title.value }}</p>
    </a>
    {% endfor %}
  </div>
</div>




{% schema %}
{
  "name": "Col Slider Metaobject",
    "settings": [
      {
        "type": "html",
        "id": "custom_html",
        "label": "Custom HTML",
        "default": "<style></style>"
      }
    ],

      "presets": [
        {
          "name": "Col Slider Metaobject"
        }
      ]
}
{% endschema %}