Sorting by product date metafield on collection page

IvGordiichuk
Shopify Partner
12 0 0

Hi.

I have products with date metafields. 

Can I sort products by date metafields on collection page?

Is it possible?

Thank You!

Replies 3 (3)
EricVNstudios
New Member
1 0 0

Hi!! Having the exactly same issue here! Can you resolve that??

IvGordiichuk
Shopify Partner
12 0 0

Hi. Yes? I added sorting. My collection template with js

{%- comment -%}We start by creating a lot of useful variables !{%- endcomment -%}
{% style %}
	.value-picker__choice-item[data-value="title-ascending"], .value-picker__choice-item[data-value="title-descending"] {display:none!Important;}
	.collection__description {
		padding: 10px 20px;
		border-bottom: var(--footer-border);
	}
  #SortBy {
    border:none!Important;

  }
{% endstyle %}




{%- assign items_per_page = 100 -%}

{%- assign has_visible_tags = false -%}

{%- if section.settings.show_filters -%}
  {%- if section.settings.filter_type == 'tag' -%}
    {%- for tag in collection.all_tags -%}
      {%- unless tag contains '__' -%}
        {%- assign has_visible_tags = true -%}
        {%- break -%}
      {%- endunless -%}
    {%- endfor -%}
  {%- elsif section.settings.filter_type == 'group' -%}
    {%- for tag in collection.all_tags -%}
      {%- assign tag_parts = tag | split: '_' -%}

      {%- if tag_parts.size >= 2 -%}
        {%- assign has_visible_tags = true -%}
        {%- break -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
{%- endif -%}

{%- assign quick_links_menu = linklists[section.settings.quick_links] -%}

{%- if quick_links_menu.links.size > 0 or has_visible_tags -%}
  {%- assign has_filters = true -%}
{%- else -%}
  {%- assign has_filters = false -%}
{%- endif -%}

{%- if has_filters -%}
  {%- capture grid_classes -%}1/3--tablet-and-up 1/{{ section.settings.products_per_row }}--desk{%- endcapture -%}
{%- else -%}
  {%- capture grid_classes -%}1/3--tablet 1/{{ section.settings.products_per_row }}--lap-and-up{%- endcapture -%}
{%- endif -%}

{%- assign view_mode = cart.attributes.collection_layout | default: section.settings.default_view_layout -%}

{%- capture section_settings -%}
{
  "currentSortBy": {{ collection.sort_by | default: collection.default_sort_by | json }},
  "currentTags": [{% for tag in current_tags %}{{ tag | handle | json }}{% unless forloop.last %},{% endunless %}{% endfor %}],
  "filterType": {{ section.settings.filter_type | json }},
  "defaultLayout": {{ section.settings.default_view_layout | json }},
  "defaultProductsPerPage": {{ section.settings.default_products_per_page | json }},
  "isAutomatic": {% if collection.current_vendor != blank %}true{% else %}false{% endif %},
  "gridClasses": {{ grid_classes | json }}
}
{%- endcapture -%}

<section data-section-id="{{ section.id }}" data-section-type="collection" data-section-settings='{{ section_settings }}'>
  <div class="container container--flush">
    <div class="page__sub-header">
      <nav aria-label="{{ 'general.breadcrumb.title' | t }}" class="breadcrumb">
        <ol class="breadcrumb__list" role="list">
          <li class="breadcrumb__item">
            <a class="breadcrumb__link link" href="{{ routes.root_url }}">{{ 'general.breadcrumb.home' | t }}</a> {%- render 'icon', icon: 'arrow-right' -%}
          </li>

          <li class="breadcrumb__item">
            {%- if current_tags -%}
              <a class="breadcrumb__link link" href="{{ collection.url }}" {% unless current_tags %}aria-current="page"{% endunless %}>
                {%- if collection.handle == 'all' -%}
                  {{- 'collection.general.all_products' | t -}}
                {%- else -%}
                  {{- collection.title -}}
                {%- endif -%}
              </a>

              {%- render 'icon', icon: 'arrow-right' -%}
            {%- else -%}
              <span class="breadcrumb__link" aria-current="page">
                {%- if collection.handle == 'all' -%}
                  {{- 'collection.general.all_products' | t -}}
                {%- else -%}
                  {{- collection.title -}}
                {%- endif -%}
              </span>
            {%- endif -%}
          </li>

          {%- if current_tags -%}
            <li class="breadcrumb__item">
              {%- if section.settings.filter_type == 'tag' -%}
                {%- assign tag = current_tags.first -%}
              {%- elsif section.settings.filter_type == 'group' -%}
                {%- assign tag = current_tags.first | split: '_' | last -%}
              {%- endif -%}

              <span class="breadcrumb__link" aria-current="page">{{ tag | capitalize }}</span>
            </li>
          {%- endif -%}
        </ol>
      </nav>
    </div>

    <div {% if has_filters %}class="layout"{% endif %}>
      {%- comment -%}
      --------------------------------------------------------------------------------------
      FILTER BAR (DESKTOP)
      --------------------------------------------------------------------------------------
      {%- endcomment -%}

      {%- if has_filters -%}
        <div class="layout__section layout__section--secondary hidden-pocket">
          <div class="card">
            {%- if quick_links_menu.links.size > 0 -%}
              <div class="card__section card__section--tight">
                <p class="card__title--small heading">{{ quick_links_menu.title }}</p>

                <ul class="collection__filter-linklist" role="list">
                  {%- for link in quick_links_menu.links -%}
                    <li>
                      {%- if link.links.size > 0 -%}
                        {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

                        <button class="collection__filter-link link link--primary {% if link.active or link.child_active %}is-active{% endif %}" data-action="toggle-collapsible" aria-controls="{{ link_id }}" aria-expanded="{% if link.active or link.child_active %}true{% else %}false{% endif %}">
                          {{ link.title }} {% if link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ link.object.products_count }}){% endif %} {%- render 'icon', icon: 'arrow-bottom' -%}
                        </button>

                        <div id="{{ link_id }}" class="collection__filter-collapsible" {% if link.active or link.child_active %}aria-hidden="false" style="height: auto"{% else %}aria-hidden="true"{% endif %}>
                          <ul class="collection__filter-linklist" role="list">
                            {%- for sub_link in link.links -%}
                              <li>
                                {%- if sub_link.links.size > 0 -%}
                                  {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

                                  <button class="collection__filter-link link link--primary {% if sub_link.active or sub_link.child_active %}is-active{% endif %}" data-action="toggle-collapsible" aria-controls="{{ link_id }}" aria-expanded="{% if sub_link.active or sub_link.child_active %}true{% else %}false{% endif %}">
                                    {{ sub_link.title }} {% if sub_link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ sub_link.object.products_count }}){% endif %} {%- render 'icon', icon: 'arrow-bottom' -%}
                                  </button>

                                  <div id="{{ link_id }}" class="collection__filter-collapsible" {% if sub_link.active or sub_link.child_active %}aria-hidden="false" style="height: auto"{% else %}aria-hidden="true"{% endif %}>
                                    <ul class="collection__filter-linklist" role="list">
                                      {%- for sub_sub_link in sub_link.links -%}
                                        <li>
                                          <a href="{{ sub_sub_link.url }}" class="collection__filter-link link link--primary {% if sub_sub_link.active %}is-active{% endif %}">{{ sub_sub_link.title }} {% if sub_sub_link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ sub_sub_link.object.products_count }}){% endif %}</a>
                                        </li>
                                      {%- endfor -%}
                                    </ul>
                                  </div>
                                {%- else -%}
                                  <a href="{{ sub_link.url }}" class="collection__filter-link link link--primary {% if sub_link.active %}is-active{% endif %}">{{ sub_link.title }} {% if sub_link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ sub_link.object.products_count }}){% endif %}</a>
                                {%- endif -%}
                              </li>
                            {%- endfor -%}
                          </ul>
                        </div>
                      {%- else -%}
                        <a href="{{ link.url }}" class="collection__filter-link link link--primary {% if link.active %}is-active{% endif %}">{{ link.title }} {% if link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ link.object.products_count }}){% endif %}</a>
                      {%- endif -%}
                    </li>
                  {%- endfor -%}
                </ul>
              </div>
            {%- endif -%}

            {%- if section.settings.show_filters and has_visible_tags -%}
              <div class="card__section card__section--tight">
                <p class="card__title--small heading">{{ 'collection.filter.all' | t }}</p>

                <div class="collection__active-filters">
                  {%- for tag in current_tags -%}
                    <div class="collection__active-filter-item">
                      <button class="collection__active-filter-cross" data-action="toggle-tag" data-tag="{{ tag | handle }}">{% render 'icon', icon: 'close' %}</button>

                      {%- if section.settings.filter_type == 'group' -%}
                        {{- tag | split: '_' | last -}}
                      {%- else -%}
                        {{- tag -}}
                      {%- endif -%}
                    </div>
                  {%- endfor -%}

                  {%- if current_tags != blank and current_tags.size > 1 -%}
                    <button class="collection__clear-filter button button--small button--transparent button--full" data-action="clear-tags">{{ 'collection.filter.clear_all' | t }}</button>
                  {%- endif -%}
                </div>

                {%- if section.settings.filter_type == 'tag' -%}
                  <div class="collection__filter-group">
                    <ul class="collection__filter-checkbox-list" role="list">
                      {%- for tag in collection.all_tags -%}
                        {%- comment -%}Tags that start by two consecutive underscores (__) are used for internal purpose and must be removed from here{%- endcomment -%}

                        {%- unless tag contains '__' -%}
                          <li class="collection__filter-checkbox">
                            <div class="checkbox-wrapper">
                              <input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
                              {% render 'icon', icon: 'check' %}
                            </div>

                            <label for="{{ link_id }}-tag-{{ tag | handle }}">{{ tag }}</label>
                          </li>
                        {%- endunless -%}
                      {%- endfor -%}
                    </ul>
                  </div>
                {%- elsif section.settings.filter_type == 'group' -%}
                  {%- assign groups = '' -%}

                  {%- for tag in collection.all_tags -%}
                    {%- assign tag_parts = tag | split: '_' -%}

                    {%- if tag_parts.size < 2 or tag contains '__' -%}
                      {%- continue -%}
                    {%- endif -%}

                    {%- assign groups = groups | append: tag_parts.first | append: ',' -%}
                  {% endfor %}

                  {%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
                  {%- assign groups = groups | split: ',' | compact | uniq -%}

                  {%- assign groups_order = section.settings.filter_group_order | downcase | strip | replace: ', ', ',' | split: ',' -%}

                  <div class="collection__filter-group-list {% if groups_order.size > 0 %}collection__filter-group-list--ordered{% endif %}">
                    {%- for group in groups -%}
                      {%- assign group_downcase = group | downcase -%}

                      {%- comment -%}
                      If we are within the special "brand" alternate template, then we do not show the "brand" or "vendor" group
                      {%- endcomment -%}

                      {%- if collection.template_suffix == 'brand' -%}
                        {%- assign brand_label = 'brand,vendor,marque' | split: ',' -%}

                        {%- if brand_label contains group_downcase -%}
                          {%- continue -%}
                        {%- endif -%}
                      {%- endif -%}

                      {%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
                        {%- assign show_color_swatch = true -%}
                      {%- else -%}
                        {%- assign show_color_swatch = false -%}
                      {%- endif -%}

                      {%- assign has_active_tag_from_group = false -%}

                      {%- for tag in current_tags -%}
                        {%- assign current_tag_parts = tag | split: '_' -%}
                        {%- assign current_tag_group_downcase = current_tag_parts.first | downcase -%}

                        {%- if group_downcase == current_tag_group_downcase -%}
                          {%- assign has_active_tag_from_group = true -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}

                      {%- comment -%}If the group name belongs to the group order, we force this order by using flexbox{%- endcomment -%}

                      {%- assign current_group_order = 99 -%}

                      {%- if groups_order contains group_downcase -%}
                        {%- for group_order_name in groups_order -%}
                          {%- if group_order_name == group_downcase -%}
                            {%- assign current_group_order = forloop.index -%}
                            {%- break -%}
                          {%- endif -%}
                        {%- endfor -%}
                      {%- endif -%}

                      <div class="collection__filter-group" {% if groups_order.size > 0 %}style="order: {{ current_group_order }}"{% endif %}>
                        {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

                        {%- assign is_collapsible_open = false -%}

                        {%- if has_active_tag_from_group or section.settings.open_group_filters_mode == 'all_open' -%}
                          {%- assign is_collapsible_open = true -%}
                        {%- elsif section.settings.open_group_filters_mode == 'first_open' -%}
                          {%- if groups_order.size > 0 -%}
                            {%- if current_group_order == 1 -%}
                              {%- assign is_collapsible_open = true -%}
                            {%- endif -%}
                          {%- elsif forloop.first -%}
                            {%- assign is_collapsible_open = true -%}
                          {%- endif -%}
                        {%- endif -%}

                        <button class="collection__filter-group-name link link--secondary text--strong" data-action="toggle-collapsible" aria-controls="{{ link_id }}" data-close-siblings="false" data-collapsible-force-overflow="true" aria-expanded="{% if is_collapsible_open %}true{% else %}false{% endif %}">
                          {{- group -}}
                          {%- render 'icon', icon: 'arrow-bottom' -%}
                        </button>

                        <div id="{{ link_id }}" class="collection__filter-collapsible" {% if is_collapsible_open %}aria-hidden="false" style="height: auto; overflow: visible"{% else %}aria-hidden="true"{% endif %}>
                          {%- if show_color_swatch -%}
                            <div class="collection__filter-color-list">
                              <div class="color-swatch-list color-swatch-list--large">
                                {%- for tag in collection.all_tags -%}
                                  {%- assign tag_parts = tag | split: '_' -%}

                                  {%- if tag_parts.first != group or tag contains '__' or tag_parts.size == 1 -%}
                                    {%- continue -%}
                                  {%- endif -%}

                                  {%- assign downcased_value = tag_parts.last | downcase -%}
                                  {%- capture color_id -%}filter-color-{% increment color_index %}{%- endcapture -%}

                                  {%- assign color_swatch_name = tag_parts.last | handle | append: '.png' -%}
                                  {%- assign color_swatch_image = images[color_swatch_name] -%}

                                  <div class="color-swatch {% if downcased_value == 'white' or downcased_value == 'blanc' %}color-swatch--white{% endif %}" data-tooltip="{{ tag_parts.last | escape }}">
                                    <button type="button" class="color-swatch__button {% if current_tags contains tag %}is-selected{% endif %}" data-action="toggle-tag" data-tag="{{ tag | handle }}" data-tag-user="{{ tag_parts.last | escape }}" aria-label="{{ tag_parts.last | escape }}">
                                      <span class="color-swatch__item lazyload" {% if color_swatch_image != blank %}data-bg="{{ color_swatch_image | img_url: '64x64' }}"{% else %}style="background-color: {{ downcased_value | replace: ' ', '' }}"{% endif %}></span>
                                    </button>
                                  </div>
                                {%- endfor -%}
                              </div>
                            </div>
                          {%- else -%}
                            <ul class="collection__filter-checkbox-list" role="list">
                              {%- for tag in collection.all_tags -%}
                                {%- assign tag_parts = tag | split: '_' -%}

                                {%- if tag_parts.first != group or tag contains '__' or tag_parts.size == 1 -%}
                                  {%- continue -%}
                                {%- endif -%}

                                <li class="collection__filter-checkbox">
                                  <div class="checkbox-wrapper">
                                    <input type="checkbox" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-{{ tag_parts.first | handle }}" data-action="toggle-tag" data-tag="{{ tag | handle }}" data-tag-user="{{ tag_parts.last | escape }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
                                    {% render 'icon', icon: 'check' %}
                                  </div>

                                  <label for="{{ link_id }}-tag-{{ tag | handle }}">{{ tag_parts.last }}</label>
                                </li>
                              {%- endfor -%}
                            </ul>
                          {%- endif -%}
                        </div>
                      </div>
                    {%- endfor -%}
                  </div>
                {%- endif -%}
              </div>
            {%- endif -%}
          </div>
        </div>
      {%- endif -%}

      {%- paginate collection.products by items_per_page -%}
        <div {% if has_filters %}class="layout__section"{% endif %}>
          <div class="collection">
            {%- unless collection.template_suffix == 'brand' -%}
              {%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 -%}
                {%- if section.settings.collection_image_size == 'preserve_ratio' -%}
                  {%- capture supported_sizes -%}{%- render 'image-size', sizes: '400,500,600,700,800,900,1000, 1200, 1400, 1600', image: collection.image -%}{%- endcapture -%}
                  {%- assign image_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                  <div class="collection__image-wrapper collection__image-wrapper--preserve-ratio">
                    <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: collection.image.aspect_ratio }}%">
                      <img class="lazyload image--fade-in" data-src="{{ image_url }}" data-sizes="auto" data-widths="[{{ supported_sizes }}]" alt="{{ collection.image.alt | escape }}">
                    </div>
                  </div>
              {%- else -%}
                  <div class="collection__image-wrapper collection__image-wrapper--{{ section.settings.collection_image_size }}" style="background-image: url({{ collection.image | img_url: '1x1' }})">
                    <div class="collection__image lazyload image--fade-in" data-bgset="{{ collection.image | img_url: '600x' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1000x' }} 1000w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1500x' }} 1500w"></div>
                  </div>
                {%- endif -%}
              {%- endif -%}
            {%- endunless -%}

            {%- comment -%}
            --------------------------------------------------------------------------------------
            TOP PART (COLLECTION INFO + TOOLBAR)
            --------------------------------------------------------------------------------------
            {%- endcomment -%}

            {%- if collection.all_products_count == 0 -%}
              <div class="empty-state">
                <p class="empty-state__heading heading h1">{{ collection.title }}</p>
                <p class="empty-state__description">{{ 'collection.general.empty' | t }}</p>

                <div class="empty-state__button-container">
                  <a href="{{ routes.root_url }}" class="empty-state__button button button--primary">{{ 'collection.general.empty_button' | t }}</a>
                </div>
              </div>
            {%- else -%}
              <div class="card {% if collection.products_count == 0 %}clearfix{% endif %}">
                <header class="card__header {% unless collection.template_suffix == 'brand' %}card__header--tight{% endunless %}">
                  {%- comment -%}
                  IMPLEMENTATION NOTE: unfortunately I was forced to add a lot of extra div (collection__meta, collection__meta-inner, collection__header-inner,...)
                                       to be able to accommodate with the brand related layout which make things more complicated...
                  {%- endcomment -%}

                  <div class="collection__header {% if collection.template_suffix == 'brand' %}collection__header--brand{% endif %}">
                    {%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}
                      <div class="collection__brand-logo-wrapper hidden-pocket">
                        <div class="collection__brand-logo-image lazyload image--fade-in" data-bg="{{ collection.image | img_url: '250x' }}"></div>
                      </div>
                    {%- endif -%}

                    <div class="collection__header-inner">
                      <div class="collection__meta">
                        {%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}
                          <div class="collection__brand-logo-wrapper hidden-lap-and-up">
                            <div class="collection__brand-logo-image lazyload image--fade-in" data-bg="{{ collection.image | img_url: '250x' }}"></div>
                          </div>
                        {%- endif -%}

                        <div class="collection__meta-inner">
                          <h1 class="collection__title heading h1">
                            {%- if collection.handle == 'all' -%}
                              {{- 'collection.general.all_products' | t -}}
                            {%- else -%}
                              {{- collection.title -}}
                            {%- endif -%}
                          </h1>

                          <p class="collection__products-count text--small hidden-desk">{{ 'collection.general.products_count' | t: count: collection.all_products_count }}</p>
                        </div>
                      </div>
                      
                      
                      
					  {% comment %}
                      {%- if collection.description != blank -%}
                        {%- assign allow_collapse_description = false -%}

                        {%- if section.settings.collapse_collection_description -%}
                          {%- assign allow_collapse_description = true -%}
                        {%- endif -%}

                        <div class="collection__description {% if allow_collapse_description %}expandable-content{% endif %}" aria-expanded="false">
                          <div class="rte">
                            {{ collection.description }}
                          </div>

                          {%- if allow_collapse_description -%}
                            <button class="expandable-content__toggle">
                              <span class="expandable-content__toggle-icon"></span>
                              <span class="expandable-content__toggle-text" data-view-more="{{ 'collection.general.view_more' | t | escape }}" data-view-less="{{ 'collection.general.view_less' | t | escape }}">{{- 'collection.general.view_more' | t -}}</span>
                            </button>
                          {%- endif -%}
                        </div>
                      {%- endif -%}
                      {% endcomment %}
                    </div>
                  </div>
                </header>

                <div class="collection__dynamic-part">
                  <div class="collection__toolbar {% if collection.description != blank or collection.template_suffix == 'brand' %}collection__toolbar--bordered{% endif %}">
                    {%- if has_filters -%}
                      <button class="collection__toolbar-item collection__toolbar-item--filter hidden-lap-and-up" data-action="open-drawer" aria-haspopup="true" aria-expanded="false" aria-controls="mobile-collection-filters">
                        <span class="collection__filter-icon {% if current_tags.size > 0 %}collection__filter-icon--active{% endif %}">{%- render 'icon', icon: 'filter' -%}</span>
                        {{ 'collection.filter.title' | t }}{% if current_tags.size > 0 %}&nbsp;({{ current_tags | size }}){% endif %}
                      </button>
                    {%- endif -%}

                    <div class="collection__toolbar-item collection__toolbar-item--count hidden-pocket">
                      {%- assign offset = paginate.current_offset | plus: 1 -%}
                      {%- assign page_size = paginate.current_offset | plus: paginate.page_size | at_most: paginate.items -%}

                      <span class="collection__showing-count hidden-pocket hidden-lap">{{ 'collection.general.showing_count' | t: offset: offset, page_size: page_size, count: paginate.items }}</span>


                      {% comment %}
                      <div class="value-picker-wrapper">
                        <button class="value-picker-button" aria-haspopup="true" aria-expanded="false" aria-controls="display-by-selector" data-action="open-value-picker">
                          <span class="hidden-phone">{{ 'collection.general.display' | t }}: {{ 'collection.general.page_size' | t: page_size: paginate.page_size }}</span><!--
                          -->{%- render 'icon', icon: 'arrow-bottom' -%}
                        </button>

                        <div id="display-by-selector" class="value-picker" aria-hidden="true">
                          {% render 'icon', icon: 'nav-triangle-borderless' %}

                          <div class="value-picker__inner">
                            <header class="value-picker__header">
                              <span class="value-picker__title text--strong">{{ 'collection.general.display' | t }}</span>
                              <button class="value-picker__close" data-action="close-value-picker" aria-controls="display-by-selector" aria-label="{{ 'general.accessibility.close' | t }}">{% render 'icon', icon: 'close' %}</button>
                            </header>

                            <div class="value-picker__choice-list">
                              <button class="value-picker__choice-item link {% if items_per_page == 24 %}is-selected{% endif %}" data-action="select-value" data-value="24">{{ 'collection.general.page_size' | t: page_size: 24 }} {% render 'icon', icon: 'check-2' %}</button>
                              <button class="value-picker__choice-item link {% if items_per_page == 36 %}is-selected{% endif %}" data-action="select-value" data-value="36">{{ 'collection.general.page_size' | t: page_size: 36 }} {% render 'icon', icon: 'check-2' %}</button>
                              <button class="value-picker__choice-item link {% if items_per_page == 48 %}is-selected{% endif %}" data-action="select-value" data-value="48">{{ 'collection.general.page_size' | t: page_size: 48 }} {% render 'icon', icon: 'check-2' %}</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      {% endcomment %}


                    </div>





                    
                    {% comment %}
                    <div class="collection__toolbar-item collection__toolbar-item--sort">
                      {%- assign collection_sort_by = collection.sort_by | default: collection.default_sort_by -%}

                      {%- for option in collection.sort_options -%}
                        {%- if option.value == collection_sort_by -%}
                          {%- assign collection_sort_by_name = option.name -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}

                      <div class="value-picker-wrapper">
                        <button class="value-picker-button" aria-haspopup="true" aria-expanded="false" aria-controls="sort-by-selector" data-action="open-value-picker">
                          <span class="hidden-tablet-and-up">{{ 'collection.sorting.title' | t }}</span><!--
                          --><span class="hidden-phone">{{ 'collection.sorting.title' | t }}: {{ collection_sort_by_name }}</span><!--
                          -->{%- render 'icon', icon: 'arrow-bottom' -%}
                        </button>

                        <div id="sort-by-selector" class="value-picker" aria-hidden="true">
                          {% render 'icon', icon: 'nav-triangle-borderless' %}

                          <div class="value-picker__inner">
                            <header class="value-picker__header">
                              <span class="value-picker__title text--strong">{{ 'collection.sorting.title' | t }}</span>
                              <button class="value-picker__close" data-action="close-value-picker" aria-controls="sort-by-selector" aria-label="{{ 'general.accessibility.close' | t }}">{% render 'icon', icon: 'close' %}</button>
                            </header>

                            <div class="value-picker__choice-list">
                             
                         
                              {%- for option in collection.sort_options -%}
                                <button class="value-picker__choice-item link {% if option.value == collection_sort_by %}is-selected{% endif %}" data-action="select-value" data-value="{{ option.value }}">{{ option.name }} {% render 'icon', icon: 'check-2' %}</button>
                              {%- endfor -%}
                          
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    {% endcomment %}

                    <div class="collection__toolbar-item collection__toolbar-item--sort">
                      <label for="SortBy" class="uppercase">Sort By:&nbsp;</label>
                      <select name="SortBy" id="SortBy">
                        <option value="upcoming-events">Upcoming events</option>
                        <option value="best-selling">Best Selling</option>
                        <option value="price-ascending">Price, low to high</option>
                        <option value="price-descending">Price, high to low</option>
          
                      </select>
                    </div>

                    
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
                    <script>
                      Shopify.queryParams = {};
                      if (location.search.length) {
                        for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
                          aKeyValue = aCouples[i].split('=');
                          if (aKeyValue.length > 1) {
                            console.log(aKeyValue);
                            Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
                          }
                        }
                      }
                
                      $(function() {
                        $('#SortBy')
                          .val('{{ collection.sort_by | default: 'upcoming-events' }}')
                          .bind('change', function() {
                            Shopify.queryParams.sort_by = jQuery(this).val();
                            console.log(Shopify.queryParams);
                            location.search = jQuery.param(Shopify.queryParams);
                          }
                        );
                      });
                    </script>





                    <div class="collection__toolbar-item collection__toolbar-item--layout">
                      <span class="collection__layout-label hidden-phone">{{ 'collection.layout.title' | t }}</span>

                      {%- if section.settings.default_view_layout == 'grid' -%}
                        <button type="button" class="collection__layout-button {% if view_mode == 'grid' %}is-selected{% endif %} link touch-area" aria-label="{{ 'collection.layout.grid' | t }}" data-action="change-layout" data-layout-mode="grid">{% render 'icon', icon: 'grid' %}</button>
                        <button type="button" class="collection__layout-button {% if view_mode == 'list' %}is-selected{% endif %} link touch-area" aria-label="{{ 'collection.layout.list' | t }}" data-action="change-layout" data-layout-mode="list">{% render 'icon', icon: 'list' %}</button>
                      {%- else -%}
                        <button type="button" class="collection__layout-button {% if view_mode == 'list' %}is-selected{% endif %} link touch-area" aria-label="{{ 'collection.layout.list' | t }}" data-action="change-layout" data-layout-mode="list">{% render 'icon', icon: 'list' %}</button>
                        <button type="button" class="collection__layout-button {% if view_mode == 'grid' %}is-selected{% endif %} link touch-area" aria-label="{{ 'collection.layout.grid' | t }}" data-action="change-layout" data-layout-mode="grid">{% render 'icon', icon: 'grid' %}</button>
                      {%- endif -%}
                    </div>
                  </div>

                  {%- comment -%}
                  --------------------------------------------------------------------------------------
                  MOBILE FILTERS
                  --------------------------------------------------------------------------------------
                  {%- endcomment -%}

                  {%- if has_filters and current_tags.size > 0 -%}
                    <div class="card__section collection__mobile-filters-recap hidden-lap-and-up">
                      <div class="collection__mobile-active-filters">
                        {%- for tag in current_tags -%}
                          <button class="collection__mobile-active-filter-item" data-action="toggle-tag" data-tag="{{ tag | handle }}">
                            <span class="collection__mobile-active-filter-cross">{% render 'icon', icon: 'close' %}</span>

                            {%- if section.settings.filter_type == 'group' -%}
                              {{- tag | split: '_' | last -}}
                            {%- else -%}
                              {{- tag -}}
                            {%- endif -%}
                          </button>
                        {%- endfor -%}

                        {%- if current_tags.size > 1 -%}
                          <button class="collection__mobile-active-clear" data-action="clear-tags">{{ 'collection.filter.clear_all' | t }}</button>
                        {%- endif -%}
                      </div>

                      <span class="collection__mobile-active-filters-results">{{ 'collection.general.results_count' | t: count: collection.products_count }}</span>
                    </div>
                  {%- endif -%}

                  {%- comment -%}
                  --------------------------------------------------------------------------------------
                  COLLECTION PRODUCTS
                  --------------------------------------------------------------------------------------
                  {%- endcomment -%}

                  {%- if collection.products_count == 0 -%}
                    <div class="empty-state empty-state--tight">
                      <p class="empty-state__description">{{ 'collection.general.no_results' | t }}</p>

                      <div class="empty-state__button-container">
                        <button class="empty-state__button button button--primary" data-action="clear-tags">{{ 'collection.filter.clear_all' | t }}</button>
                      </div>
                    </div>
                  {%- else -%}
                    {%- if view_mode == 'grid' -%}
                      {%- assign show_as_list = false -%}
                    {%- else -%}
                      {%- assign show_as_list = true -%}
                    {%- endif -%}

                    <div id="product-grid" class="product-list product-list--collection {% if has_filters %}product-list--with-sidebar{% endif %}">
                      {%- for product in collection.products -%}
                        {%- render 'product-item', product: product, list: show_as_list, grid_classes: grid_classes -%}
                      {%- endfor -%}
                    </div>

                    {%- render 'pagination', paginate: paginate -%}
                  {%- endif -%}
                  
                </div>
              </div>
            {%- endif -%}
          </div>
        </div>
      {%- endpaginate -%}
      
    </div>
  
    {%- if collection.description != blank -%}
    {%- assign allow_collapse_description = false -%}

    {%- if section.settings.collapse_collection_description -%}
    {%- assign allow_collapse_description = true -%}
    {%- endif -%}

    <div class="collection__description {% if allow_collapse_description %}expandable-content{% endif %}" aria-expanded="false">
      <div class="rte">
        {{ collection.description }}
      </div>

      {%- if allow_collapse_description -%}
      <button class="expandable-content__toggle">
        <span class="expandable-content__toggle-icon"></span>
        <span class="expandable-content__toggle-text" data-view-more="{{ 'collection.general.view_more' | t | escape }}" data-view-less="{{ 'collection.general.view_less' | t | escape }}">{{- 'collection.general.view_more' | t -}}</span>
      </button>
      {%- endif -%}
    </div>
    {%- endif -%}

    
  </div>

  {%- comment -%}
  --------------------------------------------------------------------------------------
  MOBILE FILTER SIDEBAR

  Implementation note: the code is quite similar to the one that powers the desktop
  navigation. Unfortunately there are some subtle differences that forced me to duplicate
  a large part of the code :(.
  --------------------------------------------------------------------------------------
  {%- endcomment -%}

  {%- if has_filters -%}
    <div id="mobile-collection-filters" class="drawer" aria-hidden="true">
      <div class="drawer__inner">
        <div class="collection-drawer">
          <header class="collection-drawer__header">
            <div>
              <button class="collection-drawer__close" data-action="close-drawer" title="{{ 'general.accessibility.close' | t | escape }}">
                {%- render 'icon', icon: 'close' -%}
              </button>
              <span class="collection-drawer__title heading h3">{{ 'collection.filter.all' | t }} <span class="collection-drawer__filter-count" {% if current_tags == blank %}style="display: none"{% endif %}>({{ current_tags | size }})</span></span>
            </div>

            <button class="button button--transparent button--extra-small" data-action="clear-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.clear' | t }}</button>
          </header>

          <div class="collection-drawer__inner">
            {%- if quick_links_menu.links.size > 0 -%}
              {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

              <p class="collection-drawer__section-title">{{ quick_links_menu.title }}</p>

              <div class="collection__filter-group">
                <button class="collection__filter-group-name text--strong" aria-expanded="false" aria-controls="{{ link_id }}" data-action="toggle-collapsible" data-close-siblings="false">
                  {{- 'collection.filter.select_category' | t -}}
                  {%- render 'icon', icon: 'arrow-bottom' -%}
                </button>

                <div id="{{ link_id }}" class="collection__filter-collapsible" aria-hidden="true">
                  <ul class="collection__filter-linklist" role="list">
                    {%- for link in quick_links_menu.links -%}
                      <li>
                        {%- if link.links.size > 0 -%}
                          {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

                          <button class="collection__filter-link link link--primary {% if link.active or link.child_active %}is-active{% endif %}" data-action="toggle-collapsible" aria-controls="{{ link_id }}" aria-expanded="false">
                            {{ link.title }} {% if link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ link.object.products_count }}){% endif %} {%- render 'icon', icon: 'arrow-bottom' -%}
                          </button>

                          <div id="{{ link_id }}" class="collection__filter-collapsible" aria-hidden="true">
                            <ul class="collection__filter-linklist" role="list">
                              {%- for sub_link in link.links -%}
                                <li>
                                  {%- if sub_link.links.size > 0 -%}
                                    {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

                                    <button class="collection__filter-link link link--primary {% if sub_link.active or sub_link.child_active %}is-active{% endif %}" data-action="toggle-collapsible" aria-controls="{{ link_id }}" aria-expanded="{% if sub_link.active or sub_link.child_active %}true{% else %}false{% endif %}">
                                      {{ sub_link.title }} {% if sub_link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ sub_link.object.products_count }}){% endif %} {%- render 'icon', icon: 'arrow-bottom' -%}
                                    </button>

                                    <div id="{{ link_id }}" class="collection__filter-collapsible" {% if sub_link.active or sub_link.child_active %}aria-hidden="false" style="height: auto"{% else %}aria-hidden="true"{% endif %}>
                                      <ul class="collection__filter-linklist" role="list">
                                        {%- for sub_sub_link in sub_link.links -%}
                                          <li>
                                            <a href="{{ sub_sub_link.url }}" class="collection__filter-link link link--primary {% if sub_sub_link.active %}is-active{% endif %}">{{ sub_sub_link.title }} {% if sub_sub_link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ sub_sub_link.object.products_count }}){% endif %}</a>
                                          </li>
                                        {%- endfor -%}
                                      </ul>
                                    </div>
                                  {%- else -%}
                                    <a href="{{ sub_link.url }}" class="collection__filter-link link link--primary {% if sub_link.active %}is-active{% endif %}">{{ sub_link.title }} {% if sub_link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ sub_link.object.products_count }}){% endif %}</a>
                                  {%- endif -%}
                                </li>
                              {%- endfor -%}
                            </ul>
                          </div>
                        {%- else -%}
                          <a href="{{ link.url }}" class="collection__filter-link link link--primary {% if link.active or link.child_active %}is-active{% endif %}">{{ link.title }} {% if link.type == 'collection_link' and section.settings.quick_links_show_products_count %}({{ link.object.products_count }}){% endif %}</a>
                        {%- endif -%}
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
              </div>
            {%- endif -%}

            {%- if has_visible_tags -%}
              <p class="collection-drawer__section-title">{{ 'collection.filter.all' | t }}</p>

              {%- if section.settings.filter_type == 'tag' -%}
                <div class="collection__filter-group">
                  <ul class="collection__filter-checkbox-list" role="list">
                    {%- for tag in collection.all_tags -%}
                      {%- comment -%}Tags that start by two consecutive underscores (__) are used for internal purpose and must be removed from here{%- endcomment -%}

                      {%- unless tag contains '__' -%}
                        <li class="collection__filter-checkbox">
                          <div class="checkbox-wrapper">
                            <input type="checkbox" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
                            {% render 'icon', icon: 'check' %}
                          </div>

                          <label for="{{ link_id }}-tag-{{ tag | handle }}">{{ tag }}</label>
                        </li>
                      {%- endunless -%}
                    {%- endfor -%}
                  </ul>
                </div>
              {%- elsif section.settings.filter_type == 'group' -%}
                {%- assign groups = '' -%}

                {%- for tag in collection.all_tags -%}
                  {%- assign tag_parts = tag | split: '_' -%}

                  {%- if tag_parts.size < 2 or tag contains '__' -%}
                    {%- continue -%}
                  {%- endif -%}

                  {%- assign groups = groups | append: tag_parts.first | append: ',' -%}
                {%- endfor -%}

                {%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
                {%- assign groups = groups | split: ',' | compact | uniq -%}

                {%- assign groups_order = section.settings.filter_group_order | downcase | strip | replace: ', ', ',' | split: ',' -%}

                <div class="collection__filter-group-list {% if groups_order.size > 0 %}collection__filter-group-list--ordered{% endif %}">
                  {%- for group in groups -%}
                    {%- assign group_downcase = group | downcase -%}

                    {%- comment -%}
                    If we are within the special "brand" alternate template, then we do not show the "brand" or "vendor" group
                    {%- endcomment -%}

                    {%- if collection.template_suffix == 'brand' -%}
                      {%- assign brand_label = 'brand,vendor,marque' | split: ',' -%}

                      {%- if brand_label contains group_downcase -%}
                        {%- continue -%}
                      {%- endif -%}
                    {%- endif -%}

                    {%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
                      {%- assign show_color_swatch = true -%}
                    {%- else -%}
                      {%- assign show_color_swatch = false -%}
                    {%- endif -%}

                    {%- assign has_active_tag_from_group = false -%}

                    {%- for tag in current_tags -%}
                      {%- assign current_tag_parts = tag | split: '_' -%}
                      {%- assign current_tag_group_downcase = current_tag_parts.first | downcase -%}

                      {%- if group_downcase == current_tag_group_downcase -%}
                        {%- assign has_active_tag_from_group = true -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}

                    {%- assign current_group_order = 99 -%}

                    {%- if groups_order contains group_downcase -%}
                      {%- for group_order_name in groups_order -%}
                        {%- if group_order_name == group_downcase -%}
                          {%- assign current_group_order = forloop.index -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}
                    {%- endif -%}

                    <div class="collection__filter-group" {% if groups_order.size > 0 %}style="order: {{ current_group_order }}"{% endif %}>
                      {%- capture link_id -%}filter-{% increment link_id %}{%- endcapture -%}

                      <button class="collection__filter-group-name link link--secondary text--strong" data-action="toggle-collapsible" aria-controls="{{ link_id }}" data-close-siblings="false" aria-expanded="false">
                        <div>
                          {{- group -}}
                          <span class="collection__filter-item-active" {% unless has_active_tag_from_group %}style="display: none"{% endunless %}>{{ current_tag_parts.last }}</span>
                        </div>

                        {%- render 'icon', icon: 'arrow-bottom' -%}
                      </button>

                      <div id="{{ link_id }}" class="collection__filter-collapsible" aria-hidden="true">
                        {%- if show_color_swatch -%}
                          <div class="collection__filter-color-list">
                            <div class="color-swatch-list color-swatch-list--stack">
                              {%- for tag in collection.all_tags -%}
                                {%- assign tag_parts = tag | split: '_' -%}

                                {%- if tag_parts.first != group or tag contains '__' or tag_parts.size == 1 -%}
                                  {%- continue -%}
                                {%- endif -%}

                                {%- assign downcased_value = tag_parts.last | downcase -%}
                                {%- capture color_id -%}filter-color-{% increment color_index %}{%- endcapture -%}

                                {%- assign color_swatch_name = tag_parts.last | handle | append: '.png' -%}
                                {%- assign color_swatch_image = images[color_swatch_name] -%}

                                <div class="color-swatch {% if downcased_value == 'white' or downcased_value == 'blanc' %}color-swatch--white{% endif %}">
                                  <button type="button" class="color-swatch__button color-swatch__button--labelled {% if current_tags contains tag %}is-selected{% endif %}" data-action="toggle-tag" data-tag="{{ tag | handle }}" data-tag-user="{{ tag_parts.last | escape }}">
                                    <span class="color-swatch__item lazyload" {% if color_swatch_image != blank %}data-bg="{{ color_swatch_image | img_url: '64x64' }}"{% else %}style="background-color: {{ downcased_value | replace: ' ', '' }}"{% endif %}></span>
                                    <span class="color-swatch__label">{{ tag_parts.last }}</span>
                                  </button>
                                </div>
                              {%- endfor -%}
                            </div>
                          </div>
                        {%- else -%}
                          <ul class="collection__filter-checkbox-list" role="list">
                            {%- for tag in collection.all_tags -%}
                              {%- assign tag_parts = tag | split: '_' -%}

                              {%- if tag_parts.first != group or tag contains '__' or tag_parts.size == 1 -%}
                                {%- continue -%}
                              {%- endif -%}

                              <li class="collection__filter-checkbox">
                                <div class="checkbox-wrapper">
                                  <input type="checkbox" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-{{ tag_parts.first | handle }}" data-action="toggle-tag" data-tag="{{ tag | handle }}" data-tag-user="{{ tag_parts.last | escape }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
                                  {% render 'icon', icon: 'check' %}
                                </div>

                                <label for="{{ link_id }}-tag-{{ tag | handle }}">{{ tag_parts.last }}</label>
                              </li>
                            {%- endfor -%}
                          </ul>
                        {%- endif -%}
                      </div>
                    </div>
                  {%- endfor -%}
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>

          <div class="collection-drawer__footer">
            <button class="button button--primary button--small button--full" data-action="close-drawer">{{ 'collection.filter.view_results' | t }}</button>
          </div>
        </div>
      </div>
    </div>
  {%- endif -%}

  {%- comment -%}
  --------------------------------------------------------------------------------------
  QUICK VIEW CONTAINER
  --------------------------------------------------------------------------------------
  {%- endcomment -%}

  <div id="modal-quick-view-{{ section.id }}" class="modal" aria-hidden="true">
    <div class="modal__dialog modal__dialog--stretch" role="dialog">
      <button class="modal__close link" data-action="close-modal" title="{{ 'general.accessibility.close' | t | escape }}">
        {%- render 'icon', icon: 'close' -%}
      </button>

      <div class="modal__loader">
        {%- render 'icon', icon: 'search-loader' -%}
      </div>

      <div class="modal__inner"></div>
    </div>
  </div>
</section>






<script>
  
  var searchQuery = /sort_by=(.+)/g.exec(window.location.search);
  
  console.log('searchQuery ->',searchQuery)

  

  
  
  if(searchQuery === null || searchQuery[1] === 'upcoming-events') {

    var eventListContainer = $('#product-grid');
    var eventList = eventListContainer.children('.product-item');
  
    console.log('eventListContainer -> ',eventListContainer);
    console.log('eventList ->',eventList);


    eventList.sort(function(a,b) {

        var event1date = new Date(a.getAttribute('data-date'));
        var event2date = new Date(b.getAttribute('data-date'));
      
  console.log('event1date ->',event1date);
        console.log('event2date ->',event2date);
      
        if(event1date > event2date) {
            return 1;
            
        }
        if(event1date < event2date) {
            return -1;
        }

        return 0;
    });

    eventList.detach().appendTo(eventListContainer);
  }  
</script>









{% schema %}
{
  "name": "Collection page",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": "Show collection image",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "collapse_collection_description",
      "label": "Collapse long description",
      "default": false
    },
    {
      "type": "select",
      "id": "collection_image_size",
      "label": "Collection image size",
      "options": [
        {
          "value": "preserve_ratio",
          "label": "Original image ratio"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small"
    },
    {
      "type": "select",
      "id": "products_per_row",
      "label": "Products per row (desktop)",
      "options": [
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        }
      ],
      "default": "4"
    },
    {
      "type": "range",
      "id": "default_products_per_page",
      "label": "Default products per page",
      "min": 24,
      "max": 48,
      "step": 12,
      "default": 24
    },
    {
      "type": "select",
      "id": "default_view_layout",
      "label": "Default view layout",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "list",
          "label": "List"
        }
      ],
      "default": "grid"
    },
    {
      "type": "select",
      "id": "show_quick_buy",
      "label": "Show quick buy on...",
      "options": [
        {
          "value": "list",
          "label": "List view"
        },
        {
          "value": "list_grid",
          "label": "List and grid views"
        }
      ],
      "default": "list"
    },
    {
      "type": "select",
      "id": "show_quick_view",
      "label": "Show quick view on...",
      "options": [
        {
          "value": "list",
          "label": "List view"
        },
        {
          "value": "list_grid",
          "label": "List and grid views"
        }
      ],
      "default": "list"
    },
    {
      "type": "header",
      "content": "Sidebar"
    },
    {
      "type": "link_list",
      "id": "quick_links",
      "label": "Quick links"
    },
    {
      "type": "checkbox",
      "id": "quick_links_show_products_count",
      "label": "Show products count",
      "info": "Only for collection links",
      "default": true
    },
    {
      "type": "header",
      "content": "Filtering"
    },
    {
      "type": "checkbox",
      "id": "show_filters",
      "label": "Show filters",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_filter_color_swatch",
      "label": "Show filter color swatch",
      "info": "Requires filter type \"By group\" to be selected.",
      "default": true
    },
    {
      "type": "select",
      "id": "filter_type",
      "label": "Filter type",
      "info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
      "options": [
        {
          "value": "tag",
          "label": "By tag"
        },
        {
          "value": "group",
          "label": "By group"
        }
      ],
      "default": "tag"
    },
    {
      "type": "select",
      "id": "open_group_filters_mode",
      "label": "Filter opening mode (desktop)",
      "options": [
        {
          "value": "all_closed",
          "label": "All closed"
        },
        {
          "value": "all_open",
          "label": "All open"
        },
        {
          "value": "first_open",
          "label": "First open"
        }
      ],
      "default": "all_closed"
    },
    {
      "type": "text",
      "id": "filter_group_order",
      "label": "Group order",
      "info": "List items must be identical to the group name. If left empty, all groups will be displayed in alphabetical order. Example: Color, Brand, Size."
    }
  ]
}
{% endschema %}

 and product-item snippet 

