Flexi refine / search widget

This page covers the appearance & functionality of the Flexi Refine widget for both vanilla themes

Most sites use the refine widget on the search results page, however it can also be used as a standalone widget on normal listpages as well, for example on

https://www.cyclingnews.com/races/

Return to main Themes article

Flexi refine elements

Standalone - Flexi refine widget collapsed

  • Can be set (in flexi) to either collapsed or open by default

Refine widget collapsed

(Image credit: Future)

Standalone - Flexi refine widget expanded

  • Can be set (in flexi) to either collapsed or open by default
  • When expanded it will display relevant filter options

flexi refine expanded

(Image credit: Future)

Standalone - Flexi refine widget child categories

  • If a filter category has sub-categories then these will be shown when the category button is clicked on
  • A greyed out number shows how many articles are covered by that child category 
  • note: depending on the number of results, not all articles will be reachable, as the filter is still constrained by the number of articles allowed on a listpage & will only paginate to up to 9 pages.
  • It is possible to use more than one filter (either multiple child and/or parent categories) to further refine a search

flexi refine child categories

(Image credit: Future)

Standalone - Flexi refine widget with category selected

  • When a category or child category is applied, the page will automatically refresh with the filtered results
  • The refine widget will show which filter(s) are applied
  • A category filter can be removed by clicking the X
  • All filters can be removed by clicking 'Clear Filters'
  • The page will automatically refresh after each change

flexi refine categories

(Image credit: Future)

Search - Flexi refine widget collapsed

flexi refine search collapsed

(Image credit: Future)
  • Can be set (in flexi) to either collapsed or open by default

Search - Flexi refine widget Expanded

flexi refine search collapsed

(Image credit: Future)
  • Can be set (in flexi) to either collapsed or open by default
  • When expanded it will display relevant filter options

Search - Flexi refine widget child categories

  • If a filter category has sub-categories then these will be shown when the category button is clicked on
  • A greyed out number shows how many articles are covered by that child category
  • note: depending on the number of results, not all articles will be reachable, as the filter is still constrained by the number of articles allowed on a listpage & will only paginate to up to 9 pages.
  • It is possible to use more than one filter (either multiple child and/or parent categories) to further refine a search

flexi refine search child categories

(Image credit: Future)

Search - Flexi refine widget with category selected

flexi refine search categories

(Image credit: Future)
  • When a category or child category is applied, the page will automatically refresh with the filtered results
  • The refine widget will show which filter(s) are applied
  • A category filter can be removed by clicking the X
  • All filters can be removed by clicking 'Clear Filters'
  • The page will automatically refresh after each change

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.