diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 5ee0a70270..019a09e96f 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -5,6 +5,7 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle,
   $scope.clearAll =  FilterSelectorsService.clearAll
   $scope.filterText =  FilterSelectorsService.filterText
   $scope.FilterSelectorsService =  FilterSelectorsService
+  $scope.filtersActive = true
   $scope.limit = 3
   $scope.order_cycle = OrderCycle.order_cycle
 
diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass
index 0503e30d0f..4d9f0d0e4e 100644
--- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass
+++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass
@@ -3,31 +3,36 @@
 @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
+  @media all and (max-width: 640px) 
+    margin-bottom: 1em
 
-.row.filter-box:last-child
+.row.filter-box.clear-filters
   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 +94,6 @@ products .filter-box
         svg
           path
             fill: $clr-brick
-
     
     render-svg
       display: block
@@ -103,6 +107,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/producers/_filters.html.haml b/app/views/producers/_filters.html.haml
index 00472dc91c..e1cd0ccba9 100644
--- a/app/views/producers/_filters.html.haml
+++ b/app/views/producers/_filters.html.haml
@@ -13,3 +13,5 @@
         %ul.small-block-grid-2.medium-block-grid-4.large-block-grid-6
           %taxon-selector{objects: "Enterprises.producers | searchEnterprises:query ", 
             results: "activeTaxons"}
+    = render partial: 'shared/components/filter_box'
+
diff --git a/app/views/shared/components/_filter_box.html.haml b/app/views/shared/components/_filter_box.html.haml
index 0256a57ff1..efa8b582f2 100644
--- a/app/views/shared/components/_filter_box.html.haml
+++ b/app/views/shared/components/_filter_box.html.haml
@@ -1,4 +1,4 @@
-.row.filter-box.animate-show{"ng-show" => "filtersActive && totalActive() > 0"}
+.row.filter-box.clear-filters.animate-show{"ng-show" => "filtersActive && totalActive() > 0"}
   .small-12.columns
     %a.button.secondary.small.expand{"ng-click" => "clearAll()"} 
       %i.ofn-i_009-close
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..7a2aa23296
--- /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..395e6f123d 100644
--- a/app/views/shop/products/_filters.html.haml
+++ b/app/views/shop/products/_filters.html.haml
@@ -1,17 +1,21 @@
-.row
-  = render partial: 'shared/components/filter_controls'
-  .small-12.medium-6.columns.text-right
-     
-
-.row.animate-show{"ng-show" => "filtersActive"}
+.row.animate-show{"ng-hide" => "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-show" => "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_box_shopfront'
+        = render partial: 'shared/components/filter_controls_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'