Responsive Customizable Product Filter & Slider Widget Free Download

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

  • 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”.
  • Display Only Featured Products: 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”.
  • Featured Products Attribute Code: This option can help you customize the attribute code you use for indicating featured products. Default is “featured”.
  • Attribute Code: 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)
  • Enable Multiselect: 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”.
  • Enable Pagination: 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”.
  • Pagination Type: With this option you can set whether you want to paginate via different pages using pagination buttons (numbers in the top) or slider like buttons (left and right button, just like a slider).
  • Maximum Pager Buttons Count: 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”.
  • Filter Buttons Alignment: This option will let you choose wheter you want to align the filter buttons in the left or in center of the page.
  • Products Background Color: With this option you can set the background color for your products. You can enter 6 character hex (like d3d3d3) or enter none for no background color.
  • Show Separator Between Filters: With this option you can choose whether you want separators between filter buttons or not.
  • Enable Animation 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”.
  • Animation Effects 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”.
  • Animation Duration (in milliseconds) 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.

   View Demo     Download