diff --git a/assets/component-facets.css b/assets/component-facets.css
index 8b87a67e658..085013fdc2e 100644
--- a/assets/component-facets.css
+++ b/assets/component-facets.css
@@ -199,8 +199,14 @@
 .facets__summary {
   color: rgba(var(--color-foreground), 0.75);
   font-size: 1.4rem;
-  margin-bottom: 1.5rem;
   padding: 0 1.75rem 0 0;
+  margin-bottom: 1.5rem;
+}
+
+.facets__disclosure fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 .facets__disclosure[open] .facets__summary,
@@ -208,7 +214,8 @@
   color: rgb(var(--color-foreground));
 }
 
-.facets__disclosure[open] .facets__display {
+.facets__disclosure[open] .facets__display,
+.facets__disclosure-vertical[open] .facets__display-vertical  {
   animation: animateMenuOpen var(--duration-default) ease;
 }
 
@@ -295,6 +302,10 @@
   -webkit-appearance: none;
 }
 
+.no-js .facet-checkbox input[type='checkbox'] {
+  z-index: 0;
+}
+
 .facet-checkbox > svg {
   background-color: rgb(var(--color-background));
   margin-right: 1.2rem;
@@ -415,7 +426,7 @@ span.active-facets__button-inner:after {
 
   .active-facets__button-wrapper *,
   span.active-facets__button-inner {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
   }
 }
 
@@ -437,6 +448,7 @@ span.active-facets__button-inner:after {
 
   .active-facets__button-wrapper {
     padding-top: 0;
+    margin-left: 1.2rem;
   }
 }
 
@@ -499,6 +511,26 @@ a.active-facets__button.focused .active-facets__button-inner,
   display: none;
 }
 
+.facets-vertical .active-facets .active-facets-vertical-filter:only-child > facet-remove {
+  display: none;
+}
+
+.facets-vertical .active-facets-vertical-filter {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper {
+  padding-top: 0;
+  display: flex;
+  align-items: flex-start;
+}
+
+.facets-vertical .active-facets__button {
+  margin-top: 0;
+}
+
 .active-facets__button.disabled,
 .mobile-facets__clear.disabled {
   pointer-events: none;
@@ -828,6 +860,8 @@ input.mobile-facets__checkbox {
   display: flex;
   z-index: 2;
   margin-top: auto;
+  background-color:rgb(var(--color-background));
+  background: var(--gradient-background);
 }
 
 .mobile-facets__footer > * + * {
@@ -891,7 +925,8 @@ input.mobile-facets__checkbox {
   visibility: hidden;
 }
 
-.product-count .loading-overlay__spinner {
+.product-count .loading-overlay__spinner,
+.product-count-vertical .loading-overlay__spinner  {
   display: none;
   position: absolute;
   right: 0;
@@ -903,3 +938,168 @@ input.mobile-facets__checkbox {
 .product-count__text.loading + .loading-overlay__spinner {
   display: block;
 }
+
+@media screen and (min-width: 750px) {
+  .facets-vertical {
+    display: flex;
+  }
+
+  .facets-wrap-vertical {
+    border: none;
+    padding-left: 0;
+  }
+    
+  .facets__form-vertical {
+    display: flex;
+    flex-direction: column;
+    width: 26rem;
+  }
+
+  .facets__disclosure-vertical {
+    border-top: solid rgba(var(--color-foreground), 0.1);
+    margin-right: 0;
+  }
+  
+  .facets-vertical .facets__summary {
+    padding-top: 1.5rem;
+    margin-bottom: 0;
+    padding-bottom: 1.5rem;
+  }
+  
+  .facets__heading--vertical {
+    margin: 0 0 1.5rem 0;
+    font-size: 1.5rem;
+  }
+
+  .facets__header-vertical {
+    padding: 1.5rem 2rem 1.5rem 0;
+    font-size: 1.4rem;
+  }
+  
+  .facets__display-vertical {
+    padding-bottom: 1.5rem;
+  }
+ 
+  .facets-vertical .facets-wrapper {
+    padding-right: 3rem;
+  }
+
+  .facets-vertical .product-grid-container {
+    width: 100%;
+  }
+
+  .facets-vertical-form {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .product-count-vertical {
+    margin-left: 3.5rem;
+  }
+
+  .facets-vertical .active-facets__button-wrapper {
+    margin-bottom: 2rem;
+  }
+
+  .facets-vertical .no-js .facets__button-no-js {
+    transform: none;
+  }
+
+  .facets-vertical .no-js .facet-filters__field {
+    justify-content: flex-start;
+    padding-bottom: 1rem;
+    padding-top: 2rem;
+  }
+
+  .facets-vertical .facets__price {
+    padding: 0.5rem 0.5rem 0.5rem 0;
+  }
+
+  .facets-vertical .facets__price .field:last-of-type {
+    margin-left: 1rem;
+  }
+
+  .facets-vertical .active-facets__button {
+    margin-bottom: 1.5rem;
+  }
+
+  .facets-vertical .facet-filters.sorting.no-js {
+    padding-left: 0;
+  }
+
+  .facets-vertical .facet-checkbox input[type='checkbox'] {
+    z-index: 0;
+  }
+
+  .no-js .facets-vertical .facets-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .facets-vertical .active-facets facet-remove:last-of-type {
+    margin-bottom: 1rem;
+  }
+
+  .facets-vertical .active-facets {
+    margin: 0;
+    align-items: flex-start;
+  }
+
+  .facets__disclosure-vertical[open] .facets__summary .icon-caret {
+    transform: rotate(180deg);
+  }
+  
+  .facets-container-drawer {
+    display: flex;;
+    flex-flow: row wrap;
+    column-gap: 0;
+  }
+
+  .facets-container-drawer .mobile-facets__wrapper  {
+    margin-right: 2rem;
+  }
+
+  .facets-container-drawer .product-count {
+    align-self: flex-start;
+  }
+
+  .facets-container-drawer .mobile-facets__wrapper {
+    width: calc(40% - 2rem);
+  }
+
+  .facets-container-drawer .facets {
+    width: 40%;
+  }
+
+  .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) {
+  .facets-vertical .active-facets__button {
+    padding: 1rem;
+    margin-bottom: 0;
+    margin-left: -0.5rem;
+  }
+
+  .facets-vertical .active-facets__button-remove {
+    padding: 1rem;
+  }
+}
diff --git a/assets/component-show-more.css b/assets/component-show-more.css
new file mode 100644
index 00000000000..eb207088230
--- /dev/null
+++ b/assets/component-show-more.css
@@ -0,0 +1,11 @@
+
+.button-show-more {
+  padding-left: 0;
+  justify-content: flex-start;
+  padding-bottom: 1.1rem;
+}
+
+.button-show-more, 
+.button-show-less {
+  margin-top: 1.5rem;
+}
diff --git a/assets/facets.js b/assets/facets.js
index e3fc8e82646..eef3ead7f49 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -7,7 +7,8 @@ class FacetFiltersForm extends HTMLElement {
       this.onSubmitHandler(event);
     }, 500);
 
-    this.querySelector('form').addEventListener('input', this.debouncedOnSubmit.bind(this));
+    const facetForm = this.querySelector('form');
+    facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this));
 
     const facetWrapper = this.querySelector('#FacetsWrapperDesktop');
     if (facetWrapper) facetWrapper.addEventListener('keyup', onKeyUpEscape);
@@ -92,7 +93,7 @@ class FacetFiltersForm extends HTMLElement {
     const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
 
     const facetDetailsElements =
-      parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter');
+      parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter');
     const matchesIndex = (element) => {
       const jsFilter = event ? event.target.closest('.js-filter') : undefined;
       return jsFilter ? element.dataset.index === jsFilter.dataset.index : false;
@@ -137,9 +138,16 @@ class FacetFiltersForm extends HTMLElement {
     const targetElement = target.querySelector('.facets__selected');
     const sourceElement = source.querySelector('.facets__selected');
 
+    const targetElementAccessibility = target.querySelector('.facets__summary');
+    const sourceElementAccessibility = source.querySelector('.facets__summary');
+
     if (sourceElement && targetElement) {
       target.querySelector('.facets__selected').outerHTML = source.querySelector('.facets__selected').outerHTML;
     }
+
+    if (targetElementAccessibility && sourceElementAccessibility) {
+      target.querySelector('.facets__summary').outerHTML = source.querySelector('.facets__summary').outerHTML;
+    }
   }
 
   static updateURLHash(searchParams) {
@@ -154,11 +162,36 @@ class FacetFiltersForm extends HTMLElement {
     ]
   }
 
+  createSearchParams(form) {
+    const formData = new FormData(form);
+    return new URLSearchParams(formData).toString();
+  }
+
+  onSubmitForm(searchParams, event) {
+    FacetFiltersForm.renderPage(searchParams, event);
+  }
+
   onSubmitHandler(event) {
     event.preventDefault();
-    const formData = new FormData(event.target.closest('form'));
-    const searchParams = new URLSearchParams(formData).toString();
-    FacetFiltersForm.renderPage(searchParams, event);
+    const sortFilterForms = document.querySelectorAll('facet-filters-form form');
+    if (event.srcElement.className == 'mobile-facets__checkbox') {
+      const searchParams = this.createSearchParams(event.target.closest('form'))
+      this.onSubmitForm(searchParams, event)
+    } else {
+      const forms = [];
+      const isMobile = event.target.closest('form').id === 'FacetFiltersFormMobile';
+
+      sortFilterForms.forEach((form) => {
+        if (!isMobile) {
+          if (form.id === 'FacetSortForm' || form.id === 'FacetFiltersForm' || form.id === 'FacetSortDrawerForm') {
+            forms.push(this.createSearchParams(form));
+          }
+        } else if (form.id === 'FacetFiltersFormMobile') {
+          forms.push(this.createSearchParams(form));
+        }
+      });
+      this.onSubmitForm(forms.join('&'), event)
+    }
   }
 
   onActiveFilterClick(event) {
@@ -180,7 +213,6 @@ class PriceRange extends HTMLElement {
     super();
     this.querySelectorAll('input')
       .forEach(element => element.addEventListener('change', this.onRangeChange.bind(this)));
-
     this.setMinAndMaxValues();
   }
 
@@ -214,12 +246,20 @@ customElements.define('price-range', PriceRange);
 class FacetRemove extends HTMLElement {
   constructor() {
     super();
-    this.querySelector('a').addEventListener('click', (event) => {
+    const facetLink = this.querySelector('a');
+    facetLink.setAttribute('role', 'button');
+    facetLink.addEventListener('click', this.closeFilter.bind(this));
+    facetLink.addEventListener('keyup', (event) => {
       event.preventDefault();
-      const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form');
-      form.onActiveFilterClick(event);
+      if (event.code.toUpperCase() === 'SPACE') this.closeFilter(event);
     });
   }
+
+  closeFilter(event) {
+    event.preventDefault();
+    const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form');
+    form.onActiveFilterClick(event);
+  }
 }
 
 customElements.define('facet-remove', FacetRemove);
diff --git a/assets/global.js b/assets/global.js
index 6c93fcc63bd..f13ced75891 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -8,7 +8,7 @@ function getFocusableElements(container) {
 
 document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
   summary.setAttribute('role', 'button');
-  summary.setAttribute('aria-expanded', 'false');
+  summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open'));
 
   if(summary.nextElementSibling.getAttribute('id')) {
     summary.setAttribute('aria-controls', summary.nextElementSibling.id);
diff --git a/assets/show-more.js b/assets/show-more.js
new file mode 100644
index 00000000000..b6a9f3dbd0b
--- /dev/null
+++ b/assets/show-more.js
@@ -0,0 +1,22 @@
+class ShowMoreButton extends HTMLElement {
+  constructor() {
+    super();
+    const button = this.querySelector('button');
+    button.addEventListener('click', (event) => {
+      this.expandShowMore(event);
+      const nextElementToFocus = event.target.closest('.parent-display').querySelector('.show-more-item')
+      if (nextElementToFocus && !nextElementToFocus.classList.contains('hidden')) {
+        nextElementToFocus.querySelector('input').focus()
+      }
+    });
+  }
+  expandShowMore(event) {
+    const parentDisplay = event.target.closest('[id^="Show-More-"]').closest('.parent-display');
+    const parentWrap = parentDisplay.querySelector('.parent-wrap');
+    this.querySelectorAll('.label-text').forEach(element => element.classList.toggle('hidden'));
+    parentDisplay.querySelectorAll('.show-more-item').forEach(item => item.classList.toggle('hidden'))
+  }
+}
+
+customElements.define('show-more-button', ShowMoreButton);
+
diff --git a/locales/bg-BG.json b/locales/bg-BG.json
index 7a8e0c9c28c..8c11e965fa9 100644
--- a/locales/bg-BG.json
+++ b/locales/bg-BG.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Приложи",
       "clear": "Изчисти",
-      "clear_all": "Изчисти всички",
+      "clear_all": "Премахване на всички",
       "from": "От",
       "filter_and_sort": "Филтриране и сортиране",
       "filter_by_label": "Филтър:",
@@ -178,7 +178,10 @@
       "sort_button": "Сортиране",
       "sort_by_label": "Сортиране по:",
       "to": "Към",
-      "clear_filter": "Изчисти филтъра"
+      "clear_filter": "Премахване на филтъра",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} избрани филтъра)",
+      "show_more": "Покажи повече",
+      "show_less": "Покажи по-малко"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Колекция",
       "empty": "Не са открити продукти",
-      "use_fewer_filters_html": "Използвайте по-малко филтри или <a class=\"{{ class }}\" href=\"{{ link }}\">изчистете всички</a>"
+      "use_fewer_filters_html": "Използвайте по-малко филтри или <a class=\"{{ class }}\" href=\"{{ link }}\">премахнете всички</a>"
     },
     "video": {
       "load_video": "Зареждане на видео: {{ description }}"
diff --git a/locales/cs.json b/locales/cs.json
index 9994f4bce5e..f34f19fb27e 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -158,7 +158,7 @@
     "facets": {
       "apply": "Použít",
       "clear": "Vymazat",
-      "clear_all": "Vymazat vše",
+      "clear_all": "Odebrat vše",
       "from": "Od",
       "filter_and_sort": "Filtrování a řazení",
       "filter_by_label": "Filtrovat:",
@@ -186,7 +186,10 @@
         "few": "Počet produktů: {{ count }}",
         "many": "Počet produktů: {{ count }}"
       },
-      "clear_filter": "Vymazat filtr"
+      "clear_filter": "Odebrat filtr",
+      "filter_selected_accessibility": "{{ type }} (počet vybraných filtrů: {{ count }})",
+      "show_more": "Zobrazit více",
+      "show_less": "Zobrazit méně"
     }
   },
   "templates": {
@@ -285,7 +288,7 @@
     "collection_template": {
       "title": "Kolekce",
       "empty": "Nenalezeny žádné produkty",
-      "use_fewer_filters_html": "Můžete použít méně filtrů nebo <a class=\"{{ class }}\" href=\"{{ link }}\">vymazat vše</a>."
+      "use_fewer_filters_html": "Můžete použít méně filtrů nebo <a class=\"{{ class }}\" href=\"{{ link }}\">všechny odebrat</a>"
     },
     "video": {
       "load_video": "Načíst video: {{ description }}"
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index dd3b1ab9e85..30ebd3d3d08 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -1297,6 +1297,19 @@
         "enable_quick_buy": {
           "label": "Povolit tlačítko Rychlé přidání",
           "info": "Je optimální pro košík typu vyskakovací okno nebo výsuvný košík."
+        },
+        "filter_type": {
+          "label": "Rozvržení filtru v počítači",
+          "options__1": {
+            "label": "Vodorovně"
+          },
+          "options__2": {
+            "label": "Svisle"
+          },
+          "options__3": {
+            "label": "Výsuvný panel"
+          },
+          "info": "Výchozí mobilní rozvržení představuje výsuvný panel."
         }
       }
     },
diff --git a/locales/da.json b/locales/da.json
index a7fdbd3ffe6..22aef54c692 100644
--- a/locales/da.json
+++ b/locales/da.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Anvend",
       "clear": "Ryd",
-      "clear_all": "Ryd alt",
+      "clear_all": "Fjern alle",
       "from": "Fra",
       "filter_and_sort": "Filtrer og sortér",
       "filter_by_label": "Filter:",
@@ -178,7 +178,10 @@
       "sort_button": "Sortér",
       "sort_by_label": "Sortér efter:",
       "to": "Til",
-      "clear_filter": "Ryd filter"
+      "clear_filter": "Fjern filter",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtre er valgt)",
+      "show_more": "Vis mere",
+      "show_less": "Vis mindre"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Kollektion",
       "empty": "Der blev ikke fundet nogen produkter",
-      "use_fewer_filters_html": "Brug færre filtre, eller <a class=\"{{ class }}\" href=\"{{ link }}\">ryd alt</a>"
+      "use_fewer_filters_html": "Brug færre filtre, eller <a class=\"{{ class }}\" href=\"{{ link }}\">fjern alle</a>"
     },
     "video": {
       "load_video": "Indlæs video: {{ description }}"
diff --git a/locales/da.schema.json b/locales/da.schema.json
index 73104d66058..e631ef65a32 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 kolonner"
           }
+        },
+        "filter_type": {
+          "label": "Layout til computerfilter",
+          "options__1": {
+            "label": "Vandret"
+          },
+          "options__2": {
+            "label": "Lodret"
+          },
+          "options__3": {
+            "label": "Skuffe"
+          },
+          "info": "Skuffe er standardlayoutet til mobil."
         }
       }
     },
diff --git a/locales/de.json b/locales/de.json
index c7a38b9f044..19449759f52 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Anwenden",
       "clear": "Löschen",
-      "clear_all": "Alles löschen",
+      "clear_all": "Alle entfernen",
       "from": "Von",
       "filter_and_sort": "Filtern und sortieren",
       "filter_by_label": "Filter:",
@@ -178,7 +178,10 @@
       "sort_button": "Sortieren",
       "sort_by_label": "Sortieren nach:",
       "to": "Bis",
-      "clear_filter": "Filter löschen"
+      "clear_filter": "Filter entfernen",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} Filter ausgewählt)",
+      "show_more": "Mehr anzeigen",
+      "show_less": "Weniger anzeigen"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Kategorie",
       "empty": "Keine Produkte gefunden",
