diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index e32ca940dae..83496d4b9f2 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -200,6 +200,14 @@ class website_sale(http.Controller):
 
         product_obj = pool.get('product.template')
 
+        parent_category_ids = []
+        if category:
+            parent_category_ids = [category.id]
+            current_category = category
+            while current_category.parent_id:
+                parent_category_ids.append(current_category.parent_id.id)
+                current_category = current_category.parent_id
+
         product_count = product_obj.search_count(cr, uid, domain, context=context)
         pager = request.website.pager(url=url, total=product_count, page=page, step=PPG, scope=7, url_args=post)
         product_ids = product_obj.search(cr, uid, domain, limit=PPG, offset=pager['offset'], order='website_published desc, website_sequence desc', context=context)
@@ -228,6 +236,7 @@ class website_sale(http.Controller):
             'attributes': attributes,
             'compute_currency': compute_currency,
             'keep': keep,
+            'parent_category_ids': parent_category_ids,
             'style_in_product': lambda style, product: style.id in [s.id for s in product.website_style_ids],
             'attrib_encode': lambda attribs: werkzeug.url_encode([('attrib',i) for i in attribs]),
         }
@@ -582,7 +591,7 @@ class website_sale(http.Controller):
             orm_partner.write(cr, SUPERUSER_ID, [partner_id], billing_info, context=context)
         else:
             # create partner
-            billing_info['team_id'] = request.registry.get('ir.model.data').xmlid_to_res_id(cr, uid, 'website.salesteam_website_sales') 
+            billing_info['team_id'] = request.registry.get('ir.model.data').xmlid_to_res_id(cr, uid, 'website.salesteam_website_sales')
             partner_id = orm_partner.create(cr, SUPERUSER_ID, billing_info, context=context)
 
         # create a new shipping partner
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 4aca45b7f18..c16bf25e6b9 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -429,3 +429,13 @@ ul.wizard li:first-child {
 .label-optional {
   font-weight: normal;
 }
+
+/* Collapse category */
+#o_shop_collapse_category li a{
+  display: inline-block;
+  width: 80%;
+  padding-left: 3px;
+}
+#o_shop_collapse_category li i.fa{
+  cursor: pointer;
+}
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index d46881c869f..e1c9fb4593b 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -392,7 +392,7 @@ ul.wizard
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
 
-ul.wizard li 
+ul.wizard li
     border: 1px solid #d4d4d4
     border-right-width: 0
     position: relative
@@ -441,3 +441,14 @@ ul.wizard li:first-child
 /* Shipping & Billing */
 .label-optional
     font-weight: normal
+
+/* Collapse category */
+#collapse_category
+    li
+        a
+            display: inline-block
+            width: 80%
+            padding-left: 3px
+
+        i.fa
+            cursor: pointer
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index b7dc3320089..a9a1c7a0fb8 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -4,6 +4,19 @@ odoo.define('website_sale.website_sale', function (require) {
 var ajax = require('web.ajax');
 
 $(document).ready(function () {
+
+$('#o_shop_collapse_category').on('click', '.fa-chevron-right',function(){
+    $(this).parent().siblings().find('.fa-chevron-down:first').click();
+    $(this).parents('li').find('ul:first').show('normal');
+    $(this).toggleClass('fa-chevron-down fa-chevron-right');
+});
+
+$('#o_shop_collapse_category').on('click', '.fa-chevron-down',function(){
+    $(this).parent().find('ul:first').hide('normal');
+    $(this).toggleClass('fa-chevron-down fa-chevron-right');
+});
+
+
 $('.oe_website_sale').each(function () {
     var oe_website_sale = this;
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index b252111722b..a69507b42f6 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -211,6 +211,31 @@
   </xpath>
 </template>
 
+<template id="option_collapse_categories_recursive" name="Collapse Category Recursive">
+  <li t-att-class="'active' if categ.id == int(category or 0) else ''">
+      <i t-if="categ.child_id" t-attf-class="text-primary fa #{'fa-chevron-down' if categ.id in parent_category_ids else 'fa-chevron-right'}"/>
+      <a t-att-href="keep('/shop/category/' + slug(categ), category=0)" t-field="categ.name"></a>
+      <ul t-if="categ.child_id" class="nav nav-pills nav-stacked nav-hierarchy" t-att-style="'display:block;' if categ.id in parent_category_ids else 'display:none;'">
+           <t t-foreach="categ.child_id" t-as="categ">
+              <t t-call="website_sale.option_collapse_categories_recursive"/>
+          </t>
+      </ul>
+  </li>
+</template>
+
+<template id="option_collapse_products_categories" name="Collapsible Category List" inherit_id="website_sale.products_categories" active="False" customize_show="True">
+  <xpath expr="//div[@id='products_grid_before']/ul" position="replace">
+      <ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
+          <li t-att-class=" '' if category else 'active' ">
+            <a t-att-href="keep('/shop',category=0)">All Products</a>
+          </li>
+          <t t-foreach="categories" t-as="categ">
+              <t t-call="website_sale.option_collapse_categories_recursive"/>
+          </t>
+      </ul>
+  </xpath>
+</template>
+
 <template id="products_attributes" inherit_id="website_sale.products" active="False" customize_show="True" name="Product Attribute's Filters">
   <xpath expr="//div[@id='products_grid_before']" position="inside">
       <form class="js_attributes" method="get">