diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 311fdf48e1..42748e48f1 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -11,6 +11,11 @@
 @import "shop-taxon-flag";
 @import "shop-popovers";
 
+$sidebar-small-width: 85%;
+$sidebar-medium-width: 65%;
+$sidebar-large-width: 45%;
+$sidebar-footer-height: 5em;
+
 .darkswarm {
   .shop-searchbar {
     background-color: $grey-100;
@@ -68,10 +73,16 @@
       background-color: rgba(0, 0, 0, 0.15);
       opacity: 0;
       transition: opacity 250ms ease-in-out 0s;
+    }
 
-      &.shown {
+    &.shown {
+      .background {
         opacity: 1;
       }
+
+      .sidebar, .sidebar-footer {
+        margin-right: 0;
+      }
     }
 
     .sidebar {
@@ -80,24 +91,58 @@
       right: 0;
       z-index: 210;
       height: 100%;
-      width: 45%;
-      margin-right: -45%;
+      width: $sidebar-large-width;
+      margin-right: -$sidebar-large-width;
       background-color: rgba($white, 0.95);
       padding: 1em;
       transition: margin 250ms ease-in-out 0s;
+      overflow-y: scroll;
 
-      &.shown {
-        margin-right: 0;
+      .property-selectors {
+        margin-bottom: $sidebar-footer-height + 2em;
       }
+    }
 
-      @media all and (max-width: 768px) {
-        width: 65%;
-        margin-right: -65%;
+    .sidebar-footer {
+      background-color: $grey-800;
+      width: $sidebar-large-width;
+      margin-right: -$sidebar-large-width;
+      height: $sidebar-footer-height;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      transition: margin 250ms ease-in-out 0s;
+      padding: 1em;
+
+      button {
+        height: 3em;
+        background-color: $grey-800;
+        color: $white;
+        border: 1px solid $grey-600;
+        border-radius: 0.5em;
+        width: 47%;
+        margin: 0;
+        padding: 0;
+
+        &.done {
+          background-color: $orange-500;
+          border: none;
+          margin-left: 3%;
+        }
       }
+    }
 
-      @media all and (max-width: 480px) {
-        width: 85%;
-        margin-right: -85%;
+    @media all and (max-width: 768px) {
+      .sidebar, .sidebar-footer {
+        width: $sidebar-medium-width;
+        margin-right: -$sidebar-medium-width;
+      }
+    }
+
+    @media all and (max-width: 480px) {
+      .sidebar, .sidebar-footer {
+        width: $sidebar-small-width;
+        margin-right: -$sidebar-small-width;
       }
     }
   }
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index b98f308a53..4b0311954f 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -53,13 +53,21 @@
                 = t(:products_filter_by)
                 %span{ng: {show: 'filtersCount()' }}
                   = "({{ filtersCount() }} #{t(:products_filter_selected)})"
+
               = render partial: "shop/products/filters"
 
-            .shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar'}}
-              .background{ng: {click: 'toggleFilterSidebar()', class: "{'shown': showFilterSidebar}"}}
-              .sidebar{ng: {class: "{'shown': showFilterSidebar}"}}
+            .shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
+              .background{ng: {click: 'toggleFilterSidebar()'}}
+              .sidebar
                 %h5
                   = t(:products_filter_by)
                   %span{ng: {show: 'filtersCount()' }}
                     = "({{ filtersCount() }} #{t(:products_filter_selected)})"
+
                 = render partial: "shop/products/filters"
+
+                .sidebar-footer
+                  %button{type: 'button', ng: {click: 'clearAll() && toggleFilterSidebar()'}}
+                    = t(:products_filter_clear)
+                  %button.done{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
+                    = t(:products_filter_done)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fad7962350..ca2d5ad360 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1655,6 +1655,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
   products_search: "Search..."
   products_filter_by: "Filter by"
   products_filter_selected: "selected"
+  products_filter_clear: "Clear"
+  products_filter_done: "Done"
   products_loading: "Loading products..."
   products_updating_cart: "Updating cart..."
   products_cart_empty: "Cart empty"