-      "use_fewer_filters_html": "Verwende weniger Filter oder <a class=\"{{ class }}\" href=\"{{ link }}\">lösche alle</a>"
+      "use_fewer_filters_html": "Verwende weniger Filter oder <a class=\"{{ class }}\" href=\"{{ link }}\">entferne alle</a>"
     },
     "video": {
       "load_video": "Video laden: {{ description }}"
diff --git a/locales/de.schema.json b/locales/de.schema.json
index c53a1bb61a6..b864a9fdf55 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 Spalten"
           }
+        },
+        "filter_type": {
+          "label": "Desktopfilterlayout",
+          "options__1": {
+            "label": "Horizontal"
+          },
+          "options__2": {
+            "label": "Vertikal"
+          },
+          "options__3": {
+            "label": "Einschub"
+          },
+          "info": "Das Standardlayout für Mobilgeräte ist \"Einschub\"."
         }
       }
     },
diff --git a/locales/el.json b/locales/el.json
index edf53c5bad5..2c34a8cdc60 100644
--- a/locales/el.json
+++ b/locales/el.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Εφαρμογή",
       "clear": "Διαγραφή",
-      "clear_all": "Διαγραφή όλων",
+      "clear_all": "Κατάργηση όλων",
       "from": "Από",
       "filter_and_sort": "Φιλτράρισμα και ταξινόμηση",
       "filter_by_label": "Φιλτράρισμα:",
@@ -178,7 +178,10 @@
       "sort_button": "Ταξινόμηση",
       "sort_by_label": "Ταξινόμηση κατά:",
       "to": "Έως",
-      "clear_filter": "Διαγραφή φίλτρου"
+      "clear_filter": "Κατάργηση φίλτρου",
+      "filter_selected_accessibility": "{{ type }} (επιλέχθηκαν {{ count }} φίλτρα)",
+      "show_more": "Εμφάνιση περισσότερων",
+      "show_less": "Εμφάνιση λιγότερων"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Συλλογή",
       "empty": "Δεν βρέθηκαν προϊόντα",
-      "use_fewer_filters_html": "Χρησιμοποιήστε λιγότερα φίλτρα ή <a class=\"{{ class }}\" href=\"{{ link }}\">διαγράψτε τα όλα</a>"
+      "use_fewer_filters_html": "Χρησιμοποιήστε λιγότερα φίλτρα ή <a class=\"{{ class }}\" href=\"{{ link }}\">καταργήστε τα όλα</a>"
     },
     "video": {
       "load_video": "Φόρτωση βίντεο: {{ description }}"
diff --git a/locales/en.default.json b/locales/en.default.json
index 67938167bcb..53e0cf0f2e0 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Apply",
       "clear": "Clear",
-      "clear_all": "Clear all",
+      "clear_all": "Remove all",
       "from": "From",
       "filter_and_sort": "Filter and sort",
       "filter_by_label": "Filter:",
@@ -165,6 +165,9 @@
         "one": "{{ count }} selected",
         "other": "{{ count }} selected"
       },
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filters selected)",
+      "show_more": "Show more",
+      "show_less": "Show less",
       "max_price": "The highest price is {{ price }}",
       "product_count": {
         "one": "{{ product_count }} of {{ count }} product",
@@ -178,7 +181,7 @@
       "sort_button": "Sort",
       "sort_by_label": "Sort by:",
       "to": "To",
-      "clear_filter": "Clear filter"
+      "clear_filter": "Remove filter"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "empty": "No products found",
       "title": "Collection",
-      "use_fewer_filters_html": "Use fewer filters or <a class=\"{{ class }}\" href=\"{{ link }}\">clear all</a>"
+      "use_fewer_filters_html": "Use fewer filters or <a class=\"{{ class }}\" href=\"{{ link }}\">remove all</a>"
     },
     "video": {
       "load_video": "Load video: {{ description }}"
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index f34e1e94812..9b61b527d3e 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -1366,6 +1366,19 @@
           "label": "Enable filtering",
           "info": "Customize [filters](/admin/menus)"
         },
