main-collection-product-grid.liquid

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

<link rel="preload" href="{{ 'component-card.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ 'component-price.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ 'component-badge.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ 'component-rte.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-badge.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

<script src="{{ 'collection-filters-form.js' | asset_url }}" defer="defer"></script>

{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}

<div class="page-width collection-filters" id="main-collection-filters" data-id="{{ section.id }}">
  {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
    {%- assign total_active_values = 0 -%}
    <collection-filters-form class="facets small-hide">
      <form id="CollectionFiltersForm" class="facets__form">
        {% if section.settings.enable_filtering %}
          <div class="facets__wrapper">
            {%- unless collection.filters == empty -%}
              <p class="facets__heading">{{ 'sections.collection_template.filter_by_label' | t }}</p>
            {%- endunless -%}

            {%- for filter in collection.filters -%}
              {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
              {% case filter.type %}
              {% when 'list' %}
                <details class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
                  <summary class="facets__summary">
                    <div>
                      <span>{{ filter.label | escape }}</span>
                      <span class="count-bubble">{%- if filter.active_values.size > 0 -%}{{ filter.active_values.size }}{%- endif -%}</span>
                      {% render 'icon-caret' %}
                    </div>
                  </summary>
                  <div class="facets__display">
                    <div class="facets__header">
                      <span class="facets__selected no-js-hidden">{{ 'sections.collection_template.filters_selected' | t: count: filter.active_values.size }}</span>
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                          {{ 'sections.collection_template.reset' | t }}
                        </a>
                      </facet-remove>
                    </div>

                    <ul class="facets__list list-unstyled" role="list">
                      {%- for value in filter.values -%}
                        <li class="list-menu__item facets__item">
                          <label for="Filter-{{ filter.label | escape }}-{{ forloop.index }}" class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}">
                            <input type="checkbox"
                              name="{{ value.param_name }}"
                              value="{{ value.value }}"
                              id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
                              {% if value.active %}checked{% endif %}
                              {% if value.count == 0 and value.active == false %}disabled{% endif %}
                            >

                            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                              <rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
                            </svg>

                            <svg class="icon icon-checkmark"
                              width="11"
                              height="7"
                              viewBox="0 0 11 7"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg">

                              <path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
                                stroke="currentColor"
                                stroke-width="1.75"
                                stroke-linecap="round"
                                stroke-linejoin="round" />
                            </svg>

                            </svg>
                            {{ value.label | escape }} ({{ value.count }})
                          </label>
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                </details>
              {% when 'price_range' %}
                {% liquid
                  assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND' | split: ','
                  assign uses_comma_decimals = false
                  if currencies_using_comma_decimals contains cart.currency.iso_code
                    assign uses_comma_decimals = true
                  endif
                %}
                <details class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
                  <summary class="facets__summary">
                    <div>
                      <span>{{ filter.label | escape }}</span>
                      <span class="count-bubble{%- if filter.min_value.value or filter.max_value.value -%}{{ filter.active_values.size }} count-bubble--dot{% endif %}"></span>
                      {% render 'icon-caret' %}
                    </div>
                  </summary>
                  <div class="facets__display">
                    <div class="facets__header">
                      {%- assign max_price_amount = filter.range_max | money | escape -%}
                      <span class="facets__selected">{{ "sections.collection_template.max_price" | t: price: max_price_amount }}</span>
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link" >
                          {{ 'sections.collection_template.reset' | t }}
                        </a>
                      </facet-remove>
                    </div>
                    <price-range class="facets__price">
                      <div class="field">
                        <span class="field__currency">{{ cart.currency.symbol }}</span>
                        <input class="field__input"
                          name="{{ filter.min_value.param_name }}"
                          id="Filter-{{ filter.label | escape }}-GTE"
                          {%- if filter.min_value.value -%}
                            {%- if uses_comma_decimals -%}
                              value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                            {%- else -%}
                              value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
                            {% endif %}
                          {%- endif -%}
                          type="number"
                          placeholder="0"
                          min="0"
                          max="{{ filter.range_max | money_without_currency | replace: ',', '' }}">
                        </input>
                        <label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">{{ 'sections.collection_template.from' | t }}</label>
                      </div>
                      <div class="field">
                        <span class="field__currency">{{ cart.currency.symbol }}</span>
                        <input class="field__input"
                          name="{{ filter.max_value.param_name }}"
                          id="Filter-{{ filter.label | escape }}-LTE"
                          {%- if filter.max_value.value -%}
                            {%- if uses_comma_decimals -%}
                              value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                            {%- else -%}
                              value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
                            {% endif %}
                          {%- endif -%}
                          type="number"
                          placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                          min="0"
                          max="{{ filter.range_max | money_without_currency | replace: ',', '' }}">
                        </input>
                        <label class="field__label" for="Filter-{{ filter.label | escape }}-LTE">{{ 'sections.collection_template.to' | t }}</label>
                      </div>
                    </div>
                  </price-range>
                </details>
              {% endcase %}
            {%- endfor -%}
            <noscript>
              <button type="submit" class="facets__button button">{{ 'sections.collection_template.filter_button' | t }}</button>
            </noscript>
          </div>

          <div class="active-facets active-facets-desktop">
            <facet-remove>
              <a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button">
                <span class="active-facets__button-inner button button--secondary">{{ 'sections.collection_template.clear_all' | t }}</span>
              </a>
            </facet-remove>
            {%- for filter in collection.filters -%}
              {%- for value in filter.active_values -%}
                <facet-remove>
                  <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                    <span class="active-facets__button-inner button button--tertiary">
                      {{ value.label | escape }}
                      {% render 'icon-close-small' %}
                    </span>
                  </a>
                </facet-remove>
              {%- endfor -%}
              {% if filter.type == "price_range" %}
                {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
                  <facet-remove>
                    <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                      <span class="active-facets__button-inner button button--tertiary">
                        {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
                        {% render 'icon-close-small' %}
                      </span>
                    </a>
                  </facet-remove>
                {%- endif -%}
              {% endif %}
            {%- endfor -%}
          </div>
        {% endif %}

        {% if collection.current_vendor or collection.current_type %}
          <input type="hidden" name="q" value="{{ collection.current_vendor }}{{ collection.current_type }}">
        {% endif %}

        {%- if section.settings.enable_sorting -%}
          <div class="collection-filters__item sorting">
            <div class="collection-filters__field">
              <label class="collection-filters__label" for="SortBy">{{ 'sections.collection_template.sort_by_label' | t }}</label>
              <div class="select">
                {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                <select name="sort_by" class="select__select collection-filters__sort" id="SortBy" aria-describedby="a11y-refresh-page-message">
                  {%- for option in collection.sort_options -%}
                    <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>

            <noscript>
              <button type="submit" class="button button--small">{{ 'sections.collection_template.sort_button' | t }}</button>
            </noscript>
          </div>
        {%- endif -%}
      </form>
    </collection-filters-form>
    <menu-drawer class="mobile-facets__wrapper" data-breakpoint="mobile">
      <details class="disclosure-has-popup medium-hide large-up-hide">
        <summary>
          <span class="mobile-facets__open button button--secondary">
            {% render 'icon-filter' %}
            <span>{{ 'sections.collection_template.filter_and_sort' | t }}</span>
            <span class="count-bubble">
              {%- if total_active_values > 0 -%}{{ total_active_values }}{%- endif -%}
            </span>
          </span>
          <span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">{%- render 'icon-close' -%}</span>
        </summary>
        <collection-filters-form>
          <form id="CollectionFiltersFormMobile" class="mobile-facets">
            <div class="mobile-facets__inner">
              <div class="mobile-facets__header">
                <div class="mobile-facets__header-inner">
                  <h2 class="mobile-facets__heading">{{ 'sections.collection_template.filter_and_sort' | t }}</h2>
                  <p class="mobile-facets__count">{{ 'sections.collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}</p>
                </div>
              </div>
              <div class="mobile-facets__main">
                {%- for filter in collection.filters -%}
                  {% case filter.type %}
                  {% when 'list' %}
                    <details class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
                      <summary class="mobile-facets__summary">
                        <div>
                          <span>{{ filter.label | escape }}</span>
                          <span class="count-bubble">
                            {%- if filter.active_values.size > 0 -%}{{ filter.active_values.size }}{%- endif -%}
                          </span>
                          <span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
                          <noscript>{% render 'icon-caret' %}</noscript>
                        </div>
                      </summary>
                      <div class="mobile-facets__submenu">
                        <button class="mobile-facets__close-button link link--text focus-inset" aria-expanded="true" type="button">
                          {% render 'icon-arrow' %}
                          {{ filter.label | escape }}
                        </button>
                        <ul class="mobile-facets__list list-unstyled" role="list">
                          {%- for value in filter.values -%}
                            <li class="mobile-facets__item list-menu__item">
                              <label for="Filter-{{ filter.label | escape }}-mobile-{{ forloop.index }}" class="mobile-facets__label{% if value.count == 0 and value.active == false %} mobile-facets__label--disabled{% endif %}">
                                <input class="mobile-facets__checkbox" type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}" id="Filter-{{ filter.label | escape }}-mobile-{{ forloop.index }}"
                                  {% if value.active %}checked{% endif %}
                                  {% if value.count == 0 and value.active == false %}disabled{% endif %}
                                >

                                <span class="mobile-facets__highlight"></span>

                                <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                  <rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
                                </svg>

                                <svg class="icon icon-checkmark" width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>

                                {{ value.label | escape }} ({{ value.count }})
                              </label>
                            </li>
                          {%- endfor -%}
                        </ul>

                        <div class="no-js-hidden mobile-facets__footer">
                          <facet-remove>
                            <a href="{{ collection.url }}" class="mobile-facets__clear button button--secondary">{{ 'sections.collection_template.clear' | t }}</a>
                          </facet-remove>
                          <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'sections.collection_template.apply' | t }}</button>
                          <noscript><button class="button button--primary">{{ 'sections.collection_template.apply' | t }}</button></noscript>
                        </div>
                      </div>
                    </details>
                  {% when 'price_range' %}
                    <details class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
                      <summary class="mobile-facets__summary">
                        <div>
                          <span>{{ filter.label | escape }}</span>
                          <span class="count-bubble{%- if filter.min_value.value or filter.max_value.value -%}{{ filter.active_values.size }} count-bubble--dot{% endif %}"></span>
                          <span class="mobile-facets__arrow no-js-hidden">{% render 'icon-arrow' %}</span>
                          <noscript>{% render 'icon-caret' %}</noscript>
                        </div>
                      </summary>
                      <div class="mobile-facets__submenu">
                        <button class="mobile-facets__close-button link link--text focus-inset" aria-expanded="true" type="button">
                          {% render 'icon-arrow' %}
                          {{ filter.label | escape }}
                        </button>

                        <p class="mobile-facets__info">{{ "sections.collection_template.max_price" | t: price: max_price_amount }}</p>

                        <price-range class="facets__price">
                          <div class="field">
                            <span class="field__currency">{{ cart.currency.symbol }}</span>
                            <input class="field__input"
                              name="{{ filter.min_value.param_name }}"
                              id="Mobile-Filter-{{ filter.label | escape }}-GTE"
                              {%- if filter.min_value.value -%}
                                {%- if uses_comma_decimals -%}
                                  value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                                {%- else -%}
                                  value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
                                {% endif %}
                              {%- endif -%}
                              type="number"
                              placeholder="0"
                              min="0"
                              max="{{ filter.range_max | divided_by: 100 | ceil }}">
                            </input>
                            <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'sections.collection_template.from' | t }}</label>
                          </div>
                          <div class="field">
                            <span class="field__currency">{{ cart.currency.symbol }}</span>
                            <input class="field__input"
                              name="{{ filter.max_value.param_name }}"
                              id="Mobile-Filter-{{ filter.label | escape }}-LTE"
                              {%- if filter.max_value.value -%}
                                {%- if uses_comma_decimals -%}
                                  value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                                {%- else -%}
                                  value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
                                {% endif %}
                              {%- endif -%}
                              type="number"
                              placeholder="{{ filter.range_max | divided_by: 100 | ceil }}"
                              min="0"
                              max="{{ filter.range_max | divided_by: 100 | ceil }}">
                            </input>
                            <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">{{ 'sections.collection_template.to' | t }}</label>
                          </div>
                        </price-range>
                      </div>
                    </details>
                  {% endcase %}
                {%- endfor -%}

                {%- if section.settings.enable_sorting -%}
                  <div class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
                    <div class="mobile-facets__summary">
                      <div class="mobile-facets__sort">
                        <label for="SortBy-mobile">{{ 'sections.collection_template.sort_by_label' | t }}</label>
                        <div class="select">
                          <select name="sort_by" class="select__select" id="SortBy-mobile" aria-describedby="a11y-refresh-page-message">
                            {%- for option in collection.sort_options -%}
                              <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                            {%- endfor -%}
                          </select>
                          {% render 'icon-caret' %}
                        </div>
                      </div>
                    </div>
                  </div>
                {%- endif -%}

                <div class="mobile-facets__footer">
                  <facet-remove>
                    <a href="{{ collection.url }}" class="mobile-facets__clear button button--secondary">{{ 'sections.collection_template.clear' | t }}</a>
                  </facet-remove>
                  <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'sections.collection_template.apply' | t }}</button>
                  <noscript><button class="button button--primary">{{ 'sections.collection_template.apply' | t }}</button></noscript>
                </div>
              </div>

              {% if collection.current_vendor or collection.current_type %}
                <input type="hidden" name="q" value="{{ collection.current_vendor }}{{ collection.current_type }}">
              {% endif %}
            </div>
          </form>
        </collection-filters-form>
      </details>
    </menu-drawer>

    <div class="active-facets active-facets-mobile">
      <facet-remove>
        <a href="{{ collection.url }}?sort_by={{ sort_by }}" class="active-facets__button">
          <span class="active-facets__button-inner button button--secondary">
            {{ 'sections.collection_template.clear_all' | t }}
          </span>
        </a>
      </facet-remove>
      {%- for filter in collection.filters -%}
        {%- for value in filter.active_values -%}
          <facet-remove>
            <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
              <span class="active-facets__button-inner button button--tertiary">
                {{ value.label | escape }}
                {% render 'icon-close-small' %}
              </span>
            </a>
          </facet-remove>
        {%- endfor -%}

        {% if filter.type == "price_range" %}
          {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
            <facet-remove>
              <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                <span class="active-facets__button-inner button button--tertiary">
                  {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
                  {% render 'icon-close-small' %}
                </span>
              </a>
            </facet-remove>
          {%- endif -%}
        {% endif %}
      {%- endfor -%}
    </div>
  {%- endif -%}
</div>

<div id="CollectionProductGrid">
  {%- paginate collection.products by section.settings.products_per_page -%}
    {%- if collection.products.size == 0 -%}
      <div class="collection collection--empty page-width" id="main-collection-product-grid" data-id="{{ section.id }}">
        <div class="loading-overlay">
          <div class="loading-overlay__spinner">
            <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
              <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
            </svg>
          </div>
        </div>

        <p class="collection-product-count light" role="status">
          {{ 'sections.collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
        </p>

        <div class="title-wrapper center">
          <h2 class="title title--primary">
            {{ 'sections.collection_template.empty' | t }}<br>
            {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
          </h2>
        </div>
      </div>
    {%- else -%}
      <div class="collection page-width">
        <div class="loading-overlay">
          <div class="loading-overlay__spinner">
            <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
              <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
            </svg>
          </div>
        </div>

        <p class="collection-product-count light" role="status">
          {{ 'sections.collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
        </p>

        <ul id="main-collection-product-grid" data-id="{{ section.id }}" class="
          grid grid--2-col
          {% if collection.products_count < 4 %} grid--{{ collection.products_count }}-col-tablet{% else %}
            {% if collection.products_count == 4 %} grid--4-col-desktop{% else %} grid--3-col-tablet grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
          {% endif %} negative-margin">
          {%- for product in collection.products -%}
            <li class="grid__item">
              {% render 'product-card',
                product_card_product: product,
                media_size: section.settings.image_ratio,
                show_secondary_image: section.settings.show_secondary_image,
                add_image_padding: section.settings.add_image_padding,
                show_vendor: section.settings.show_vendor
              %}
            </li>
          {%- endfor -%}
        </ul>

        {%- if paginate.pages > 1 -%}
          {% render 'pagination', paginate: paginate, anchor: '', class: '' %}
        {%- endif -%}
      </div>
    {%- endif -%}
  {%- endpaginate -%}
</div>

{% schema %}
{
  "name": "t:sections.main-collection-product-grid.name",
  "class": "spaced-section collection-grid-section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__3.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
      "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    }
  ]
}
{% endschema %}