diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass
index 0503e30d0f..614509784e 100644
--- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass
+++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass
@@ -3,12 +3,12 @@
 @import big-input
 @import animations
 
-// OVERRIDES
+// Filter-box
 .row .row.filter-box
   margin-left: 0
   margin-right: 0
 
-.row.filter-box:first-child
+.row.filter-box:first-child, .row.filter-box.filter-box-shopfront
   border: 1px solid $clr-blue-light
   @include border-radius(0.25em)
   margin-top: 2px
@@ -17,17 +17,20 @@
   background: transparent
   margin-top: 1em
 
+.row.filter-box.filter-box-shopfront
+  margin-top: 0
+
 products .filter-box
   background: #f7f7f7
 
+
 .filter-box
   background: rgba(245,245,245,0.6)
-
   .tdhead
     padding: 0.25rem 0.5rem
     margin-top: 0.9rem
     color: $clr-blue
-    border-bottom: 1px solid $clr-blue-light
+    border-bottom: 1px solid $clr-blue-light 
 
   // OVERRIDES
   [class*="block-grid-"]
@@ -89,7 +92,6 @@ products .filter-box
         svg
           path
             fill: $clr-brick
-
     
     render-svg
       display: block
@@ -103,6 +105,16 @@ products .filter-box
         path
           fill: #666
 
+.filter-box.filter-box-shopfront
+  .tdhead
+    margin-top: 0rem
+    margin-bottom: 0.75rem
+    padding: 0.5rem 0
+    h5
+      color: $clr-blue
+    .button.tiny 
+      margin-bottom: 0rem
+
 .button.filterbtn
   margin-bottom: 0 !important
   min-width: 160px
diff --git a/app/views/shared/components/_filter_box_shopfront.html.haml b/app/views/shared/components/_filter_box_shopfront.html.haml
new file mode 100644
index 0000000000..f73d13f69f
--- /dev/null
+++ b/app/views/shared/components/_filter_box_shopfront.html.haml
@@ -0,0 +1,4 @@
+/ %span.animate-show{"ng-show" => "filtersActive && totalActive() > 0"}
+%a.button.secondary.tiny{"ng-click" => "clearAll()"} 
+	%i.ofn-i_009-close
+	Clear all filters
diff --git a/app/views/shared/components/_filter_controls_shopfront.html.haml b/app/views/shared/components/_filter_controls_shopfront.html.haml
new file mode 100644
index 0000000000..b89d55c452
--- /dev/null
+++ b/app/views/shared/components/_filter_controls_shopfront.html.haml
@@ -0,0 +1,8 @@
+%a.button.success.tiny.filterbtn{"ng-click" => "filtersActive = !filtersActive",
+"ng-show" => "FilterSelectorsService.selectors.length > 0"}
+  {{ filterText(filtersActive) }}
+  %i.ofn-i_005-caret-down{"ng-show" => "!filtersActive"}
+  %i.ofn-i_006-caret-up{"ng-show" => "filtersActive"}
+
+%a.button.secondary.tiny.filterbtn.disabled{"ng-show" => "FilterSelectorsService.selectors.length == 0"}
+  No filters
diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml
index c135274fad..a62361465c 100644
--- a/app/views/shop/products/_filters.html.haml
+++ b/app/views/shop/products/_filters.html.haml
@@ -1,17 +1,20 @@
-.row
-  = render partial: 'shared/components/filter_controls'
-  .small-12.medium-6.columns.text-right
-     
-
 .row.animate-show{"ng-show" => "filtersActive"}
   .small-12.columns
-    .row.filter-box
-      .small-12.columns
-        %h5.tdhead
+    = render partial: 'shared/components/filter_controls_shopfront'
+
+.row.filter-box.filter-box-shopfront.animate-hide{"ng-hide" => "filtersActive"}
+  .small-12.columns
+    .row.tdhead
+      .small-12.medium-6.columns
+        %h5
           .light Filter by
-          Type
+          Category
+      .small-12.medium-6.columns.text-right
+        = render partial: 'shared/components/filter_controls_shopfront'
+        = render partial: 'shared/components/filter_box_shopfront'
+    .row
+      .small-12.columns
         %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-4
           %taxon-selector{objects: "Products.products | products:query | products:showProfiles",
             results: "activeTaxons"}
 
-= render partial: 'shared/components/filter_box'