+        "filter_type": {
+          "label": "Desktop filter layout",
+          "options__1": {
+            "label": "Horizontal"
+          },
+          "options__2": {
+            "label": "Vertical"
+          },
+          "options__3": {
+            "label": "Drawer"
+          },
+          "info": "Drawer is the default mobile layout."
+        },
         "enable_sorting": {
           "label": "Enable sorting"
         },
diff --git a/locales/es.json b/locales/es.json
index 502e8678ac6..40af7af5d22 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Aplicar",
       "clear": "Borrar",
-      "clear_all": "Borrar todo",
+      "clear_all": "Eliminar todos",
       "from": "De",
       "filter_and_sort": "Filtrar y ordenar",
       "filter_by_label": "Filtrar:",
@@ -178,7 +178,10 @@
       "sort_button": "Ordenar",
       "sort_by_label": "Ordenar por:",
       "to": "Para",
-      "clear_filter": "Borrar filtro"
+      "clear_filter": "Eliminar filtro",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtros seleccionados)",
+      "show_more": "Mostrar más",
+      "show_less": "Mostrar menos"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Colección",
       "empty": "No se encontró ningún producto",
-      "use_fewer_filters_html": "Usa menos filtros o <a class=\"{{ class }}\" href=\"{{ link }}\">borra todo</a>"
+      "use_fewer_filters_html": "Usa menos filtros o <a class=\"{{ class }}\" href=\"{{ link }}\">elimínalos todos</a>"
     },
     "video": {
       "load_video": "Cargar video: {{ description }}"
diff --git a/locales/es.schema.json b/locales/es.schema.json
index 6479f95d2eb..0c795686bff 100644
--- a/locales/es.schema.json
+++ b/locales/es.schema.json
@@ -1297,6 +1297,19 @@
         "enable_quick_buy": {
           "label": "Activar botón de agregado rápido",
           "info": "Funciona de manera óptima con ventanas emergentes o carritos laterales."
+        },
+        "filter_type": {
+          "label": "Filtro de diseño para computadora",
+          "options__1": {
+            "label": "Horizontal"
+          },
+          "options__2": {
+            "label": "Vertical"
+          },
+          "options__3": {
+            "label": "Cajón"
+          },
+          "info": "El cajón es el diseño para móviles predeterminado."
         }
       }
     },
diff --git a/locales/fi.json b/locales/fi.json
index 4e7a1362bc3..0416ef05d0c 100644
--- a/locales/fi.json
+++ b/locales/fi.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Käytä",
       "clear": "Tyhjennä",
-      "clear_all": "Tyhjennä kaikki",
+      "clear_all": "Poista kaikki",
       "from": "Alkaen",
       "filter_and_sort": "Suodatus ja lajittelu",
       "filter_by_label": "Suodatin:",
@@ -178,7 +178,10 @@
       "sort_button": "Lajittele",
       "sort_by_label": "Lajittelu:",
       "to": "Asti",
-      "clear_filter": "Tyhjennä suodatin"
+      "clear_filter": "Poista suodatin",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} suodatinta valittu)",
+      "show_more": "Näytä enemmän",
+      "show_less": "Näytä vähemmän"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Kokoelma",
       "empty": "Tuotteita ei löytynyt",
-      "use_fewer_filters_html": "Käytä vähemmän suodattimia tai <a class=\"{{ class }}\" href=\"{{ link }}\">tyhjennä kaikki</a>"
+      "use_fewer_filters_html": "Käytä vähemmän suodattimia tai <a class=\"{{ class }}\" href=\"{{ link }}\">poista kaikki</a>"
     },
     "video": {
       "load_video": "Lataa video: {{ description }}"
diff --git a/locales/fi.schema.json b/locales/fi.schema.json
index b9af4c0ecad..893f193894e 100644
--- a/locales/fi.schema.json
+++ b/locales/fi.schema.json
@@ -1297,6 +1297,19 @@
         "enable_quick_buy": {
           "label": "Ota pikalisäyspainike käyttöön",
           "info": "Ihanteellinen ponnahdusikkuna- tai laatikkotyyppisten ostokorien kanssa."
+        },
+        "filter_type": {
+          "label": "Suodatinasettelu tietokoneella",
+          "options__1": {
+            "label": "Vaaka"
+          },
+          "options__2": {
+            "label": "Pysty"
+          },
+          "options__3": {
+            "label": "Laatikko"
+          },
+          "info": "Laatikko on oletusarvoinen asettelu mobiilissa."
         }
       }
     },
diff --git a/locales/fr.json b/locales/fr.json
index e286553a9a0..2f1215ab46c 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Appliquer",
       "clear": "Effacer",
-      "clear_all": "Tout effacer",
+      "clear_all": "Tout supprimer",
       "from": "De",
       "filter_and_sort": "Filtrer et trier",
       "filter_by_label": "Filtre :",
@@ -178,7 +178,10 @@
       "sort_button": "Trier",
       "sort_by_label": "Trier par :",
       "to": "À",
-      "clear_filter": "Effacer le filtre"
+      "clear_filter": "Supprimer le filtre",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtres sélectionnés)",
+      "show_more": "Afficher plus",
+      "show_less": "Afficher moins"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Collection",
       "empty": "Aucun produit trouvé",
-      "use_fewer_filters_html": "Utiliser moins de filtres ou <a class=\"{{ class }}\" href=\"{{ link }}\">tout effacer</a>"
+      "use_fewer_filters_html": "Utiliser moins de filtres ou <a class=\"{{ class }}\" href=\"{{ link }}\">tout supprimer</a>"
     },
     "video": {
       "load_video": "Charger la vidéo : {{ description }}"
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index 1f22a103ff6..7aaa48b374a 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 colonnes"
           }
+        },
+        "filter_type": {
+          "label": "Mise en page des filtres sur ordinateur",
+          "options__1": {
+            "label": "Horizontale"
+          },
+          "options__2": {
+            "label": "Verticale"
+          },
+          "options__3": {
+            "label": "Tiroir"
+          },
+          "info": "Le tiroir correspond à la mise en page par défaut sur les appareils mobiles."
         }
       }
     },
diff --git a/locales/hr-HR.json b/locales/hr-HR.json
index bdf2df6ed3c..b093e8bc004 100644
--- a/locales/hr-HR.json
+++ b/locales/hr-HR.json
@@ -157,7 +157,7 @@
     "facets": {
       "apply": "Primijeni",
       "clear": "Očisti",
-      "clear_all": "Očisti sve",
+      "clear_all": "Ukloni sve",
       "from": "Od",
       "filter_and_sort": "Filtriraj i razvrstaj",
       "filter_by_label": "Filtriraj:",
@@ -182,7 +182,10 @@
         "other": "Broj proizvoda: {{ count }}",
         "few": "Broj proizvoda: {{ count }}"
       },
-      "clear_filter": "Očisti filtar"
+      "clear_filter": "Ukloni filtar",
+      "filter_selected_accessibility": "{{ type }} (broj odabranih filtra: {{ count }})",
+      "show_more": "Prikaži više",
+      "show_less": "Prikaži manje"
     }
   },
   "templates": {
@@ -278,7 +281,7 @@
     "collection_template": {
       "title": "Kolekcija",
       "empty": "Nije pronađen nijedan proizvod",
-      "use_fewer_filters_html": "Upotrijebite manje filtara ili <a class=\"{{ class }}\" href=\"{{ link }}\">očistite sve</a>"
+      "use_fewer_filters_html": "Upotrijebi manje filtara ili <a class=\"{{ class }}\" href=\"{{ link }}\">ukloni sve</a>"
     },
     "video": {
       "load_video": "Učitaj videozapis: {{ description }}"
diff --git a/locales/hu.json b/locales/hu.json
index 2b7db288f21..c9db46ad2ec 100644
--- a/locales/hu.json
+++ b/locales/hu.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Alkalmaz",
       "clear": "Törlés",
-      "clear_all": "Az összes törlése",
+      "clear_all": "Az összes eltávolítása",
       "from": "Ettől:",
       "filter_and_sort": "Szűrés és rendezés",
       "filter_by_label": "Szűrés:",
@@ -178,7 +178,10 @@
       "sort_button": "Rendezés",
       "sort_by_label": "Rendezési szempont:",
       "to": "Eddig:",
-      "clear_filter": "Szűrő kikapcsolása"
+      "clear_filter": "Szűrő eltávolítása",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} szűrő kiválasztva)",
+      "show_more": "Több részlet",
+      "show_less": "Kevesebb részlet"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Kollekció",
       "empty": "Nincs találat",
-      "use_fewer_filters_html": "Használj kevesebb szűrőt, vagy <a class=\"{{ class }}\" href=\"{{ link }}\">töröld az összeset</a>."
+      "use_fewer_filters_html": "Használj kevesebb szűrőt, vagy <a class=\"{{ class }}\" href=\"{{ link }}\">távolítsd el az összeset</a>."
     },
     "video": {
       "load_video": "Videó betöltése: {{ description }}"
diff --git a/locales/id.json b/locales/id.json
index bf35d615623..72706e30578 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -178,7 +178,10 @@
       "sort_button": "Urutkan",
       "sort_by_label": "Urutkan berdasarkan:",
       "to": "Sampai",
-      "clear_filter": "Hapus filter"
+      "clear_filter": "Hapus filter",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filter dipilih)",
+      "show_more": "Selengkapnya",
+      "show_less": "Sembunyikan lainnya"
     }
   },
   "templates": {
diff --git a/locales/it.json b/locales/it.json
index 8115b9b3ca5..bd5c340146a 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Applica",
       "clear": "Cancella",
-      "clear_all": "Cancella tutto",
+      "clear_all": "Rimuovi tutto",
       "from": "Da",
       "filter_and_sort": "Filtra e ordina",
       "filter_by_label": "Filtra:",
@@ -178,7 +178,10 @@
       "sort_button": "Ordina",
       "sort_by_label": "Ordina per:",
       "to": "A",
-      "clear_filter": "Rimuovi filtro"
+      "clear_filter": "Rimuovi filtri",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtri selezionati)",
+      "show_more": "Mostra di più",
+      "show_less": "Mostra di meno"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Collezione",
       "empty": "Nessun prodotto trovato",
