⏳

Filter & sort

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

❓FAQ

‣

❓Do horizontal or vertical filters work better?

‣

❓Should you combine Sort & Filter into a single panel?

‣

❓Should you autoload results after every filter selection, or use an Apply button?

‣

❓Should you rank filters by popularity, number of results, or alphabetically?

💡 Ideas and tips

Menu layout

‣

Consider a horizontal filter pattern on desktop

‣

Use a “peekaboo” menu for horizontal filters on mobile

‣

Make your horizontal filter chips POP against a colored background

‣

Promote most-used filters to the category header

‣

Promote category-specific filters to the header

‣

🦄 Promote a Get it Today filter (for store pickup or same-day delivery)

‣

Promote active promotions to the top of your filter list

‣

Consider a “You are here” indicator

Sort menu styling

‣

Provide a clear visual distinction between Sort and Filter

‣

If you combine Sort + Filter, style the button like a primary CTA

‣

If you combine Sort + Filter to a single menu, auto-expand the Sort list

‣

Style your Sort menu as a call to action

‣

Give your Sort menu an icon

‣

Consider a Percent Off sort option (for Sale collections)

‣

Consider a Most Reviewed sort option

‣

Apply custom design to your Sort menu

‣

Highlight your currently applied sort option

‣

🦄 Consider a “nudge” effect in your mobile shelf

‣

Try emoji bullets

Filter data and behavior

‣

Expand only the most useful/popular filter accordions by default

‣

Keep sort and filter buttons sticky on mobile

‣

Provide contextual attribute filters at sub-category levels

‣

Sort list items by number of results (where appropriate)

‣

Offer a Search box for long filter lists

‣

🦄 Try nested multi-level filters

‣

Group size families together (vs one mashed up uni-list)

‣

Don’t be afraid of scrollbars (desktop)

‣

Truncate long lists with a “Show more” link

‣

If you use price sliders, provide text field fallbacks

‣

Consider filter nudges for long lists

‣

🦄 Use toggles for sections with 2 important attribute groups

‣

Try a shifting grid

Filter panel behavior

‣

Make it clear which filters have been selected

‣

Include a very conspicuous Apply button

‣

Show number of matching results on the Apply button

Filter menu styling

‣

Make your link targets tap-friendly

‣

Consider tooltips for filter headings where additional context is helpful

‣

Include contextual illustrations where relevant

‣

Consider descriptive microcopy (where appropriate)

‣

Consider image thumbnails, where relevant

‣

Label your color swatches

‣

Consider separating Categories and Sort & Filter menus

‣

🦄 Break sizes into sub-groups for cross-category collections

‣

🦄 Try an animated banner inside the filter sidebar

Filter results (post application)

‣

Make your applied filter chips POP

‣

🦄 Request customer feedback on your filters

Creative filter ideas

‣

Try a “Just dropped” recency filter

‣

Consider a % Off filter

‣

Consider a “Hide out of stock” filter

‣

Include a Sustainable section

‣

🦄 Let customers apply custom filters from saved profile data

‣

Promote % off filters to header in Sale and Clearance collections

‣

🦄 Include Size filters in Sale and Clearance collections

‣

🦄 Promote a “Get it by [date]” filter for time sensitive occasions

‣

Build an interactive map as “regional” filter (e.g. wine)

‣

🦄 Try a this-to-that attribute slider

🫣 Cautions

Filter data and logic

‣

ALWAYS audit your filters category by category

‣

Keep filters out of your Sort options!

‣

Consider dropping star rating filters

‣

Avoid overly tight or loose price tiers

‣

Beware of data gaps in numeric-range filters

‣

Make sure your international price tiers make sense

‣

Always define units of measure (where relevant)

Menu styling and layout

‣

Place your Sort menu in the top right position

‣

DON’T USE ALLCAPS

‣

Avoid tabbed design patterns

‣

Don’t use radio buttons when you should use checkboxes

‣

Be careful with 2+ column lists

‣

Make sure sticky elements don’t cover your Apply button

‣

Avoid list items that break over 2 lines

‣

Don’t underline list items

‣

Avoid using colored links for all filter list items

‣

Don’t get TOO creative with Sort options

‣

Don’t use too many characters when abbreviations will do

‣

Don’t align your list items like a tag cloud

Back to Category page ideas

👉 Follow on LinkedIn for daily ideas 💡