diff --git a/assets/component-facets.css b/assets/component-facets.css
index a1184afb987..3011f1fbdfa 100644
--- a/assets/component-facets.css
+++ b/assets/component-facets.css
@@ -9,6 +9,10 @@
   margin-bottom: 0.5rem;
 }
 
+.mobile-facets__list {
+  overflow-y: auto;
+}
+
 @media screen and (min-width: 750px) {
   .facets-container > * + * {
     margin-top: 0;
@@ -988,6 +992,14 @@ input.mobile-facets__checkbox {
     padding-right: 3rem;
   }
 
+  .facets-vertical .facets-wrapper--no-filters {
+    display: none;
+  }
+
+  .no-js .facets-vertical .facets-wrapper--no-filters {
+    display: block;
+  }
+
   .facets-vertical .product-grid-container {
     width: 100%;
   }
@@ -1007,6 +1019,7 @@ input.mobile-facets__checkbox {
 
   .facets-vertical .no-js .facets__button-no-js {
     transform: none;
+    margin-left: 0;
   }
 
   .facets-vertical .no-js .facet-filters__field {
@@ -1027,8 +1040,9 @@ input.mobile-facets__checkbox {
     margin-bottom: 1.5rem;
   }
 
-  .facets-vertical .facet-filters.sorting.no-js {
+  .no-js .facets-vertical .facet-filters.sorting {
     padding-left: 0;
+    flex-direction: column;
   }
 
   .facets-vertical .facet-checkbox input[type='checkbox'] {
@@ -1056,44 +1070,27 @@ input.mobile-facets__checkbox {
   .facets-container-drawer {
     display: flex;;
     flex-flow: row wrap;
+    align-items: center;
     column-gap: 0;
   }
 
   .facets-container-drawer .mobile-facets__wrapper  {
     margin-right: 2rem;
+    flex-grow: 1;
   }
 
   .facets-container-drawer .product-count {
-    align-self: flex-start;
-  }
-
-  .facets-container-drawer .mobile-facets__wrapper {
-    width: calc(40% - 2rem);
+    margin: 0 0 0.5rem 3.5rem;
   }
 
-  .facets-container-drawer .facets {
-    width: 40%;
+  .facets-container-drawer .facets-pill {
+    width: 100%;
   }
 
-  .facets-container-drawer .product-count {
-    width: 20%;
-  }
 
   .facets-container-drawer .facets__form {
     display: block;
   }
-
-  .no-js .facets-container-drawer .mobile-facets__wrapper  {
-    width: calc(20% - 2rem);
-  }
-
-  .no-js  .facets-container-drawer .facets {
-    width: 60%;
-  }
-
-  .no-js .facets-container-drawer .product-count {
-    width: 20%;
-  }
 }
 
 @media screen and (min-width: 750px) and (max-width: 989px) {
@@ -1104,6 +1101,6 @@ input.mobile-facets__checkbox {
   }
 
   .facets-vertical .active-facets__button-remove {
-    padding: 1rem;
+    padding: 0 1rem 1rem;
   }
 }
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index e2eb447d451..9c5976c2c65 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -47,7 +47,7 @@
             </div>
           </div>
           <noscript>
-            <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+            <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
           </noscript>
         </div>
 
@@ -76,8 +76,8 @@
   <div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
     {{ 'component-facets.css' | asset_url | stylesheet_tag }}
     <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
-    {%- if section.settings.enable_filtering -%}
-      <aside aria-labelledby="verticalTitle" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
+    {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
+      <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
         {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
       </aside>
     {%- endif -%}
diff --git a/sections/main-search.liquid b/sections/main-search.liquid
index 02755c5f9e1..4dae92e6125 100644
--- a/sections/main-search.liquid
+++ b/sections/main-search.liquid
@@ -151,7 +151,7 @@
               </div>
             </div>
             <noscript>
-              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+              <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
             </noscript>
           </div>
 
@@ -179,7 +179,7 @@
     <div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>
       {%- if search.filters != empty -%}
         {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
-          <aside aria-labelledby="verticalTitle" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
+          <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
             {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
           </aside>
         {%- endif -%}
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 7cc52601774..324fd02f053 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -261,7 +261,7 @@
               {% endcase %}
             {%- endfor -%}
             <noscript>
-              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.filter_button' | t }}</button>
+              <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.filter_button' | t }}</button>
             </noscript>
           </div>
           {% comment %} Pills after filtes on filter type horizontal {% endcomment %}
@@ -326,7 +326,7 @@
               </div>
 
               <noscript>
-                <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+                <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
               </noscript>
             </div>
           {%- endif -%}
@@ -353,9 +353,9 @@
     </facet-filters-form>
     {% comment %} Sorting for vertical filter are grouped with filter when no JS{% endcomment %}
     {%- if enable_sorting and filter_type == 'vertical' -%}
-      <facet-filters-form>
-        <form>
-          <div class="facet-filters sorting caption no-js">
+      <facet-filters-form class="small-hide">
+        <form class="no-js">
+          <div class="facet-filters sorting caption">
             <div class="facet-filters__field">
               <h2 class="facet-filters__label caption-large text-body">
                 <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
@@ -372,18 +372,27 @@
             </div>
 
             <noscript>
-              <button type="submit" class="facets__button-no-js button">{{ 'products.facets.sort_button' | t }}</button>
+              <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
             </noscript>
           </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 -%}
         </form>
-      <facet-filters-form>
+      </facet-filters-form>
     {%- endif -%}    
   {%- endif -%}
   {% comment %}  Drawer and mobile filter {% endcomment %}
   <menu-drawer class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}" data-breakpoint="mobile">
     <details class="mobile-facets__disclosure disclosure-has-popup">
       <summary class="mobile-facets__open-wrapper focus-offset">
-        <span class="mobile-facets__open">
+        <span class="mobile-facets__open{% if filter_type == 'drawer' and enable_filtering == false %} medium-hide large-up-hide{% endif %}">
           {% render 'icon-filter' %}
           <span class="mobile-facets__open-label button-label medium-hide large-up-hide">
             {%- if enable_filtering and enable_sorting -%}
@@ -433,127 +442,129 @@
               </div>
             </div>
             <div class="mobile-facets__main has-submenu gradient">
-              {%- for filter in results.filters -%}
-                {% case filter.type %}
-                {% when 'boolean' or 'list' %}
-                  <details id="Details-Mobile-{{ forloop.index }}-{{ section.id }}" 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 id="FacetMobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__submenu gradient">
-                      <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="1.6rem" height="1.6rem" 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="1.1rem" height="0.7rem" 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>
-
-                              
-                              <span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
-                              <span class="visually-hidden">{{ value.label | escape }} ({% if value.count == '1' %}{{ 'products.facets.product_count_simple.one' | t: count: value.count }}{% else %}{{ 'products.facets.product_count_simple.other' | t: count: value.count }}{% endif %})</span>
-                            </label>
-                          </li>
-                        {%- endfor -%}
-                      </ul>
-
-                      <div class="no-js-hidden mobile-facets__footer gradient">
-                        <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 id="Details-Mobile-{{ forloop.index }}-{{ section.id }}" 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>
+              {%- if enable_filtering -%}
+                {%- for filter in results.filters -%}
+                  {% case filter.type %}
+                  {% when 'boolean' or 'list' %}
+                    <details id="Details-Mobile-{{ forloop.index }}-{{ section.id }}" 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 id="FacetMobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__submenu gradient">
+                        <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="1.6rem" height="1.6rem" 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="1.1rem" height="0.7rem" 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>
+
+                                
+                                <span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
+                                <span class="visually-hidden">{{ value.label | escape }} ({% if value.count == '1' %}{{ 'products.facets.product_count_simple.one' | t: count: value.count }}{% else %}{{ 'products.facets.product_count_simple.other' | t: count: value.count }}{% endif %})</span>
+                              </label>
+                            </li>
+                          {%- endfor -%}
+                        </ul>
+
+                        <div class="no-js-hidden mobile-facets__footer gradient">
+                          <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>
-                    </summary>
-                    <div id="FacetMobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__submenu gradient">
-                      <button class="mobile-facets__close-button link link--text focus-inset" aria-expanded="true" type="button">
-                        {% render 'icon-arrow' %}
-                        {{ filter.label | escape }}
-                      </button>
-
-                      {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
-                      <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 %}
-                          >
-                          <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
+                    </details>
+                  {% when 'price_range' %}
+                    <details id="Details-Mobile-{{ forloop.index }}-{{ section.id }}" 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 id="FacetMobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__submenu gradient">
+                        <button class="mobile-facets__close-button link link--text focus-inset" aria-expanded="true" type="button">
+                          {% render 'icon-arrow' %}
+                          {{ filter.label | escape }}
+                        </button>
 
-                        <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 %}
-                          >
-                          <label class="field__label" for="Mobile-Filter-{{ filter.label | escape }}-LTE">{{ 'products.facets.to' | t }}</label>
+                        {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
+                        <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 %}
+                            >
+                            <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 %}
+                            >
+                            <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>
-                      </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 -%}
+                    </details>
+                  {% endcase %}
+                {%- endfor -%}
+              {%- endif -%}
 
               {%- if enable_sorting -%}
                 <div class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}" data-index="mobile-{{ forloop.index }}">
@@ -651,7 +662,7 @@
           </div>
 
           <noscript>
-            <button type="submit" class="facets__button-no-js button">{{ 'products.facets.sort_button' | t }}</button>
+            <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
           </noscript>
         </div>
 
@@ -685,7 +696,7 @@
     </div>
   </div>
   {%- if filter_type == 'drawer' -%}
-    <facet-filters-form class="facets small-hide">
+    <facet-filters-form class="facets facets-pill small-hide">
       <form id="FacetFiltersPillsForm" class="facets__form">
         <div class="active-facets active-facets-desktop">
           {%- for filter in results.filters -%}