-      "use_fewer_filters_html": "Utilizza meno filtri o <a class=\"{{ class }}\" href=\"{{ link }}\">cancella tutto</a>"
+      "use_fewer_filters_html": "Utilizza meno filtri o <a class=\"{{ class }}\" href=\"{{ link }}\">rimuovi tutto</a>"
     },
     "video": {
       "load_video": "Carica il video: {{ description }}"
diff --git a/locales/it.schema.json b/locales/it.schema.json
index cbca11138cc..00bcecbdc2a 100644
--- a/locales/it.schema.json
+++ b/locales/it.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 colonne"
           }
+        },
+        "filter_type": {
+          "label": "Layout dei filtri desktop",
+          "options__1": {
+            "label": "Orizzontale"
+          },
+          "options__2": {
+            "label": "Verticale"
+          },
+          "options__3": {
+            "label": "Finestra"
+          },
+          "info": "Il layout predefinito per dispositivi mobili prevede la finestra."
         }
       }
     },
diff --git a/locales/ja.json b/locales/ja.json
index 2aa510fef59..0ae857bbb2c 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "適用",
       "clear": "クリア",
-      "clear_all": "すべてクリア",
+      "clear_all": "すべてを削除する",
       "from": "差出人",
       "filter_and_sort": "絞り込みと並び替え",
       "filter_by_label": "絞り込み:",
@@ -178,7 +178,10 @@
       "sort_button": "並び替え",
       "sort_by_label": "並び替え: ",
       "to": "受取人",
-      "clear_filter": "絞り込みをクリア"
+      "clear_filter": "絞り込みを削除する",
+      "filter_selected_accessibility": "{{ type }} ({{ count }}件のフィルターを選択済み)",
+      "show_more": "さらに表示する",
+      "show_less": "表示を減らす"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "コレクション",
       "empty": "商品が見つかりません",
-      "use_fewer_filters_html": "絞り込みの数を減らす、または<a class=\"{{ class }}\" href=\"{{ link }}\">すべてクリア</a>"
+      "use_fewer_filters_html": "絞り込みの数を減らす、または<a class=\"{{ class }}\" href=\"{{ link }}\">すべて削除する</a>"
     },
     "video": {
       "load_video": "動画を読み込む: {{ description }}"
diff --git a/locales/ja.schema.json b/locales/ja.schema.json
index 9977df1e89f..3966593e56d 100644
--- a/locales/ja.schema.json
+++ b/locales/ja.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2列"
           }
+        },
+        "filter_type": {
+          "label": "デスクトップの絞り込みレイアウト",
+          "options__1": {
+            "label": "水平"
+          },
+          "options__2": {
+            "label": "垂直"
+          },
+          "options__3": {
+            "label": "ドロワー"
+          },
+          "info": "ドロワーはデフォルトのモバイルレイアウトです。"
         }
       }
     },
diff --git a/locales/ko.json b/locales/ko.json
index e3fc98817f9..99f2a70dc65 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "적용",
       "clear": "지우기",
-      "clear_all": "모두 지우기",
+      "clear_all": "모두 제거",
       "from": "최저가",
       "filter_and_sort": "필터 및 정렬",
       "filter_by_label": "필터:",
@@ -178,7 +178,10 @@
       "sort_button": "정렬",
       "sort_by_label": "정렬 기준:",
       "to": "최고가",
-      "clear_filter": "필터 지우기"
+      "clear_filter": "필터 제거",
+      "filter_selected_accessibility": "{{ type }}({{ count }}개 필터 선택됨)",
+      "show_more": "자세히 표시",
+      "show_less": "간단히 표시"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "컬렉션",
       "empty": "제품을 찾을 수 없음",
-      "use_fewer_filters_html": "더 적은 수의 필터를 사용하거나 <a class=\"{{ class }}\" href=\"{{ link }}\">모두 지우기</a>"
+      "use_fewer_filters_html": "더 적은 수의 필터를 사용하거나 <a class=\"{{ class }}\" href=\"{{ link }}\">모두 제거하기</a>"
     },
     "video": {
       "load_video": "동영상 로드: {{ description }}"
diff --git a/locales/ko.schema.json b/locales/ko.schema.json
index 3f3e5623211..983d8c7cc05 100644
--- a/locales/ko.schema.json
+++ b/locales/ko.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "열 2개"
           }
+        },
+        "filter_type": {
+          "label": "데스크톱 필터 레이아웃",
+          "options__1": {
+            "label": "수평"
+          },
+          "options__2": {
+            "label": "수직"
+          },
+          "options__3": {
+            "label": "펼침 메뉴"
+          },
+          "info": "펼침 메뉴는 모바일용 기본 레이아웃입니다."
         }
       }
     },
diff --git a/locales/lt-LT.json b/locales/lt-LT.json
index 629cff799b7..5f71cc7e794 100644
--- a/locales/lt-LT.json
+++ b/locales/lt-LT.json
@@ -158,7 +158,7 @@
     "facets": {
       "apply": "Taikyti",
       "clear": "Išvalyti",
-      "clear_all": "Išvalyti viską",
+      "clear_all": "Pašalinti viską",
       "from": "Nuo",
       "filter_and_sort": "Filtruoti ir rūšiuoti",
       "filter_by_label": "Filtruoti:",
@@ -186,7 +186,10 @@
         "few": "{{ count }} gaminiai (-ių)",
         "many": "{{ count }} gaminiai (-ių)"
       },
-      "clear_filter": "Išvalyti filtrą"
+      "clear_filter": "Pašalinti filtrą",
+      "filter_selected_accessibility": "{{ type }} (pasirinkta filtrų: {{ count }})",
+      "show_more": "Rodyti daugiau",
+      "show_less": "Rodyti mažiau"
     }
   },
   "templates": {
@@ -285,7 +288,7 @@
     "collection_template": {
       "title": "Kolekcija",
       "empty": "Nerasta jokių gaminių",
-      "use_fewer_filters_html": "Naudoti mažiau filtrų arba <a class=\"{{ class }}\" href=\"{{ link }}\">išvalyti viską</a>"
+      "use_fewer_filters_html": "Naudoti mažiau filtrų arba <a class=\"{{ class }}\" href=\"{{ link }}\">pašalinti viską</a>"
     },
     "video": {
       "load_video": "Įkelti vaizdo įrašą „{{ description }}“"
diff --git a/locales/nb.json b/locales/nb.json
index c533f85321f..372ae3334e6 100644
--- a/locales/nb.json
+++ b/locales/nb.json
@@ -178,7 +178,10 @@
       "sort_button": "Sorter",
       "sort_by_label": "Sorter etter:",
       "to": "Til",
-      "clear_filter": "Fjern filter"
+      "clear_filter": "Fjern filter",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtre valgt)",
+      "show_more": "Vis mer",
+      "show_less": "Vis færre"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Samling",
       "empty": "Ingen produkter funnet",
-      "use_fewer_filters_html": "Bruk færre filtre eller <a class=\"{{ class }}\" href=\"{{ link }}\">tøm alle</a>"
+      "use_fewer_filters_html": "Bruk færre filtre eller <a class=\"{{ class }}\" href=\"{{ link }}\">fjern alle</a>"
     },
     "video": {
       "load_video": "Last inn video: {{ description }}"
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index 80c9cd48b6d..cc5502fd93d 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -1297,6 +1297,19 @@
         "enable_quick_buy": {
           "label": "Aktiver knapp for hurtigtillegging",
           "info": "Optimal med popup- eller handlekurvskuff-typen."
+        },
+        "filter_type": {
+          "label": "Filtreringsoppsett på datamaskin",
+          "options__1": {
+            "label": "Horisontalt"
+          },
+          "options__2": {
+            "label": "Vertikalt"
+          },
+          "options__3": {
+            "label": "Skuff"
+          },
+          "info": "Skuff er standardoppsett for mobil."
         }
       }
     },
diff --git a/locales/nl.json b/locales/nl.json
index 59540fc40a1..fa1c97177da 100644
--- a/locales/nl.json
+++ b/locales/nl.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Toepassen",
       "clear": "Wissen",
-      "clear_all": "Alles wissen",
+      "clear_all": "Alles verwijderen",
       "from": "Van",
       "filter_and_sort": "Filteren en sorteren",
       "filter_by_label": "Filter:",
@@ -178,7 +178,10 @@
       "sort_button": "Sorteren",
       "sort_by_label": "Sorteer op:",
       "to": "Aan",
-      "clear_filter": "Filters wissen"
+      "clear_filter": "Filter verwijderen",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filters geselecteerd)",
+      "show_more": "Meer weergeven",
+      "show_less": "Minder weergeven"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Collectie",
       "empty": "Geen producten gevonden",
-      "use_fewer_filters_html": "Minder filters gebruiken of <a class=\"{{ class }}\" href=\"{{ link }}\">alles wissen</a>"
+      "use_fewer_filters_html": "Minder filters gebruiken of <a class=\"{{ class }}\" href=\"{{ link }}\">alles verwijderen</a>"
     },
     "video": {
       "load_video": "Video laden: {{ description }}"
diff --git a/locales/nl.schema.json b/locales/nl.schema.json
index dd93720675f..52006bd4596 100644
--- a/locales/nl.schema.json
+++ b/locales/nl.schema.json
@@ -1297,6 +1297,19 @@
         "enable_quick_buy": {
           "label": "Knop 'Snel toevoegen' inschakelen",
           "info": "Optimaal met een pop-up of een winkelwagentype."
+        },
+        "filter_type": {
+          "label": "Opmaak voor desktopfilter",
+          "options__1": {
+            "label": "Horizontaal"
+          },
+          "options__2": {
+            "label": "Verticaal"
+          },
+          "options__3": {
+            "label": "Lade"
+          },
+          "info": "Lade is de standaardopmaak voor mobiele apparaten"
         }
       }
     },
diff --git a/locales/pl.json b/locales/pl.json
index 7133c971f02..18a72984bdb 100644
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -158,7 +158,7 @@
     "facets": {
       "apply": "Zastosuj",
       "clear": "Wyczyść",
-      "clear_all": "Wyczyść wszystko",
+      "clear_all": "Usuń wszystko",
       "from": "Od",
       "filter_and_sort": "Filtrowanie i sortowanie",
       "filter_by_label": "Filtr:",
@@ -186,7 +186,10 @@
         "few": "{{ count }} produkty(-ów)",
         "many": "{{ count }} produkty(-ów)"
       },
