eCommerce blocks - filters and sorting
Collection of practical examples of eCommerce filters and sorting panels. These kinds of sections are necessary when creating shop pages with plenty of products. You will find here solutions for all the possible use cases that can occur during creating eCommerce projects.
Basic example
A basic example of sidebar filters.
Screenshot (scroll down)
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/full.webp)
Sorting panel
A panel with basic sorting options and pagination.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/1.webp)
Search
Just a search input. To learn more about advanced options have a look at search docs.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/2.webp)
Links
Simple links that allow the user to go to the selected product category.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/4.webp)
Multiple choice
Checkboxes with multiple choice.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/5.webp)
Ratings
Filters based on user reviews.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/6.webp)
Single choice
Radio form with a single choice.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/7.webp)
Colors
Color filters with a single choice.
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/8.webp)
With inline actions and expandable sidebar filters
Screenshot (scroll down)
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/9.webp)
With centered text and dropdown product filters
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/10.webp)
With dropdown product filters
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/11.webp)
With expandable product filter panel
Screenshot
Get the code![](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/design-blocks/ecommerce/filters-and-sorting/assets/12.webp)