FROM CACHE - en_header
Promotion image
Solved

How to modify 'Sort By' dropdown options in Dawn 2.0?

MikeBaguyo
Explorer
48 0 18
‎10-27-2021 05:54 AM

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

 

5,180 Views
0 Likes
Report
Accepted Solution (1)
In response to MikeBaguyo

dmwwebartisan
Shopify Partner
12289 2547 3698
‎10-27-2021 07:38 AM

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

4,989 Views
1 Like
Report
Replies 20 (20)

Community Blog Articles

Image 3 - Header image 16_9 V1@2x.png
A guide to Shopify POS Launch and Operations success

Are you ready to take your business to the next level? Look no further than the latest ...

By SarahF_Shopify Apr 15, 2024
JasonH_0-1712162359820.png
Community Connect: Recap March 24’

We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...

By JasonH Apr 8, 2024
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World logo displayed above.
Shopify Store Design: Expert Advice from Stephen’s World

Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...

By JasonH Mar 18, 2024
Terms of Service Privacy Policy