eg

Sort dropdown patterns

Sort sits above every listing as a quiet conversion lever. The pattern depends on how many options exist, whether their meanings are obvious, and how much the team wants to surface alternatives over the default order.

Target

Native-style select dropdown

A small label-and-select pair top-right of the listing, opens to a vertical list of sort options. The dominant pattern across mainstream retail catalogues. Often built as a styled custom component to match brand, but visually mimics the OS native select.

Example of a Target-style native select sort dropdown above a product gridsearchRunning shoes248 resultsFilter +Brand +Size +Color +Sort byBest matchBest match✓FeaturedPrice low to highPrice high to lowNewestTop ratedMost reviewsProduct 1$24.00Product 2$32.00Product 3$18.00Product 4$56.00Product 5$42.00Product 6$28.00Product 7$64.00Product 8$48.00ecommerceguide.com

> what's good

  • +Familiar control, every shopper knows how it works.
  • +Compact, leaves the listing the dominant surface.
  • +Easy to scale to 8-10 options without redesign.

> what's risky

  • ·Hides options behind one click, low awareness of available sorts.
  • ·Native vs custom mismatch causes mobile keyboard and accessibility quirks.
  • ·Default option is invisible until the menu opens, hurting trust in the order shown.
Best Buy

Custom dropdown with option descriptions

A wider custom dropdown that includes a short description under each option label. Used by retailers with non-obvious sort meanings, like Best Buy where Recommended and Best rated mean different things and shoppers need to know which to trust.

Example of a Best Buy-style custom sort dropdown with one-line descriptions per optionsearch4K TVs312 resultsFilter +Brand +Screen size +Sort:RecommendedRecommended✓Best mix of rating and valueBest ratedHighest customer star averageMost reviewedMost customer reviews firstPrice low to highCheapest models firstNewestMost recently launchedProduct 1$24.00Product 2$32.00Product 3$18.00Product 4$56.00Product 5$42.00Product 6$28.00Product 7$64.00Product 8$48.00ecommerceguide.com

> what's good

  • +Removes ambiguity around opaque sort labels like Recommended and Featured.
  • +Explains the trade-offs in plain text, not just abstract names.
  • +Builds trust in personalisation, shoppers see why an option was suggested.

> what's risky

  • ·Wider dropdown crowds the layout above the grid.
  • ·Descriptions can drift into legalese if PMs over-engineer them.
  • ·Twice the copy to localise, easy to leave English fallbacks in non-English markets.
Wayfair

Chip-row sort, no dropdown

All sort options live as horizontal pills in a row above the grid, the active option filled solid. Trades depth for visibility. Used by retailers running 4-6 sort options where awareness of available orders matters more than space.

Example of a Wayfair-style chip-row sort with pill-shaped options instead of a dropdownsearchSofas under $1,0001,842 resultsSORTTop ratedNewestPrice ↑Price ↓Best sellerFastest deliveryProduct 1$24.00Product 2$32.00Product 3$18.00Product 4$56.00Product 5$42.00Product 6$28.00Product 7$64.00Product 8$48.00ecommerceguide.com

> what's good

  • +Every sort option is visible without a click, removes hidden-feature problem.
  • +Active state is unambiguous, no need to open a menu to confirm.
  • +Easy to add tracking on individual pill clicks for sort analytics.

> what's risky

  • ·Doesn't scale beyond 5-6 options without wrapping or scrolling.
  • ·Eats horizontal space that filter bars also want.
  • ·On mobile, chips wrap into multiple rows that confuse the visual hierarchy.

More discovery & browse patterns