Solved

Can you modify Sort By options in Dawn 2.0 on Shopify?

MikeBaguyo
Explorer
48 0 18

Hi! Is it possible to remove some options here in the Sort By dropdown? I'm using Dawn 2.0

MikeBaguyo_0-1635328435639.png

My store url: chrisandleon.com

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MikeBaguyo 

Replace all following code your Snippets/facets.liquid file

{% comment %}
    Renders facets (filtering and sorting)

    Accepts:
    - results: {Object} Collection or Search object
    - enable_filtering: {Boolean} Show filtering when true
    - enable_sorting: {Boolean} Show sorting when true
    - collapse_on_larger_devices: {Boolean} Collapse filtering/sorting into menu on larger devices when true

    Usage:
    {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false %}
{% endcomment %}

{%- liquid
  assign sort_by = results.sort_by | default: results.default_sort_by
  assign total_active_values = 0
  if results.url
    assign results_url = results.url
  else 
    assign terms = results.terms | escape
    assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
  endif
-%}

<div class="facets-container">
  {%- unless collapse_on_larger_devices -%}
    <facet-filters-form class="facets small-hide">
      <form id="FacetFiltersForm" class="facets__form">

        {%- if results.terms -%}
          <input type="hidden" name="q" value="{{ results.terms | escape }}">
          <input name="options[prefix]" type="hidden" value="last">
        {%- endif -%}

        {% if enable_filtering %}
          <div id="FacetsWrapperDesktop" class="facets__wrapper">
            {%- unless results.filters == empty -%}
              <p class="facets__heading caption-large">{{ 'products.facets.filter_by_label' | t }}</p>
            {%- endunless -%}

            {%- for filter in results.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 caption-large focus-offset">
                    <div>
                      <span>{{ filter.label | escape }}</span>
                      {% render 'icon-caret' %}
                    </div>
                  </summary>
                  <div class="facets__display">
                    <div class="facets__header">
                      <span class="facets__selected no-js-hidden">{{ 'products.facets.filters_selected' | t: count: filter.active_values.size }}</span>
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                          {{ 'products.facets.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 caption-large focus-offset">
                    <div>
                      <span>{{ filter.label | escape }}</span>
                      {% render 'icon-caret' %}
                    </div>
                  </summary>
                  <div class="facets__display">
                    <div class="facets__header">
                      {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                      <span class="facets__selected">{{ "products.facets.max_price" | t: price: max_price_amount }}</span>
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link" >
                          {{ 'products.facets.reset' | t }}
                        </a>
                      </facet-remove>
                    </div>
                    <price-range class="facets__price">
                      <span class="field-currency">{{ cart.currency.symbol }}</span>
                      <div class="field">
                        <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"
                          {%- if uses_comma_decimals -%}max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"{%- else -%}max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"{% endif %}
                        >
                        </input>
                        <label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
                      </div>
                      <span class="field-currency">{{ cart.currency.symbol }}</span>
                      <div class="field">
                        <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"
                          min="0"
                          {%- if uses_comma_decimals -%}
                            placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                            max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                          {%- else -%}
                            placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                            max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                          {% endif %}
                        >
                        </input>
                        <label class="field__label" for="Filter-{{ filter.label | escape }}-LTE">{{ 'products.facets.to' | t }}</label>
                      </div>
                    </div>
                  </price-range>
                </details>
              {% endcase %}
            {%- endfor -%}
            <noscript>
              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.filter_button' | t }}</button>
            </noscript>
          </div>

          <div class="active-facets active-facets-desktop">
            {%- for filter in results.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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                    </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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                      </span>
                    </a>
                  </facet-remove>
                {%- endif -%}
              {% endif %}
            {%- endfor -%}
            <facet-remove class="active-facets__button-wrapper">
              <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
                <span>{{ 'products.facets.clear_all' | t }}</span>
              </a>
            </facet-remove>
          </div>
        {% endif %}

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

        {%- if enable_sorting -%}
          <div class="facet-filters sorting caption">
            <div class="facet-filters__field">
              <label class="facet-filters__label caption-large" for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
              <div class="select">
                {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
                <select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
                  {%- for option in results.sort_options -%}
                  {% unless option.value == 'manual' or option.value == 'best-selling' %}
                    <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                  {% endunless %}
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>

            <noscript>
              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
            </noscript>
          </div>
        {%- endif -%}

        <div class="product-count light" role="status">
          <p id="ProductCountDesktop" class="product-count__text">
            {%- if results.results_count -%}
              {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
            {%- elsif results.products_count == results.all_products_count -%}
              {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
            {%- else -%}
              {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
            {%- endif -%}
          </p>
          <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>          
      </form>
    </facet-filters-form>
  {%- endunless -%}

  <menu-drawer class="mobile-facets__wrapper {% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}" data-breakpoint="mobile">
    <details class="mobile-facets__disclosure disclosure-has-popup">
      <summary class="mobile-facets__open-wrapper focus-offset">
        <span class="mobile-facets__open">
          {% render 'icon-filter' %}
          <span class="mobile-facets__open-label button-label">
            {%- if enable_filtering and enable_sorting -%}
              {{ 'products.facets.filter_and_sort' | t }}
            {%- elsif enable_filtering -%}
              {{ 'products.facets.filter_button' | t }}
            {%- elsif enable_sorting -%}
              {{ 'products.facets.sort_button' | t }}
            {%- endif -%}
          </span>
        </span>
        <span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">{%- render 'icon-close' -%}</span>
      </summary>
      <facet-filters-form>
        <form id="FacetFiltersFormMobile" class="mobile-facets">
          <div class="mobile-facets__inner">
            <div class="mobile-facets__header">
              <div class="mobile-facets__header-inner">
                <h2 class="mobile-facets__heading">
                  {%- if enable_filtering and enable_sorting -%}
                    {{ 'products.facets.filter_and_sort' | t }}
                  {%- elsif enable_filtering -%}
                    {{ 'products.facets.filter_button' | t }}
                  {%- elsif enable_sorting -%}
                    {{ 'products.facets.sort_button' | t }}
                  {%- endif -%}
                </h2>
                <p class="mobile-facets__count">
                    {%- if results.results_count -%}
                      {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
                    {%- elsif results.products_count == results.all_products_count -%}
                      {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
                    {%- else -%}
                      {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
                    {%- endif -%}
                </p>
              </div>
            </div>
            <div class="mobile-facets__main">
              {%- for filter in results.filters -%}
                {% case filter.type %}
                {% when 'list' %}
                  <details class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
                    <summary class="mobile-facets__summary focus-inset">
                      <div>
                        <span>{{ filter.label | escape }}</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 class="mobile-facets__clear-wrapper">
                          <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">{{ 'products.facets.clear' | t }}</a>
                        </facet-remove>
                        <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'products.facets.apply' | t }}</button>
                        <noscript><button class="button button--primary">{{ 'products.facets.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 focus-inset">
                      <div>
                        <span>{{ filter.label | escape }}</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">{{ "products.facets.max_price" | t: price: max_price_amount }}</p>

                      <price-range class="facets__price">
                        <span class="field-currency">{{ cart.currency.symbol }}</span>
                        <div class="field">
                          <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"
                            inputmode="decimal"
                            {%- if uses_comma_decimals -%}max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"{%- else -%}max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"{% endif %}
                          >
                          </input>
                          <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
                        </div>

                        <span class="field-currency">{{ cart.currency.symbol }}</span>
                        <div class="field">
                          <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"
                            min="0"
                            inputmode="decimal"
                            {%- if uses_comma_decimals -%}
                              placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                              max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                            {%- else -%}
                              placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                              max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                            {% endif %}
                          >
                          </input>
                          <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">{{ 'products.facets.to' | t }}</label>
                        </div>
                      </price-range>
                      <div class="no-js-hidden mobile-facets__footer">
                        <facet-remove class="mobile-facets__clear-wrapper">
                          <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">{{ 'products.facets.clear' | t }}</a>
                        </facet-remove>
                        <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'products.facets.apply' | t }}</button>
                        <noscript><button class="button button--primary">{{ 'products.facets.apply' | t }}</button></noscript>
                      </div>
                    </div>
                  </details>
                {% endcase %}
              {%- endfor -%}

              {%- if 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">{{ 'products.facets.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 results.sort_options -%}
                          {% unless option.value == 'manual' or option.value == 'best-selling' %}
                            <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                          {% endunless %}
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                    </div>
                  </div>
                </div>
              {%- endif -%}

              <div class="mobile-facets__footer">
                <facet-remove class="mobile-facets__clear-wrapper">
                  <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">{{ 'products.facets.clear_all' | t }}</a>
                </facet-remove>
                <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'products.facets.apply' | t }}</button>
                <noscript><button class="button button--primary">{{ 'products.facets.apply' | t }}</button></noscript>
              </div>
            </div>

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

            {%- if results.terms -%}
              <input type="hidden" name="q" value="{{ results.terms | escape }}">
              <input name="options[prefix]" type="hidden" value="last">
            {%- endif -%}            
          </div>
        </form>
      </facet-filters-form>
    </details>
  </menu-drawer>

  <div class="active-facets active-facets-mobile {% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}">
    {%- for filter in results.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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
            </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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
              </span>
            </a>
          </facet-remove>
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    <facet-remove class="active-facets__button-wrapper">
      <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
        <span>{{ 'products.facets.clear_all' | t }}</span>
      </a>
    </facet-remove>
  </div>
  <div class="product-count light{% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}" role="status">
    <p id="ProductCount" class="product-count__text">
      {%- if results.results_count -%}
        {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
      {%- elsif results.products_count == results.all_products_count -%}
        {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
      {%- else -%}
        {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
      {%- endif -%}
    </p>
    <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>
</div>

Hope this work!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 20 (20)

dmwwebartisan
Shopify Partner
12280 2546 3694

@MikeBaguyo 

 which options you want remove from sort dropdown ?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MikeBaguyo
Explorer
48 0 18

@dmwwebartisan 

If possible, the featured and best selling. 

dmwwebartisan
Shopify Partner
12280 2546 3694

@MikeBaguyo 

Please share your sections/main-collection-product-grid.liquid file code.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MikeBaguyo
Explorer
48 0 18

@dmwwebartisan 

Hi! These are the codes from that:

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}

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

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

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>

<div class="page-width" id="main-collection-filters" data-id="{{ section.id }}">
{% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %}
</div>
{%- endif -%}

<div id="ProductGridContainer">
{%- paginate collection.products by section.settings.products_per_page -%}
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<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 gradient"></div>

<ul id="product-grid" data-id="{{ section.id }}" class="
grid grid--2-col negative-margin product-grid
{% 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 %}">
{%- 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,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- endfor -%}
</ul>

{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- 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_image_outline",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_rating.label",
"info": "t:sections.main-collection-product-grid.settings.show_rating.info"
},
{
"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"
},
{
"type": "checkbox",
"id": "collapse_on_larger_devices",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.collapse_on_larger_devices.label"
}
]
}
{% endschema %}

dmwwebartisan
Shopify Partner
12280 2546 3694

@MikeBaguyo 

your theme code is diffrent please share theme.zip i will check code and send correct solution for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MikeBaguyo
Explorer
48 0 18

@dmwwebartisan 

Hi! Sure! Is it this one?

 

dmwwebartisan
Shopify Partner
12280 2546 3694

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

@MikeBaguyo 

find the following liquid code 

<select name="sort_by" class="collection-filters__sort select__select caption-large" 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>

Replace to

<select name="sort_by" class="collection-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
                    {%- for option in collection.sort_options -%}
                    {% unless option.value == 'manual' or option.value == 'best-selling' %}
                      <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                    {% endunless %}
                    {%- endfor -%}
</select>
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MikeBaguyo
Explorer
48 0 18

@dmwwebartisan 

Will try this one. Thank you!

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MikeBaguyo 

Replace all following code your Snippets/facets.liquid file

{% comment %}
    Renders facets (filtering and sorting)

    Accepts:
    - results: {Object} Collection or Search object
    - enable_filtering: {Boolean} Show filtering when true
    - enable_sorting: {Boolean} Show sorting when true
    - collapse_on_larger_devices: {Boolean} Collapse filtering/sorting into menu on larger devices when true

    Usage:
    {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false %}
{% endcomment %}

{%- liquid
  assign sort_by = results.sort_by | default: results.default_sort_by
  assign total_active_values = 0
  if results.url
    assign results_url = results.url
  else 
    assign terms = results.terms | escape
    assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
  endif
-%}

<div class="facets-container">
  {%- unless collapse_on_larger_devices -%}
    <facet-filters-form class="facets small-hide">
      <form id="FacetFiltersForm" class="facets__form">

        {%- if results.terms -%}
          <input type="hidden" name="q" value="{{ results.terms | escape }}">
          <input name="options[prefix]" type="hidden" value="last">
        {%- endif -%}

        {% if enable_filtering %}
          <div id="FacetsWrapperDesktop" class="facets__wrapper">
            {%- unless results.filters == empty -%}
              <p class="facets__heading caption-large">{{ 'products.facets.filter_by_label' | t }}</p>
            {%- endunless -%}

            {%- for filter in results.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 caption-large focus-offset">
                    <div>
                      <span>{{ filter.label | escape }}</span>
                      {% render 'icon-caret' %}
                    </div>
                  </summary>
                  <div class="facets__display">
                    <div class="facets__header">
                      <span class="facets__selected no-js-hidden">{{ 'products.facets.filters_selected' | t: count: filter.active_values.size }}</span>
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                          {{ 'products.facets.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 caption-large focus-offset">
                    <div>
                      <span>{{ filter.label | escape }}</span>
                      {% render 'icon-caret' %}
                    </div>
                  </summary>
                  <div class="facets__display">
                    <div class="facets__header">
                      {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                      <span class="facets__selected">{{ "products.facets.max_price" | t: price: max_price_amount }}</span>
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link" >
                          {{ 'products.facets.reset' | t }}
                        </a>
                      </facet-remove>
                    </div>
                    <price-range class="facets__price">
                      <span class="field-currency">{{ cart.currency.symbol }}</span>
                      <div class="field">
                        <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"
                          {%- if uses_comma_decimals -%}max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"{%- else -%}max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"{% endif %}
                        >
                        </input>
                        <label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
                      </div>
                      <span class="field-currency">{{ cart.currency.symbol }}</span>
                      <div class="field">
                        <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"
                          min="0"
                          {%- if uses_comma_decimals -%}
                            placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                            max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                          {%- else -%}
                            placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                            max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                          {% endif %}
                        >
                        </input>
                        <label class="field__label" for="Filter-{{ filter.label | escape }}-LTE">{{ 'products.facets.to' | t }}</label>
                      </div>
                    </div>
                  </price-range>
                </details>
              {% endcase %}
            {%- endfor -%}
            <noscript>
              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.filter_button' | t }}</button>
            </noscript>
          </div>

          <div class="active-facets active-facets-desktop">
            {%- for filter in results.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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                    </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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                      </span>
                    </a>
                  </facet-remove>
                {%- endif -%}
              {% endif %}
            {%- endfor -%}
            <facet-remove class="active-facets__button-wrapper">
              <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
                <span>{{ 'products.facets.clear_all' | t }}</span>
              </a>
            </facet-remove>
          </div>
        {% endif %}

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

        {%- if enable_sorting -%}
          <div class="facet-filters sorting caption">
            <div class="facet-filters__field">
              <label class="facet-filters__label caption-large" for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
              <div class="select">
                {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
                <select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
                  {%- for option in results.sort_options -%}
                  {% unless option.value == 'manual' or option.value == 'best-selling' %}
                    <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                  {% endunless %}
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>

            <noscript>
              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
            </noscript>
          </div>
        {%- endif -%}

        <div class="product-count light" role="status">
          <p id="ProductCountDesktop" class="product-count__text">
            {%- if results.results_count -%}
              {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
            {%- elsif results.products_count == results.all_products_count -%}
              {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
            {%- else -%}
              {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
            {%- endif -%}
          </p>
          <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>          
      </form>
    </facet-filters-form>
  {%- endunless -%}

  <menu-drawer class="mobile-facets__wrapper {% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}" data-breakpoint="mobile">
    <details class="mobile-facets__disclosure disclosure-has-popup">
      <summary class="mobile-facets__open-wrapper focus-offset">
        <span class="mobile-facets__open">
          {% render 'icon-filter' %}
          <span class="mobile-facets__open-label button-label">
            {%- if enable_filtering and enable_sorting -%}
              {{ 'products.facets.filter_and_sort' | t }}
            {%- elsif enable_filtering -%}
              {{ 'products.facets.filter_button' | t }}
            {%- elsif enable_sorting -%}
              {{ 'products.facets.sort_button' | t }}
            {%- endif -%}
          </span>
        </span>
        <span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">{%- render 'icon-close' -%}</span>
      </summary>
      <facet-filters-form>
        <form id="FacetFiltersFormMobile" class="mobile-facets">
          <div class="mobile-facets__inner">
            <div class="mobile-facets__header">
              <div class="mobile-facets__header-inner">
                <h2 class="mobile-facets__heading">
                  {%- if enable_filtering and enable_sorting -%}
                    {{ 'products.facets.filter_and_sort' | t }}
                  {%- elsif enable_filtering -%}
                    {{ 'products.facets.filter_button' | t }}
                  {%- elsif enable_sorting -%}
                    {{ 'products.facets.sort_button' | t }}
                  {%- endif -%}
                </h2>
                <p class="mobile-facets__count">
                    {%- if results.results_count -%}
                      {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
                    {%- elsif results.products_count == results.all_products_count -%}
                      {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
                    {%- else -%}
                      {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
                    {%- endif -%}
                </p>
              </div>
            </div>
            <div class="mobile-facets__main">
              {%- for filter in results.filters -%}
                {% case filter.type %}
                {% when 'list' %}
                  <details class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
                    <summary class="mobile-facets__summary focus-inset">
                      <div>
                        <span>{{ filter.label | escape }}</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 class="mobile-facets__clear-wrapper">
                          <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">{{ 'products.facets.clear' | t }}</a>
                        </facet-remove>
                        <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'products.facets.apply' | t }}</button>
                        <noscript><button class="button button--primary">{{ 'products.facets.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 focus-inset">
                      <div>
                        <span>{{ filter.label | escape }}</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">{{ "products.facets.max_price" | t: price: max_price_amount }}</p>

                      <price-range class="facets__price">
                        <span class="field-currency">{{ cart.currency.symbol }}</span>
                        <div class="field">
                          <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"
                            inputmode="decimal"
                            {%- if uses_comma_decimals -%}max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"{%- else -%}max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"{% endif %}
                          >
                          </input>
                          <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
                        </div>

                        <span class="field-currency">{{ cart.currency.symbol }}</span>
                        <div class="field">
                          <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"
                            min="0"
                            inputmode="decimal"
                            {%- if uses_comma_decimals -%}
                              placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                              max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"
                            {%- else -%}
                              placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                              max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                            {% endif %}
                          >
                          </input>
                          <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">{{ 'products.facets.to' | t }}</label>
                        </div>
                      </price-range>
                      <div class="no-js-hidden mobile-facets__footer">
                        <facet-remove class="mobile-facets__clear-wrapper">
                          <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">{{ 'products.facets.clear' | t }}</a>
                        </facet-remove>
                        <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'products.facets.apply' | t }}</button>
                        <noscript><button class="button button--primary">{{ 'products.facets.apply' | t }}</button></noscript>
                      </div>
                    </div>
                  </details>
                {% endcase %}
              {%- endfor -%}

              {%- if 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">{{ 'products.facets.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 results.sort_options -%}
                          {% unless option.value == 'manual' or option.value == 'best-selling' %}
                            <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                          {% endunless %}
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                    </div>
                  </div>
                </div>
              {%- endif -%}

              <div class="mobile-facets__footer">
                <facet-remove class="mobile-facets__clear-wrapper">
                  <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">{{ 'products.facets.clear_all' | t }}</a>
                </facet-remove>
                <button type="button" class="no-js-hidden button button--primary" onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()">{{ 'products.facets.apply' | t }}</button>
                <noscript><button class="button button--primary">{{ 'products.facets.apply' | t }}</button></noscript>
              </div>
            </div>

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

            {%- if results.terms -%}
              <input type="hidden" name="q" value="{{ results.terms | escape }}">
              <input name="options[prefix]" type="hidden" value="last">
            {%- endif -%}            
          </div>
        </form>
      </facet-filters-form>
    </details>
  </menu-drawer>

  <div class="active-facets active-facets-mobile {% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}">
    {%- for filter in results.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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
            </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 class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
              </span>
            </a>
          </facet-remove>
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    <facet-remove class="active-facets__button-wrapper">
      <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
        <span>{{ 'products.facets.clear_all' | t }}</span>
      </a>
    </facet-remove>
  </div>
  <div class="product-count light{% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}" role="status">
    <p id="ProductCount" class="product-count__text">
      {%- if results.results_count -%}
        {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
      {%- elsif results.products_count == results.all_products_count -%}
        {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
      {%- else -%}
        {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }}
      {%- endif -%}
    </p>
    <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>
</div>

Hope this work!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MikeBaguyo
Explorer
48 0 18

@dmwwebartisan 

OH MY GOSH THIS WORKED!!!!!! WOW!!!!!!!!!!!

dmwwebartisan
Shopify Partner
12280 2546 3694

@MikeBaguyo 

Thanks! welcome again.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CathrinePearl
Tourist
4 0 1

Hi, 

 

Is there any way to do exactly the same but only keep the Price low to high and high to low options? 

 

Thank you! 

kyle_who_codes
Shopify Partner
2 0 2

Hey Cathrine,  after adding the new facets code from the accepted solution find this section 

{% unless option.value == 'manual' or option.value == 'best-selling' %}

and change it to this 

{% unless option.value == 'manual' or option.value == 'best-selling' or option.value == 
'title-ascending' or option.value == 'title-descending' or option.value == 'created-ascending' or option.value == 'created-descending' %}

 

- Kyle Devine
CathrinePearl
Tourist
4 0 1

Thank you so much, it worked!

kyle_who_codes
Shopify Partner
2 0 2

Can you tell me how to make 'best-selling' the default selected option so that when the page loads it displays the best selling products?  I've removed the Alphabetical option and the page still sorts alphabetically on the first load.

- Kyle Devine
chachaperchee
Tourist
7 0 1

found my answer already thanks

jchonparadise
Visitor
3 0 0

Is it possible to ADD a search option? Specifically, sort by SKU…

Jchon
MikeBaguyo
Explorer
48 0 18

@dmwwebartisan 

Sadly, I cannot find this code in any of the liquids 😞 

chachaperchee
Tourist
7 0 1

Hi ! Same question here but I would like to remove Featured, Best Selling + Alphabetical order A-Z and Z-A

Many thx in advance