{%- comment -%}Color labels used to detect what is a color swatch{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}

<div data-date="{{ product.metafields.event_fields.event_date }}" class="product-item {% if horizontal %}product-item--horizontal{% elsif list %}product-item--list{% else %}product-item--vertical{% endif %} {% if section.id == 'blog-sidebar' %}product-item--compact{% endif %} {{ grid_classes }}">
  {%- capture product_labels -%}
    {%- unless hide_labels -%}
      {%- for tag in product.tags -%}
        {%- if tag contains '__label:' -%}
          <span class="product-label product-label--custom1">{{ tag | split: '__label:' | last }}</span>
        {%- endif -%}

        {%- if tag contains '__label1:' -%}
          <span class="product-label product-label--custom1">{{ tag | split: '__label1:' | last }}</span>
        {%- endif -%}

        {%- if tag contains '__label2:' -%}
          <span class="product-label product-label--custom2">{{ tag | split: '__label2:' | last }}</span>
        {%- endif -%}
      {%- endfor -%}

      {%- if settings.show_discount and product.price < product.compare_at_price -%}
        {%- if settings.discount_mode == 'percentage' -%}
          {%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
        {%- else -%}
          {%- capture savings -%}<span>{{ product.compare_at_price | minus: product.price | money }}</span>{%- endcapture -%}
        {%- endif -%}

        <span class="product-label product-label--on-sale">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
      {%- endif -%}
    {%- endunless -%}
  {%- endcapture -%}

  {%- if product_labels != blank -%}
    <div class="product-item__label-list">
      {{- product_labels -}}
    </div>
  {%- endif -%}

  {%- if settings.show_secondary_image and product.media.size > 1 -%}
    {%- assign show_secondary_media = true -%}
  {%- else -%}
    {%- assign show_secondary_media = false -%}
  {%- endif -%}

  {%- assign filtered_variant = '' -%}

  {%- if product.media.size > 0 -%}
    {%- comment -%}
      Are you ready for some Liquid crazyness? Let's start!
      The idea here is that when we are on a collection page that is filtered using a color swatch, instead of showing the featured
      image, we'd like to show a variant image that is attached to the selected color. Unfortunately, because filtering is done using
      tag, there is no direct relationship between tags and variants. We therefore have to do some crazy processing to match a filter
      with a variant. Because this code is within a collection page, it is executed for each product, so it's pretty performance
      sensitive. Disabling this piece of code may slightly improve the performance if you have lot of variants.
    {%- endcomment -%}

    {%- assign primary_media = product.featured_media -%}

    {%- if request.page_type == 'collection' and section.settings.show_filters and section.settings.filter_type == 'group' -%}
      {%- assign matched_color_option = '' -%}

      {%- for tag in current_tags -%}
        {%- assign tag_parts = tag | split: '_' -%}
        {%- assign tag_group_name = tag_parts | first | downcase -%}
        {%- assign tag_group_value = tag_parts | last | downcase -%}

        {%- if color_label contains tag_group_name -%}
          {%- comment -%}We have found a matching color label, then we check if this product contains an option named the same{%- endcomment -%}

          {%- for option in product.options -%}
            {%- assign downcased_option = option | downcase -%}

            {%- if downcased_option == tag_group_name -%}
              {%- comment -%}We have found the index of the matching option, so we can iterate through the variants{%- endcomment -%}
              {%- assign option_index = 'option' | append: forloop.index -%}

              {%- for variant in product.variants -%}
                {%- assign variant_option_value = variant[option_index] | downcase -%}

                {%- if variant_option_value == tag_group_value and variant.featured_media -%}
                  {%- assign primary_media = variant.featured_media -%}
                  {%- assign filtered_variant = variant -%}
                  {%- break -%}
                {%- endif %}
              {%- endfor -%}

              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}

    <a href="{{ filtered_variant.url | default: product.url | within: collection }}" class="product-item__image-wrapper {% if show_secondary_media %}product-item__image-wrapper--with-secondary{% endif %}">
      {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: primary_media.preview_image -%}{%- endcapture -%}
      {%- assign image_url = primary_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

      <div class="aspect-ratio {% if settings.product_image_size != 'natural' %}aspect-ratio--{{ settings.product_image_size }}{% endif %}" style="padding-bottom: {{ 100.0 | divided_by: primary_media.preview_image.aspect_ratio }}%">
        <img class="product-item__primary-image lazyload image--fade-in" data-media-id="{{ primary_media.id }}" data-src="{{ image_url }}" data-sizes="auto" data-widths="[{{ supported_sizes }}]" alt="{{ primary_media.alt | escape }}">

        {%- if show_secondary_media -%}
          {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[1].preview_image -%}{%- endcapture -%}
          {%- assign image_url = product.media[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

          <img class="product-item__secondary-image lazyload image--fade-in" data-src="{{ image_url }}" data-sizes="auto" data-widths="[{{ supported_sizes }}]" alt="{{ product.media[1].alt | escape }}">
        {%- endif -%}

        <noscript>
          <img src="{{ primary_image | img_url: '600x' }}" alt="{{ primary_media.alt | escape }}">
        </noscript>
      </div>
    </a>
  {%- endif -%}

  <div class="product-item__info">
    <div class="product-item__info-inner">
      {%- capture price_list -%}
        <div class="product-item__price-list price-list">
          {%- if product.price < product.compare_at_price -%}
            {%- if product.price_varies -%}
              {%- capture price_min -%}<span>{{ product.price_min | money }}</span>{%- endcapture -%}
              {%- capture price_max -%}<span>{{ product.price_max | money }}</span>{%- endcapture -%}
              <span class="price price--highlight">
                <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
                {{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
              </span>

              <span class="price price--compare">
                <span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
                {{- product.compare_at_price_min | money -}}
              </span>
            {%- else -%}
              <span class="price price--highlight">
                <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
                {{- product.price | money -}}
              </span>

              <span class="price price--compare">
                <span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
                {{- product.compare_at_price | money -}}
              </span>
            {%- endif -%}
          {%- elsif product.price_varies -%}
            {%- capture price_min -%}<span>{{ product.price_min | money }}</span>{%- endcapture -%}
            {%- capture price_max -%}<span>{{ product.price_max | money }}</span>{%- endcapture -%}

            <span class="price">
              <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
              {{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
            </span>
          {%- else -%}
            <span class="price">
              <span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
              {{- product.price | money -}}
            </span>
          {%- endif -%}
        </div>

        {%- if product.selected_or_first_available_variant.unit_price_measurement -%}
          <div class="product-item__price-info">
            <div class="unit-price-measurement">
              <span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money }}</span>
              <span class="unit-price-measurement__separator">/ </span>

              {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
                <span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
              {%- endif -%}

              <span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
            </div>
          </div>
        {%- endif -%}
      {%- endcapture -%}

      {% comment %}
      {%- capture vendor -%}
        {%- if settings.show_vendor -%}
          {%- assign vendor_handle = product.vendor | handle -%}
          {%- assign collection_for_vendor = collections[vendor_handle] -%}

          {%- unless collection_for_vendor.empty? -%}
            <a class="product-item__vendor link" href="{{ collection_for_vendor.url }}">{{ product.vendor }}</a>
          {%- else -%}
            <a class="product-item__vendor link" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
          {%- endunless -%}
        {%- endif -%}
      {%- endcapture -%}

      {% endcomment %}

      <div class="event-date product-item__vendor">Starts: {{ product.metafields.event_fields.event_date | date: "%b %d" }}</div>

      {%- if settings.product_price_position == 'before_title' -%}
        {{ price_list }}
      {%- endif -%}

      {%- if settings.product_price_position == 'after_title' -%}
        {{ vendor }}
      {%- endif -%}

      <a href="{{ filtered_variant.url | default: product.url | within: collection }}" class="product-item__title text--strong link">{{ product.title }}</a>

      {%- if settings.product_price_position == 'before_title' -%}
        {{ vendor }}
      {%- endif -%}

      {%- if settings.show_color_swatch and template != 'blog' -%}
        {%- capture color_swatch -%}
          {%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}

          {%- for option in product.options_with_values -%}
            {%- assign downcased_option = option.name | downcase -%}

            {%- if color_label contains downcased_option -%}
              {%- assign variant_option = 'option' | append: forloop.index -%}
              {%- assign value_to_match = filtered_variant[variant_option] | default: option.selected_value -%}

              {%- for value in option.values -%}
                {%- assign downcased_value = value | downcase -%}
                {%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}

                {%- for variant in product.variants -%}
                  {%- if variant[variant_option] == value -%}
                    {%- assign variant_for_value = variant -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}

                <div class="color-swatch {% if downcased_value == 'white' or downcased_value == 'blanc' %}color-swatch--white{% endif %}">
                  {%- if variant_for_value.featured_media -%}
                    {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: variant_for_value.featured_media.preview_image -%}{%- endcapture -%}
                    {%- assign image_url = variant_for_value.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  {%- endif -%}

                  {%- assign color_swatch_name = value | handle | append: '.png' -%}
                  {%- assign color_swatch_image = images[color_swatch_name] -%}

                  <input class="color-swatch__radio" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if value_to_match == value %}checked="checked"{% endif %} data-variant-url="{{ variant_for_value.url }}" {% if variant_for_value.featured_media %}data-media-id="{{ variant_for_value.featured_media.id }}" data-image-url="{{ image_url }}" data-image-widths="[{{ supported_sizes }}]" data-image-aspect-ratio="{{ variant_for_value.featured_media.preview_image.aspect_ratio }}"{% endif %} aria-label="{{ value | escape }}">
                  <label class="color-swatch__item lazyload" for="{{ color_id }}" {% if color_swatch_image != blank %}data-bg="{{ color_swatch_image | img_url: '64x64' }}"{% else %}style="background-color: {{ value | replace: ' ', '' | downcase }}"{% endif %} title="{{ value | escape }}">
                    <span class="visually-hidden">{{ value }}</span>
                  </label>
                  <a href="{{ product.url }}" class="color-swatch__item-link">+{{ option.values.size | minus: forloop.index0 }}</a>
                </div>
              {%- endfor -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endcapture -%}

        {%- if color_swatch != blank -%}
          <div class="product-item__swatch-list">
            <div class="color-swatch-list">
              {{ color_swatch }}
            </div>
          </div>
        {%- endif -%}
      {%- endif -%}

      {%- if settings.product_price_position == 'after_title' -%}
        {{ price_list }}
      {%- endif -%}

      {%- if settings.show_reviews_badge -%}
        <a class="product-item__reviews-badge link" href="{{ product.url | within: collection }}#product-reviews">
          <span class="visually-hidden">{{ 'product.general.reviews' | t }}</span>

          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
            {%- comment -%}Display a placeholder, to allocate space{%- endcomment -%}
            <div class="spr-badge" style="opacity: 0">
              <span class="spr-starrating spr-badge-starrating">
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
              </span>
            </div>
          </span>
        </a>
      {%- endif -%}

      {%- if settings.show_inventory_quantity and product.template_suffix != 'pre-order' -%}
        {%- if product.available -%}
          {%- assign should_calculate_inventory = true -%}

          {%- for variant in product.variants -%}
            {%- comment -%}
              If we have one variant that is set to "continue" or that do not have any inventory management, then we skip the calculation of inventory as this
              means at least one of the variant is always purchasable
            {%- endcomment -%}

            {%- if variant.inventory_policy == 'continue' or variant.inventory_management == null -%}
              {%- assign should_calculate_inventory = false -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

          {%- if should_calculate_inventory and settings.low_inventory_threshold > 0 -%}
            {%- assign all_inventory = 0 -%}

            {%- for variant in product.variants -%}
              {%- if variant.inventory_management -%}
                {%- assign all_inventory = variant.inventory_quantity | at_least: 0 | plus: all_inventory -%}
              {%- endif -%}
            {%- endfor -%}

            {%- if all_inventory <= settings.low_inventory_threshold -%}
              <span class="product-item__inventory inventory inventory--low">{{ 'collection.product.low_stock_with_quantity_count' | t: count: all_inventory }}</span>
            {%- else -%}
              <span class="product-item__inventory inventory inventory--high">{{ 'collection.product.in_stock_with_quantity_count' | t: count: all_inventory }}</span>
            {%- endif -%}
          {%- else -%}
            {%- if product.variants.first.inventory_policy == 'continue' and product.variants.first.inventory_quantity <= 0 and product.variants.first.requires_shipping -%}
              <span class="product-item__inventory inventory inventory--high">{{ 'collection.product.oversell_stock' | t }}</span>
            {%- else -%}
              <span class="product-item__inventory inventory inventory--high">{{ 'collection.product.in_stock' | t }}</span>
            {%- endif -%}
          {%- endif -%}
        {%- else -%}
          <span class="product-item__inventory inventory">{{ 'collection.product.sold_out' | t }}</span>
        {%- endif -%}
      {%- endif -%}
    </div>

    {%- if request.page_type == 'collection' or request.page_type == 'search' or show_add_to_cart -%}
      {%- if section.settings.show_quick_view == 'list_grid' or section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
        {%- assign product_form_classes = 'product-item__action-list button-stack' -%}
      {%- else -%}
        {%- assign product_form_classes = 'product-item__action-list product-item__action-list--list-view-only button-stack' -%}
      {%- endif -%}

      {%- assign form_id = 'product_form_id_' | append: product.id | append: '_' | append: section.id -%}

      {%- if product.template_suffix == 'contact' -%}
        <div class="{{ product_form_classes }}">
          <a href="mailto:{{ shop.email }}" class="product-item__action-button button button--small button--primary">
            {{- 'product.form.contact_us' | t -}}
          </a>
        </div>
      {%- else -%}
        {%- form 'product', product, id: form_id, class: product_form_classes -%}
          <input type="hidden" name="quantity" value="1">
          <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

          {%- if section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
            {%- assign quick_buy_classes = 'product-item__action-button button button--small button--primary' -%}
          {%- else -%}
            {%- assign quick_buy_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--primary' -%}
          {%- endif -%}

          {%- if product.available -%}
            {%- if product.variants.size == 1 -%}
              <button type="submit" class="{{ quick_buy_classes }}" data-action="add-to-cart">
                {%- if product.template_suffix == 'pre-order' -%}
                  {{- 'collection.product.pre_order' | t -}}
                {%- else -%}
                  {{- 'collection.product.add_to_cart' | t -}}
                {%- endif -%}
              </button>
            {%- else -%}
              <a href="{{ product.url | within: collection }}" class="{{ quick_buy_classes }}">{{ 'collection.product.choose_options' | t }}</a>
            {%- endif -%}
          {%- else -%}
            <button class="{{ quick_buy_classes | replace: 'button--primary', 'button--disabled' }}" disabled>{{ 'collection.product.sold_out' | t }}</button>
          {%- endif -%}

          {%- if section.settings.show_quick_view == 'list_grid' -%}
            {%- assign quick_view_classes = 'product-item__action-button button button--small button--ternary hidden-phone' -%}
          {%- else -%}
            {%- assign quick_view_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--ternary hidden-phone' -%}
          {%- endif -%}

          <button type="button" class="{{ quick_view_classes }}" data-action="open-modal" data-secondary-action="open-quick-view" aria-controls="modal-quick-view-{{ section.id }}" data-product-url="{{ product.url }}">{{ 'collection.product.quick_view' | t }}</button>
        {%- endform -%}
      {%- endif -%}
    {%- endif -%}
  </div>

<!-- **BEGIN** Hextom USB Integration // Collection Include - DO NOT MODIFY -->
    {% render 'hextom_usb_coll', product: product %}
    <!-- **END** Hextom USB Integration // Collection Include - DO NOT MODIFY -->
</div>

metafield value - data-date="{{ product.metafields.event_fields.event_date }}" in tag with class="product-item"

IvGordiichuk
Shopify Partner
12 0 0
Hi. Yes. I added sorting. My collection  collection template with js and 
and product-item snippet.. 

metafield value here - data-date="{{ product.metafields.event_fields.event_date }}" in snippet tag with class="product-item"