Helpcenter +918010117117" [email protected]
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India
call to replace anchor tags contains '/admin' in href

Designing Sidebar

The sidebar widget is mainly used for showing filters on the category page. It can be conditionally hidden or visible by using variable.

Data Elements

Main elements of the sidebar are filters. In some cases, banners and collections are also shown. Main filters are:

Category Filters

Mostly this contains sub-categories links.

Price Filters

Price filters can be shown or hidden with variable. 'ms.widgets.category_products.priceFilter(mydata)' function filters products based on mydata.min and mydata.max input values.

Brand Filters, Size, color and other attribute filters

These filters use widget ms.entityAttributes.

Html Structure


  • Category list
  • Price Filter
  • Filters
    • Color
    • Size
    • Fabric
    • Fit etc
  • collection

CSS Structure

  • Sidebar
    • sidebar-category
    • sidebar-filter
      • sidebar-heading
      • color-filter
      • size-filter
      • brand-filter
    • sidebar-collection

Variables used in sidebar widgets are:

show categories

‘yes/no’ to show and hide sidebar categories filter

show sidebar collection

‘yes/no’ to show and hide sidebar collection

sidebar collection

Select your collection which you want to show in sidebar collection


‘yes/no’ to show and hide price filter in sidebar.

show attribute filters

‘yes/no’ to show and hide attributes filter in sidebar like: for brand, color ,size etc.

There can be changes in attributes if you are using the facet concepts on the page for filters in. It has more flexibility for filtering the products. When you are using facet group app in admin than use ms.th2.sidebar_facet_group widget for sidebar.

Related Widgets

  • ms.entityAttributes