Responsive Customizable Product Filter & Slider Widget


Note: Any feature or support request will kindly accepted
Live Preview:

This extension has the ability to work in 2 modes: “Slider Mode” or “Pagination Mode”. See the Demo Page.

This extension will add a responsive widget to your widgets list called “Mini Product Filter”.
By adding this widget anywhere in your design, it will generate all products in a category (or subcategories) you choose with filtering ability based on your desired attribute and display them nicely with your desired pagination, animation and other customizable options with support of “Featured Products”. This widget can be shown also as a slider or pagination type configurable via widget options.

This widget can show products in a single line (act as a product filter slider demonstrated in the demo) or multiple line, depends on number of products you want to be shown. (configurable via admin panel).

Customizable options
Responsive Customizable Product Filter & Slider Widget - 1

  • Select the category you want to display products:
    It automatically renders all products in that category. If it has multiple subcategroies, it will render products on those subcategories too. For example, if you want to show all featured products in your store, you select the “Root Category” and enable “Display Only Featured Products” option to “Yes”.

In case you want to only display featured products, you can set this to true. Otherwise it will show all products in that category (or subcategories). Default is “No”.

This option can help you customize the attribute code you use for indicating featured products. Default is “featured”.

You can set the attribute code you want to filter your products based on. This will work with almost any attribute types. (Specially with dropdown, multiple select and similar multi option attribute types). The options of the selected attribute will be shown as filters and end-users can filter products based on this attribute options. (Shown as buttons in top of the widget)

If you set this option to “Yes”, it will let you to filter products based on multiple options in your selected attribute. For example, if you are filtering products based on “color” attrbiute, by setting this option to “Yes” users will be able to filter all “Purple” & “Red” products. Otherwise, they will be able to filter only based on one option. Default is “Yes”.

This option will let you enable pagination in the widget. The page numbers will be shown nicely in top of the filter, next to the filter buttons. Default is “Yes”.

This option will let you choose the number of pagination buttons shown at the same time. For example if you set it to “3”, it will only show 3 pagination buttons and other possible pagination buttons will be shown if you click to next page. This feature will help you to reduce number of pagination buttons and only show them when necessary. Default is “3”.

This option will let you to choose whether you want to have animation when end-users filter products or in load time. If you set this to “Yes”, products will be shown with a animation. Default is “Yes”.

With this multiple select option you can select different animation effects for loading products when end-user trying to filter products or in load time. Default is “fade” & “scale”.

This option will let you set the animation duration in milliseconds. For example if you set it to 1000, the animation will take 1 second from the beginning to the end in each product filtering time or load-time.

This widget is also read System > Configuration > Catalog > Inventory > Stock Options settings. For example if you set “Display Out of Stock Products” to “Yes” and “Display products availability in stock in the frontend” to “Yes”, it will show out of stock products with a label “Out of Stock” in bottom of that product.