-      "clear_filter": "Wyczyść filtr"
+      "clear_filter": "Usuń filtr",
+      "filter_selected_accessibility": "{{ type }} (wybrano {{ count }} fitry(-ów))",
+      "show_more": "Pokaż więcej",
+      "show_less": "Pokaż mniej"
     }
   },
   "templates": {
@@ -285,7 +288,7 @@
     "collection_template": {
       "title": "Kolekcja",
       "empty": "Nie znaleziono produktów",
-      "use_fewer_filters_html": "Użyj mniejszej ilości filtrów lub <a class=\"{{ class }}\" href=\"{{ link }}\">Wyczyść wszystko</a>"
+      "use_fewer_filters_html": "Użyj mniejszej ilości filtrów lub <a class=\"{{ class }}\" href=\"{{ link }}\">usuń wszystko</a>"
     },
     "video": {
       "load_video": "Załaduj film: {{ description }}"
diff --git a/locales/pl.schema.json b/locales/pl.schema.json
index 11a9e199216..a6f4da7ba0a 100644
--- a/locales/pl.schema.json
+++ b/locales/pl.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 kolumny"
           }
+        },
+        "filter_type": {
+          "label": "Układ filtrów na komputerze",
+          "options__1": {
+            "label": "W poziomie"
+          },
+          "options__2": {
+            "label": "W pionie"
+          },
+          "options__3": {
+            "label": "Szuflada"
+          },
+          "info": "Szuflada odpowiada domyślnemu układowi na urządzeniach mobilnych."
         }
       }
     },
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index d6584f2952c..968e235ae36 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Aplicar",
       "clear": "Limpar",
-      "clear_all": "Limpar tudo",
+      "clear_all": "Remover tudo",
       "from": "De",
       "filter_and_sort": "Filtrar e organizar",
       "filter_by_label": "Filtrar:",
@@ -178,7 +178,10 @@
       "sort_button": "Organizar",
       "sort_by_label": "Ordenar por:",
       "to": "Para",
-      "clear_filter": "Limpar filtro"
+      "clear_filter": "Remover filtro",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtros selecionados)",
+      "show_more": "Exibir mais",
+      "show_less": "Exibir menos"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Coleção",
       "empty": "Nenhum produto encontrado",
-      "use_fewer_filters_html": "Usar menos filtros ou <a class=\"{{ class }}\" href=\"{{ link }}\">limpar tudo</a>"
+      "use_fewer_filters_html": "Usar menos filtros ou <a class=\"{{ class }}\" href=\"{{ link }}\">remover tudo</a>"
     },
     "video": {
       "load_video": "Carregar vídeo: {{ description }}"
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index 66b0874ef2d..032d5f72525 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 colunas"
           }
+        },
+        "filter_type": {
+          "label": "Layout de filtro para desktop",
+          "options__1": {
+            "label": "Horizontal"
+          },
+          "options__2": {
+            "label": "Vertical"
+          },
+          "options__3": {
+            "label": "Menu deslizante"
+          },
+          "info": "O menu deslizante é o layout-padrão para dispositivo móvel."
         }
       }
     },
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index 7c3a7b8ec04..f52e682471b 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Aplicar",
       "clear": "Limpar",
-      "clear_all": "Limpar tudo",
+      "clear_all": "Remover tudo",
       "from": "De",
       "filter_and_sort": "Filtrar e ordenar",
       "filter_by_label": "Filtrar:",
@@ -178,7 +178,10 @@
       "sort_button": "Ordenar",
       "sort_by_label": "Ordenar por:",
       "to": "Para",
-      "clear_filter": "Limpar filtro"
+      "clear_filter": "Remover filtro",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtros selecionados)",
+      "show_more": "Mostrar mais",
+      "show_less": "Mostrar menos"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Coleção",
       "empty": "Nenhum produto encontrado",
-      "use_fewer_filters_html": "Usar menos filtros ou <a class=\"{{ class }}\" href=\"{{ link }}\">limpar tudo</a>"
+      "use_fewer_filters_html": "Utilizar menos filtros ou <a class=\"{{ class }}\" href=\"{{ link }}\">remover tudo</a>"
     },
     "video": {
       "load_video": "Carregar vídeo: {{ description }}"
diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
index 667645420bd..b33c17ae95a 100644
--- a/locales/pt-PT.schema.json
+++ b/locales/pt-PT.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 colunas"
           }
+        },
+        "filter_type": {
+          "label": "Esquema de filtro para desktop",
+          "options__1": {
+            "label": "Horizontal"
+          },
+          "options__2": {
+            "label": "Vertical"
+          },
+          "options__3": {
+            "label": "Gaveta"
+          },
+          "info": "A gaveta é o esquema padrão para dispositivos móveis."
         }
       }
     },
diff --git a/locales/ro-RO.json b/locales/ro-RO.json
index 0a3ea2d302a..01c6ba60a84 100644
--- a/locales/ro-RO.json
+++ b/locales/ro-RO.json
@@ -157,7 +157,7 @@
     "facets": {
       "apply": "Aplică",
       "clear": "Golește",
-      "clear_all": "Golește tot",
+      "clear_all": "Elimină tot",
       "from": "De la",
       "filter_and_sort": "Filtrează și sortează",
       "filter_by_label": "Filtrează:",
@@ -182,7 +182,10 @@
         "other": "{{ count }} produse",
         "few": "{{ count }} produse"
       },
-      "clear_filter": "Elimină filtrul"
+      "clear_filter": "Elimină filtrul",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtre selectate)",
+      "show_more": "Afișează mai mult",
+      "show_less": "Afișează mai puțin"
     }
   },
   "templates": {
@@ -278,7 +281,7 @@
     "collection_template": {
       "title": "Colecție",
       "empty": "Nu s-au găsit produse",
-      "use_fewer_filters_html": "Utilizați mai puține filtre sau <a class=\"{{ class }}\" href=\"{{ link }}\">goliți tot</a>"
+      "use_fewer_filters_html": "Folosește mai puține filtre sau <a class=\"{{ class }}\" href=\"{{ link }}\">elimină-le pe toate</a>"
     },
     "video": {
       "load_video": "Încarcă clipul video: {{ description }}"
diff --git a/locales/ru.json b/locales/ru.json
index c92ef7ea250..c9c0151fc88 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -186,7 +186,10 @@
         "few": "Продуктов: {{ count }}",
         "many": "Продуктов: {{ count }}"
       },
-      "clear_filter": "Удалить фильтр"
+      "clear_filter": "Снять фильтр",
+      "filter_selected_accessibility": "{{ type }} (установлены фильтры: {{ count }})",
+      "show_more": "Показать больше",
+      "show_less": "Показать меньше"
     }
   },
   "templates": {
@@ -285,7 +288,7 @@
     "collection_template": {
       "title": "Коллекция",
       "empty": "Продукты не найдены",
-      "use_fewer_filters_html": "Используйте меньше фильтров или <a class=\"{{ class }}\" href=\"{{ link }}\">удалите фильтры</a>"
+      "use_fewer_filters_html": "Используйте меньше фильтров или <a class=\"{{ class }}\" href=\"{{ link }}\">удалите все</a>"
     },
     "video": {
       "load_video": "Загрузить видео: {{ description }}"
diff --git a/locales/sk-SK.json b/locales/sk-SK.json
index 35d7aa22c62..3f6eaba6265 100644
--- a/locales/sk-SK.json
+++ b/locales/sk-SK.json
@@ -158,7 +158,7 @@
     "facets": {
       "apply": "Použiť",
       "clear": "Vymazať",
-      "clear_all": "Vymazať všetko",
+      "clear_all": "Odstrániť všetky",
       "from": "Od",
       "filter_and_sort": "Filtrovať a zoradiť",
       "filter_by_label": "Filtrovať:",
@@ -186,7 +186,10 @@
         "few": "Počet produktov: {{ count }}",
         "many": "Počet produktov: {{ count }}"
       },
-      "clear_filter": "Vymazať filter"
+      "clear_filter": "Odstrániť filter",
+      "filter_selected_accessibility": "{{ type }} (vybrané filtre: {{ count }})",
+      "show_more": "Zobraziť viac",
+      "show_less": "Zobraziť menej"
     }
   },
   "templates": {
@@ -285,7 +288,7 @@
     "collection_template": {
       "title": "Kolekcia",
       "empty": "Nenašli sa žiadne produkty",
-      "use_fewer_filters_html": "Použiť menej filtrov alebo <a class=\"{{ class }}\" href=\"{{ link }}\">vymazať všetko</a>"
+      "use_fewer_filters_html": "Použite menej filtrov alebo <a class=\"{{ class }}\" href=\"{{ link }}\">všetky odstráňte</a>"
     },
     "video": {
       "load_video": "Načítať video: {{ description }}"
diff --git a/locales/sl-SI.json b/locales/sl-SI.json
index 6be9bf32b5c..72239d12b9c 100644
--- a/locales/sl-SI.json
+++ b/locales/sl-SI.json
@@ -158,7 +158,7 @@
     "facets": {
       "apply": "Uporabi",
       "clear": "Počisti",
-      "clear_all": "Počisti vse",
+      "clear_all": "Odstrani vse",
       "from": "Od",
       "filter_and_sort": "Filtriranje in razvrščanje",
       "filter_by_label": "Filtriraj:",
@@ -186,7 +186,10 @@
         "few": "Št. izdelkov: {{ count }}",
         "two": "Št. izdelkov: {{ count }}"
       },
-      "clear_filter": "Počisti filter"
+      "clear_filter": "Odstrani filter",
+      "filter_selected_accessibility": "{{ type }} (št. izbranih filtrov: {{ count }})",
+      "show_more": "Prikaži več",
+      "show_less": "Prikaži manj"
     }
   },
   "templates": {
@@ -285,7 +288,7 @@
     "collection_template": {
       "title": "Zbirka",
       "empty": "Ni najdenih izdelkov",
-      "use_fewer_filters_html": "Uporabite manj filtrov ali <a class=\"{{ class }}\" href=\"{{ link }}\">počistite vse</a>"
+      "use_fewer_filters_html": "Uporabite manj filtrov ali <a class=\"{{ class }}\" href=\"{{ link }}\">odstranite vse</a>"
     },
     "video": {
       "load_video": "Naloži videoposnetek: {{ description }}"
diff --git a/locales/sv.json b/locales/sv.json
index 56501c63a6a..70baf7ad7ee 100644
--- a/locales/sv.json
+++ b/locales/sv.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Tillämpa",
       "clear": "Rensa",
-      "clear_all": "Rensa alla",
+      "clear_all": "Ta bort alla",
       "from": "Från",
       "filter_and_sort": "Filtrera och sortera",
       "filter_by_label": "Filter:",
@@ -178,7 +178,10 @@
       "sort_button": "Sortera",
       "sort_by_label": "Sortera efter:",
       "to": "Till",
-      "clear_filter": "Rensa filter"
+      "clear_filter": "Ta bort filter",
+      "filter_selected_accessibility": "{{ type }} ({{ count }}) filter valda",
+      "show_more": "Visa mer",
+      "show_less": "Visa mindre"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Produktserie",
       "empty": "Inga produkter hittades",
-      "use_fewer_filters_html": "Använd färre filter eller <a class=\"{{ class }}\" href=\"{{ link }}\">rensa alla</a>"
+      "use_fewer_filters_html": "Använd färre filter eller <a class=\"{{ class }}\" href=\"{{ link }}\">ta bort alla</a>"
     },
     "video": {
       "load_video": "Ladda video: {{ description }}"
diff --git a/locales/sv.schema.json b/locales/sv.schema.json
index 46c5cdcfe4c..f7f50d01920 100644
--- a/locales/sv.schema.json
+++ b/locales/sv.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 kolumner"
           }
+        },
+        "filter_type": {
+          "label": "Filterlayout för dator",
+          "options__1": {
+            "label": "Liggande"
+          },
+          "options__2": {
+            "label": "Stående"
+          },
+          "options__3": {
+            "label": "Låda"
+          },
+          "info": "Låda är standardlayouten för mobil."
         }
       }
     },
diff --git a/locales/th.json b/locales/th.json
index 2457d0d6d92..583348b449d 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "นำไปใช้",
       "clear": "ล้าง",
-      "clear_all": "ล้างทั้งหมด",
+      "clear_all": "ลบออกทั้งหมด",
       "from": "จาก",
       "filter_and_sort": "กรองและจัดเรียง",
       "filter_by_label": "ตัวกรอง:",
@@ -178,7 +178,10 @@
       "sort_button": "จัดเรียง",
       "sort_by_label": "เรียงตาม:",
       "to": "ไปยัง",
-      "clear_filter": "ล้างตัวกรอง"
+      "clear_filter": "ลบตัวกรองออก",
+      "filter_selected_accessibility": "{{ type }} (เลือกตัวกรองแล้ว {{ count }} รายการ)",
+      "show_more": "แสดงมากขึ้น",
+      "show_less": "แสดงน้อยลง"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "คอลเลกชัน",
       "empty": "ไม่พบสินค้า",
-      "use_fewer_filters_html": "ใช้ตัวกรองให้น้อยลง หรือ<a class=\"{{ class }}\" href=\"{{ link }}\">ล้างทั้งหมด</a>"
+      "use_fewer_filters_html": "ใช้ตัวกรองให้น้อยลง หรือ<a class=\"{{ class }}\" href=\"{{ link }}\">ลบทั้งหมด</a>"
     },
     "video": {
       "load_video": "โหลดวิดีโอ: {{ description }}"
diff --git a/locales/th.schema.json b/locales/th.schema.json
index 75fe77f3e9e..76a7ec1e8d2 100644
--- a/locales/th.schema.json
+++ b/locales/th.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 คอลัมน์"
           }
+        },
+        "filter_type": {
+          "label": "เลย์เอาต์ตัวกรองสำหรับเดสก์ท็อป",
+          "options__1": {
+            "label": "แนวนอน"
+          },
+          "options__2": {
+            "label": "แนวตั้ง"
+          },
+          "options__3": {
+            "label": "แถบตัวเลือกแบบซ่อนได้"
+          },
+          "info": "แถบตัวเลือกแบบซ่อนได้เป็นเลย์เอาต์เริ่มต้นสำหรับมือถือ"
         }
       }
     },
diff --git a/locales/tr.json b/locales/tr.json
index 16f51e93e39..0a34134cd0f 100644
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "Uygula",
       "clear": "Temizle",
-      "clear_all": "Tümünü temizle",
+      "clear_all": "Tümünü kaldır",
       "from": "En düşük",
       "filter_and_sort": "Filtrele ve sırala",
       "filter_by_label": "Filtre:",
@@ -178,7 +178,10 @@
       "sort_button": "Sırala",
       "sort_by_label": "Sıralama ölçütü:",
       "to": "En yüksek",
-      "clear_filter": "Filtreyi temizle"
+      "clear_filter": "Filtreyi kaldır",
+      "filter_selected_accessibility": "{{ type }} ({{ count }} filtre seçildi)",
+      "show_more": "Daha fazla göster",
+      "show_less": "Daha az göster"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "Koleksiyon",
       "empty": "Ürün bulunamadı",
-      "use_fewer_filters_html": "Daha az filtre kullan veya <a class=\"{{ class }}\" href=\"{{ link }}\">tümünü temizle</a>"
+      "use_fewer_filters_html": "Daha az filtre kullan veya <a class=\"{{ class }}\" href=\"{{ link }}\">tümünü kaldır</a>"
     },
     "video": {
       "load_video": "Videoyu yükle: {{ description }}"
diff --git a/locales/tr.schema.json b/locales/tr.schema.json
index ee8dd28eeaf..a7f3f5a74db 100644
--- a/locales/tr.schema.json
+++ b/locales/tr.schema.json
@@ -1297,6 +1297,19 @@
         "enable_quick_buy": {
           "label": "Hızlı ekleme düğmesini etkinleştir",
           "info": "Açılır pencere ve çekmece sepet türü için optimumdur."
+        },
+        "filter_type": {
+          "label": "Masaüstü filtre düzeni",
+          "options__1": {
+            "label": "Yatay"
+          },
+          "options__2": {
+            "label": "Dikey"
+          },
+          "options__3": {
+            "label": "Çekmece"
+          },
+          "info": "Çekmece, varsayılan mobil düzendir."
         }
       }
     },
diff --git a/locales/vi.json b/locales/vi.json
index b80dea0bcf9..b8c6c6c6c7e 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -178,7 +178,10 @@
       "sort_button": "Sắp xếp",
       "sort_by_label": "Sắp xếp theo:",
       "to": "Đến",
-      "clear_filter": "Xóa bộ lọc"
+      "clear_filter": "Xóa bộ lọc",
+      "filter_selected_accessibility": "{{ type }} (Đã chọn {{ count }} bộ lọc)",
+      "show_more": "Hiển thị thêm",
+      "show_less": "Rút gọn"
     }
   },
   "templates": {
diff --git a/locales/vi.schema.json b/locales/vi.schema.json
index e6edec06799..9149bc71ea6 100644
--- a/locales/vi.schema.json
+++ b/locales/vi.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 cột"
           }
+        },
+        "filter_type": {
+          "label": "Bố cục bộ lọc trên màn hình máy tính",
+          "options__1": {
+            "label": "Ngang"
+          },
+          "options__2": {
+            "label": "Dọc"
+          },
+          "options__3": {
+            "label": "Ngăn"
+          },
+          "info": "Ngăn là bố cục mặc định trên di động."
         }
       }
     },
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 5defd107581..767a3552987 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "应用",
       "clear": "清除",
-      "clear_all": "清除所有内容",
+      "clear_all": "全部删除",
       "from": "从",
       "filter_and_sort": "筛选和排序",
       "filter_by_label": "筛选条件：",
@@ -178,7 +178,10 @@
       "sort_button": "排序",
       "sort_by_label": "排序依据：",
       "to": "到",
-      "clear_filter": "清除筛选条件"
+      "clear_filter": "删除筛选条件",
+      "filter_selected_accessibility": "{{ type }}（已选择 {{ count }} 个筛选条件）",
+      "show_more": "显示更多内容",
+      "show_less": "隐藏部分内容"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "收藏",
       "empty": "未找到产品",
-      "use_fewer_filters_html": "减少使用的筛选条件数量或<a class=\"{{ class }}\" href=\"{{ link }}\">清除所有内容</a>"
+      "use_fewer_filters_html": "减少使用的筛选条件数量或<a class=\"{{ class }}\" href=\"{{ link }}\">删除所有筛选条件</a>"
     },
     "video": {
       "load_video": "加载视频：{{ description }}"
diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index d0ac0b21dad..03830a20f1a 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 列"
           }
+        },
+        "filter_type": {
+          "label": "台式设备筛选布局",
+          "options__1": {
+            "label": "水平"
+          },
+          "options__2": {
+            "label": "垂直"
+          },
+          "options__3": {
+            "label": "抽屉"
+          },
+          "info": "默认的移动设备布局是抽屉式布局。"
         }
       }
     },
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index de0f50ff9de..eabdbc99ff5 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -156,7 +156,7 @@
     "facets": {
       "apply": "套用",
       "clear": "清除",
-      "clear_all": "清除全部",
+      "clear_all": "全部移除",
       "from": "寄件人",
       "filter_and_sort": "篩選與排序",
       "filter_by_label": "篩選條件：",
@@ -178,7 +178,10 @@
       "sort_button": "排序",
       "sort_by_label": "排序依據：",
       "to": "給",
-      "clear_filter": "清除篩選條件"
+      "clear_filter": "移除篩選條件",
+      "filter_selected_accessibility": "{{ type }} (已選取 {{ count }} 個篩選條件)",
+      "show_more": "顯示更多內容",
+      "show_less": "顯示較少內容"
     }
   },
   "templates": {
@@ -271,7 +274,7 @@
     "collection_template": {
       "title": "商品系列",
       "empty": "找不到任何產品",
-      "use_fewer_filters_html": "使用較少篩選條件或<a class=\"{{ class }}\" href=\"{{ link }}\">清除全部</a>"
+      "use_fewer_filters_html": "使用較少篩選條件或<a class=\"{{ class }}\" href=\"{{ link }}\">全部移除</a>"
     },
     "video": {
       "load_video": "載入影片：{{ description }}"
diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index 622adc0f871..6602c9505b8 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -1297,6 +1297,19 @@
           "options__2": {
             "label": "2 欄"
           }
+        },
+        "filter_type": {
+          "label": "桌面版濾鏡版面配置",
+          "options__1": {
+            "label": "水平"
+          },
+          "options__2": {
+            "label": "垂直"
+          },
+          "options__3": {
+            "label": "收銀機"
+          },
+          "info": "收銀機為預設的行動版版面配置。"
         }
       }
     },
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index e520a6562ac..e2eb447d451 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -27,64 +27,112 @@
 {%- endstyle -%}
 
 <div class="section-{{ section.id }}-padding">
-  {%- 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" }}
+  {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
+  {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
+    <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
+      <form class="facets-vertical-form" id="FacetSortForm">
+        <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>
             </h2>
+            <div class="select">
+              {%- assign sort_by = collection.sort_by | default: collection.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 collection.sort_options -%}
+                  <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
+                {%- endfor -%}
+              </select>
+              {% render 'icon-caret' %}
+            </div>
           </div>
+          <noscript>
+            <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+          </noscript>
         </div>
-      {%- else -%}
-        <div class="collection page-width">
-          <div class="loading-overlay gradient"></div>
-  
-          <ul id="product-grid" data-id="{{ section.id }}" class="
-            grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
-            grid--{{ section.settings.columns_desktop }}-col-desktop">
-            {%- for product in collection.products -%}
-              {% assign lazy_load = false %}
-              {%- if forloop.index > 2 -%}
-                {%- assign lazy_load = true -%}
+
+        <div class="product-count-vertical light" role="status">
+          <h2 class="product-count__text text-body">
+            <span id="ProductCountDesktop">
+              {%- if collection.results_count -%}
+                {{ 'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count }}
+              {%- elsif collection.products_count == collection.all_products_count -%}
+                {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
+              {%- else -%}
+                {{ 'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
               {%- endif -%}
+            </span>
+          </h2>
+          <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>
+  {%- endif -%}
 
-              <li class="grid__item">
-                {% render 'card-product',
-                  card_product: product,
-                  media_aspect_ratio: section.settings.image_ratio,
-                  show_secondary_image: section.settings.show_secondary_image,
-                  show_vendor: section.settings.show_vendor,
-                  show_rating: section.settings.show_rating,
-                  lazy_load: lazy_load,
-                  show_quick_add: section.settings.enable_quick_add,
-                  section_id: section.id
-                %}
-              </li>
-            {%- endfor -%}
-          </ul>
-  
-          {%- if paginate.pages > 1 -%}
-            {% render 'pagination', paginate: paginate, anchor: '' %}
-          {%- endif -%}
-        </div>
-      {%- endif -%}
-    {%- endpaginate -%}
+  <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 }}">
+        {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
+      </aside>
+    {%- endif -%}
+
+    <div class="product-grid-container{% if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices %} product-grid-container-vertical{% endif %}" 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{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
+            <div class="loading-overlay gradient"></div>
+    
+            <ul id="product-grid" data-id="{{ section.id }}" class="
+              grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
+              grid--{{ section.settings.columns_desktop }}-col-desktop">
+              {%- for product in collection.products -%}
+                {% assign lazy_load = false %}
+                {%- if forloop.index > 2 -%}
+                  {%- assign lazy_load = true -%}
+                {%- endif -%}
+                <li class="grid__item">
+                  {% render 'card-product',
+                    card_product: product,
+                    media_aspect_ratio: section.settings.image_ratio,
+                    show_secondary_image: section.settings.show_secondary_image,
+                    show_vendor: section.settings.show_vendor,
+                    show_rating: section.settings.show_rating,
+                    lazy_load: lazy_load,
+                    show_quick_add: section.settings.enable_quick_add,
+                    section_id: section.id
+
+                  %}
+                </li>
+              {%- endfor -%}
+            </ul>
+    
+            {%- if paginate.pages > 1 -%}
+              {% render 'pagination', paginate: paginate, anchor: '' %}
+            {%- endif -%}
+          </div>
+        {%- endif -%}
+      {%- endpaginate -%}
+    </div>
   </div>
 </div>
 
+
 {% schema %}
 {
   "name": "t:sections.main-collection-product-grid.name",
@@ -168,18 +216,33 @@
       "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
       "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
     },
+    {
+      "type": "select",
+      "id": "filter_type",
+      "options": [
+        {
+          "value": "horizontal",
+          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
+        },
+        {
+          "value": "vertical",
+          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
+        },
+        {
+          "value": "drawer",
+          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
+        }
+      ],
+      "default": "horizontal",
+      "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
+      "info": "t:sections.main-collection-product-grid.settings.filter_type.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"
-    },
     {
       "type": "header",
       "content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
diff --git a/sections/main-search.liquid b/sections/main-search.liquid
index 556baf28130..02755c5f9e1 100644
--- a/sections/main-search.liquid
+++ b/sections/main-search.liquid
@@ -132,83 +132,129 @@
     {%- endif -%}
   </div>
   {%- if search.performed -%}
-    {%- if search.filters != empty -%}
-      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
-        <div class="page-width">
-          {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %}
-        </div>
-      {%- endif -%}
-    {%- endif -%}
-    <div id="ProductGridContainer">
-      {%- if search.results.size == 0 and search.filters != empty -%}
-        <div class="template-search__results 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: search_url, class: "underlined-link link" }}
-            </h2>
+    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}
+      <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
+        <form class="facets-vertical-form" id="FacetSortForm">
+          <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>
+              </h2>
+              <div class="select">
+                {%- assign sort_by = search.sort_by | default: search.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 search.sort_options -%}
+                    <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
+                  {%- endfor -%}
+                </select>
+                {% render 'icon-caret' %}
+              </div>
+            </div>
+            <noscript>
+              <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+            </noscript>
           </div>
-        </div>
-      {%- else -%}
-        {% paginate search.results by 24 %}
-          <div class="template-search__results collection page-width" id="product-grid" data-id="{{ section.id }}">
-            <div class="loading-overlay gradient"></div>
-            <ul class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop" role="list">
-              {%- for item in search.results -%}
-                {% assign lazy_load = false %}
-                {%- if forloop.index > 2 -%}
-                  {%- assign lazy_load = true -%}
+
+          <div class="product-count-vertical light" role="status">
+            <h2 class="product-count__text text-body">
+              <span id="ProductCountDesktop">
+                {%- if search.results_count -%}
+                  {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
+                {%- elsif search.products_count == search.all_products_count -%}
+                  {{ 'products.facets.product_count_simple' | t: count: search.products_count }}
+                {%- else -%}
+                  {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }}
                 {%- endif -%}
+              </span>
+            </h2>
+            <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>
+    {%- endif -%}
+    <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 }}">
+            {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
+          </aside>
+        {%- endif -%}
+      {%- endif -%}
+      <div class="product-grid-container" id="ProductGridContainer">
+        {%- if search.results.size == 0 and search.filters != empty -%}
+          <div class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" 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: search_url, class: "underlined-link link" }}
+              </h2>
+            </div>
+          </div>
+        {%- else -%}
+          {% paginate search.results by 24 %}
+            <div class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
+              <div class="loading-overlay gradient"></div>
+              <ul class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop" role="list">
+                {%- for item in search.results -%}
+                  {% assign lazy_load = false %}
+                  {%- if forloop.index > 2 -%}
+                    {%- assign lazy_load = true -%}
+                  {%- endif -%}
 
-                <li class="grid__item">
-                  {%- case item.object_type -%}
-                    {%- when 'product' -%}
-                      {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
-                      {% render 'card-product',
-                        card_product: item,
-                        media_aspect_ratio: section.settings.image_ratio,
-                        show_secondary_image: section.settings.show_secondary_image,
-                        show_vendor: section.settings.show_vendor,
-                        show_rating: section.settings.show_rating,
-                        lazy_load: lazy_load
-                      %}
-                    {%- when 'article' -%}
-                      {% render 'article-card',
-                        article: item,
-                        show_image: true,
-                        show_date: section.settings.article_show_date,
-                        show_author: section.settings.article_show_author,
-                        show_badge: true,
-                        media_aspect_ratio: 1,
-                        lazy_load: lazy_load
-                      %}
-                    {%- when 'page' -%}
-                      <div class="card-wrapper underline-links-hover">
-                        <div class="card card--card card--text ratio color-{{ settings.card_color_scheme }}" style="--ratio-percent: 100%;">
-                            <div class="card__content">
-                              <div class="card__information">
-                                <h3 class="card__heading">
-                                  <a href="{{ item.url }}" class="full-unstyled-link">
-                                    {{ item.title | truncate: 50 | escape }}
-                                  </a>
-                                </h3>
-                              </div>
-                              <div class="card__badge {{ settings.badge_position }}">
-                                <span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>
-                              </div>
+                  <li class="grid__item">
+                    {%- case item.object_type -%}
+                      {%- when 'product' -%}
+                        {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
+                        {% render 'card-product',
+                          card_product: item,
+                          media_aspect_ratio: section.settings.image_ratio,
+                          show_secondary_image: section.settings.show_secondary_image,
+                          show_vendor: section.settings.show_vendor,
+                          show_rating: section.settings.show_rating,
+                          lazy_load: lazy_load
+                        %}
+                      {%- when 'article' -%}
+                        {% render 'article-card',
+                          article: item,
+                          show_image: true,
+                          show_date: section.settings.article_show_date,
+                          show_author: section.settings.article_show_author,
+                          show_badge: true,
+                          media_aspect_ratio: 1,
+                          lazy_load: lazy_load
+                        %}
+                      {%- when 'page' -%}
+                        <div class="card-wrapper underline-links-hover">
+                          <div class="card card--card card--text ratio color-{{ settings.card_color_scheme }}" style="--ratio-percent: 100%;">
+                              <div class="card__content">
+                                <div class="card__information">
+                                  <h3 class="card__heading">
+                                    <a href="{{ item.url }}" class="full-unstyled-link">
+                                      {{ item.title | truncate: 50 | escape }}
+                                    </a>
+                                  </h3>
+                                </div>
+                                <div class="card__badge {{ settings.badge_position }}">
+                                  <span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>
+                                </div>
+                          </div>
                         </div>
-                      </div>
-                  {%- endcase -%}
-                </li>
-              {%- endfor -%}
-            </ul>
-            {%- if paginate.pages > 1 -%}
-              {% render 'pagination', paginate: paginate %}
-            {%- endif -%}
-          </div>
-        {% endpaginate %}
-      {%- endif -%}
+                    {%- endcase -%}
+                  </li>
+                {%- endfor -%}
+              </ul>
+              {%- if paginate.pages > 1 -%}
+                {% render 'pagination', paginate: paginate %}
+              {%- endif -%}
+            </div>
+          {% endpaginate %}
+        {%- endif -%}
+      </div>
     </div>
   {%- endif -%}
 </div>
@@ -282,18 +328,33 @@
       "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
       "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
     },
+    {
+      "type": "select",
+      "id": "filter_type",
+      "options": [
+        {
+          "value": "horizontal",
+          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
+        },
+        {
+          "value": "vertical",
+          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
+        },
+        {
+          "value": "drawer",
+          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
+        }
+      ],
+      "default": "horizontal",
+      "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
+      "info": "t:sections.main-collection-product-grid.settings.filter_type.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"
-    },
     {
       "type": "header",
       "content": "t:sections.main-search.settings.header__2.content"
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 74f5083aa03..fb515397d76 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -5,12 +5,14 @@
     - 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
+    - filter_type: {String} Type of filter
 
     Usage:
-    {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, collapse_on_larger_devices: false %}
+    {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, filter_type: 'vertical' %}
 {% endcomment %}
 
+{{ 'component-show-more.css' | asset_url | stylesheet_tag }}
+
 {%- liquid
   assign sort_by = results.sort_by | default: results.default_sort_by
   assign total_active_values = 0
@@ -22,78 +24,171 @@
   endif
 -%}
 
-<div class="facets-container">
-  {%- unless collapse_on_larger_devices -%}
+<div class="facets-container{% if filter_type == 'drawer' %} facets-container-drawer{% endif %}">
+  {%- if filter_type == 'vertical' or filter_type == 'horizontal' -%}
     <facet-filters-form class="facets small-hide">
-      <form id="FacetFiltersForm" class="facets__form">
-
+      <form id="FacetFiltersForm" class="{% if filter_type == 'horizontal' %}facets__form{% else %}facets__form-vertical{% endif %}">
         {%- 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 -%}
-              <h2 class="facets__heading caption-large text-body">{{ 'products.facets.filter_by_label' | t }}</h2>
-            {%- endunless -%}
+          {% comment %} Heading is the first tabbable element on filter type horizontal {% endcomment %}
+          <div id="FacetsWrapperDesktop"{% if filter_type == 'horizontal' %} class="facets__wrapper"{% endif %}>
+            {%- if filter_type == 'horizontal' and results.filters != empty -%}
+              <h2 class="facets__heading caption-large text-body" id="verticalTitle" tabindex="-1">{{ 'products.facets.filter_by_label' | t }}</h2>
+            {%- endif -%}
+            {% comment %} Pills are right below the title for filter type vertical {% endcomment %}
+            {%- if filter_type == 'vertical' -%}
+              <div class="active-facets active-facets-desktop">
+                <div class="active-facets-vertical-filter">
+                  {%- unless results.filters == empty -%}
+                    <h2 class="facets__heading facets__heading--vertical caption-large text-body" id="verticalTitle" tabindex="-1">{{ 'products.facets.filter_by_label' | t }}</h2>
+                  {%- endunless -%}
+                  <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>
+                {%- 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">
+                          {{ filter.label }}: {{ 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 -%}
+              </div>
+            {%- endif -%}
 
+            <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
+            {% comment %} Filters for both horizontal and vertical filter {% endcomment %}
             {%- for filter in results.filters -%}
               {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
               {% case filter.type %}
               {% when 'boolean' or 'list' %}
-                <details id="Details-{{ forloop.index }}-{{ section.id }}" class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
-                  <summary class="facets__summary caption-large focus-offset">
+                <details id="Details-{{ forloop.index }}-{{ section.id }}" class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter" data-index="{{ forloop.index }}"{% if filter_type == 'vertical' and forloop.index == 1 %} open{% endif %}>
+                  <summary class="facets__summary caption-large focus-offset" aria-label="{{ filter.label }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})">
                     <div>
-                      <span>{{ filter.label | escape }}</span>
+                      <span>{{ filter.label | escape }}{%- if filter_type == 'vertical' -%}<span class="facets__selected no-js-hidden{% if filter.active_values.size == 0 %} hidden{% endif %}"> ({{ filter.active_values.size }})</span>{% endif %}</span>
                       {% render 'icon-caret' %}
                     </div>
                   </summary>
-                  <div id="Facet-{{ forloop.index }}-{{ section.id }}" 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>
+                  <div id="Facet-{{ forloop.index }}-{{ section.id }}" class="parent-display {% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}">
+                    {%- if filter_type != 'vertical' -%}
+                      <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>
+                    {%- endif -%}
+                    <fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
+                      <legend class="visually-hidden">{{ filter.label | escape }}</legend>
+                      <ul class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden" role="list">
+                        {%- for value in filter.values -%}
+                          <li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
+                            <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 %}
+                              >
 
-                    <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="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>
-
-                            {{ value.label | escape }} ({{ value.count }})
-                          </label>
-                        </li>
-                      {%- endfor -%}
-                    </ul>
+                              <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>
+                      {% comment %} No show more for no JS {% endcomment %}
+                      <ul class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js" 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="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>
+                    </fieldset>
+                    {%- if filter.values.size > 10 and filter_type == 'vertical' -%}
+                      <show-more-button>
+                        <button class="button-show-more link underlined-link no-js-hidden" id="Show-More-{{ forloop.index }}-{{ section.id }}" type="button">
+                          <span class="label-show-more label-text"><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}</span>
+                          <span class="label-show-less label-text hidden"><span aria-hidden="true">- </span>{{ 'products.facets.show_less' | t }}</span>
+                        </button>
+                      </show-more-button>
+                    {%- endif %}
                   </div>
                 </details>
               {% when 'price_range' %}
@@ -104,22 +199,24 @@
                     assign uses_comma_decimals = true
                   endif
                 %}
-                <details id="Details-{{ forloop.index }}-{{ section.id }}" class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}">
+                <details id="Details-{{ forloop.index }}-{{ section.id }}" class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter" data-index="{{ forloop.index }}"{% if filter_type == 'vertical' and  forloop.index == 1 %} open{% endif %}>
                   <summary class="facets__summary caption-large focus-offset">
                     <div>
                       <span>{{ filter.label | escape }}</span>
                       {% render 'icon-caret' %}
                     </div>
                   </summary>
-                  <div id="Facet-{{ forloop.index }}-{{ section.id }}" class="facets__display">
-                    <div class="facets__header">
+                  <div id="Facet-{{ forloop.index }}-{{ section.id }}" class="{% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}">
+                    <div class="{% if filter_type == 'horizontal' %}facets__header{% else %}facets__header-vertical{% endif %}">
                       {%- 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>
+                      {%- if filter_type != 'vertical' -%}
+                        <facet-remove>
+                          <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
+                            {{ 'products.facets.reset' | t }}
+                          </a>
+                        </facet-remove>
+                      {%- endif -%}
                     </div>
                     <price-range class="facets__price">
                       <span class="field-currency">{{ cart.currency.symbol }}</span>
@@ -137,7 +234,9 @@
                         >
                         <label class="field__label" for="Filter-{{ filter.label | escape }}-GTE">{{ 'products.facets.from' | t }}</label>
                       </div>
-                      <span class="field-currency">{{ cart.currency.symbol }}</span>
+                      {%- if filter_type != 'vertical' -%}
+                        <span class="field-currency">{{ cart.currency.symbol }}</span>
+                      {%- endif -%}
                       <div class="field">
                         <input class="field__input"
                           name="{{ filter.max_value.param_name }}"
@@ -165,48 +264,98 @@
               <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">
-                      {{ filter.label }}: {{ 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 -%}
+          {% comment %} Pills after filtes on filter type horizontal {% endcomment %}
+          {%- if filter_type == 'horizontal' -%}
+            <div class="active-facets active-facets-desktop">
+              {%- for filter in results.filters -%}
+                {%- for value in filter.active_values -%}
                   <facet-remove>
-                    <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
+                    <a href="{{ value.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 -%}
+                        {{ filter.label }}: {{ value.label | escape }}
                         {% 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>
+                {%- 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 -%}
         {% 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">
+        {%- if filter_type == 'horizontal' -%}
+          {% comment %} Sorting and product count are the last elements when filter type is horizontal {% endcomment %}
+          {%- if enable_sorting -%}
+            <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>
+                </h2>
+                <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 -%}
+                      <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
+                    {%- endfor -%}
+                  </select>
+                  {% render 'icon-caret' %}
+                </div>
+              </div>
+
+              <noscript>
+                <button type="submit" class="facets__button-no-js button button--tertiary">{{ 'products.facets.sort_button' | t }}</button>
+              </noscript>
+            </div>
+          {%- endif -%}
+          <div class="product-count light" role="status">
+            <h2 class="product-count__text text-body">
+              <span id="ProductCountDesktop">
+                {%- 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 -%}
+              </span>
+            </h2>
+            <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>  
+        {%- endif -%}
+      </form>
+    </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">
             <div class="facet-filters__field">
               <h2 class="facet-filters__label caption-large text-body">
                 <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
@@ -223,39 +372,20 @@
             </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">{{ 'products.facets.sort_button' | t }}</button>
             </noscript>
           </div>
-        {%- endif -%}
-
-        <div class="product-count light" role="status">
-          <h2 class="product-count__text text-body">
-            <span id="ProductCountDesktop">
-              {%- 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 -%}
-            </span>
-          </h2>
-          <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">
+        </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">
           {% render 'icon-filter' %}
-          <span class="mobile-facets__open-label button-label">
+          <span class="mobile-facets__open-label button-label medium-hide large-up-hide">
             {%- if enable_filtering and enable_sorting -%}
               {{ 'products.facets.filter_and_sort' | t }}
             {%- elsif enable_filtering -%}
@@ -264,6 +394,11 @@
               {{ 'products.facets.sort_button' | t }}
             {%- endif -%}
           </span>
+          <span class="mobile-facets__open-label button-label small-hide">
+            {%- if enable_filtering -%}
+              {{ 'products.facets.filter_button' | t }}
+            {%- endif -%}
+          </span>
         </span>
         <span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">{%- render 'icon-close' -%}</span>
       </summary>
@@ -272,7 +407,7 @@
           <div class="mobile-facets__inner gradient">
             <div class="mobile-facets__header">
               <div class="mobile-facets__header-inner">
-                <h2 class="mobile-facets__heading">
+                <h2 class="mobile-facets__heading medium-hide large-up-hide">
                   {%- if enable_filtering and enable_sorting -%}
                     {{ 'products.facets.filter_and_sort' | t }}
                   {%- elsif enable_filtering -%}
@@ -281,6 +416,11 @@
                     {{ 'products.facets.sort_button' | t }}
                   {%- endif -%}
                 </h2>
+                <h2 class="mobile-facets__heading small-hide">
+                  {%- if enable_filtering -%}
+                    {{ 'products.facets.filter_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 }}
@@ -328,7 +468,9 @@
                                 <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 }})
+                              
+                              <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 -%}
@@ -414,7 +556,7 @@
               {%- endfor -%}
 
               {%- if enable_sorting -%}
-                <div class="mobile-facets__details js-filter" data-index="mobile-{{ forloop.index }}">
+                <div class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}" 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>
@@ -454,7 +596,7 @@
     </details>
   </menu-drawer>
 
-  <div class="active-facets active-facets-mobile {% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}">
+  <div class="active-facets active-facets-mobile medium-hide large-up-hide">
     {%- for filter in results.filters -%}
       {%- for value in filter.active_values -%}
         <facet-remove>
@@ -488,7 +630,43 @@
       </a>
     </facet-remove>
   </div>
-  <div class="product-count light{% unless collapse_on_larger_devices %} medium-hide large-up-hide{% endunless %}" role="status">
+  {% comment %} Sort, product count and filter pills at the end when filter is type of Drawer for the correct tabbing order {% endcomment %}
+  {%- if enable_sorting and filter_type == 'drawer' -%}
+    <facet-filters-form class="facets small-hide">
+      <form id="FacetSortDrawerForm" class="facets__form">
+        <div class="facet-filters sorting caption small-hide">
+          <div class="facet-filters__field">
+            <h2 class="facet-filters__label caption-large text-body">
+              <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
+            </h2>
+            <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 -%}
+                  <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
+                {%- endfor -%}
+              </select>
+              {% render 'icon-caret' %}
+            </div>
+          </div>
+
+          <noscript>
+            <button type="submit" class="facets__button-no-js button">{{ '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>
+  {%- endif -%}
+  <div class="product-count light{% if filter_type == 'vertical' or filter_type == 'horizontal' %} medium-hide large-up-hide{% endif %}" role="status">
     <h2 class="product-count__text text-body">
       <span id="ProductCount">
         {%- if results.results_count -%}
@@ -506,4 +684,45 @@
       </svg>
     </div>
   </div>
+  {%- if filter_type == 'drawer' -%}
+    <facet-filters-form class="facets small-hide">
+      <form id="FacetFiltersPillsForm" class="facets__form">
+        <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">
+                    {{ filter.label }}: {{ 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>
+      </form>
+    </facet-filters-form>
+  {%- endif -%}
 </div>
+