👉🏽 This merchant sorts Colors by A-Z, hiding colors like White that may be more populated (or popular). Ranking by the number of matches or click-through data would be a better user experience.

👉🏽 This merchant’s list shows no apparent sort order logic, but may be ranking itself by click-through via its personalized search application. Keep in mind truncation can skew machine learning — visible links naturally attract higher click through.

🧦 Bombas’ horizontal filters support multi-selection, dynamically display the number of matching results, and auto-update the grid after each selection

👗 Macy’s promotes specific filters next to its Filters button. When filter chips appear cut off on the right side, it indicates you can scroll right for more 😃

💥 Ruggable’s filters are given extra visibility against a shaded background bar

👠 Fashion Nova displays frequently-used filter menus front-and-center, with the rest tucked neatly behind its filter menu icon

💡 Lamps Plus promotes specific filters, depending on the Category context

Barstools

Ceiling Fans

Table Lamps

🧦 Bombas promotes them to the hero banner!

🦅 American Eagle Outfitters’ “Get it Today!” filter (top left) requires you to enter your zipcode

Zoomed in:

🥾 REI uses geolocation to auto-apply the nearest store, with a blue link to Change store

🛒 BJ’s Wholesale prioritizes delivery filters with Pickup, Delivery (local courier) and Shipping chips

🎯 Target takes a similar approach

Zoom:

👖 Abercrombie uses a Shop My Store toggle that opens a lightbox to choose your store

👕  Old Navy takes a similar approach, but places it below other filters

Zoom:

🛍️ Macy’s highlights current offers in can’t-miss-red type

🧥 Burberry shows the count of how far you’ve scrolled through a product list in the top left

🦉 Bellroy simply displays Sort as an active dropdown, with Most popular visible. This can help users who don’t know the difference between Filter and Sort by labels alone

💋 Avoid reversing this order, it can throw customers off…

⚡ Sort & Filter button with icon and gray button styling

⚡ Clear button with icon, given enough white space to stand out

🌩️ Text links (especially underlined ones) can easily be drowned out by other elements

🦅 American Eagle Outfitters provides additional clarity around the Sort section by exposing the list fully. This also visually distinguishes the Sort options from attribute Filters, which each have their own heading label

🌩️ Contrast the above with a collapsed Sort menu. Even when placed above other filters, it’s less clear why a user should interact with it

🌩️  Similarly, a collapsed menu that “doesn’t look like the others” may fall victim to “banner blindness,” despite its more prominent visual treatment — especially with the tiny superscript label

😑 This example is EVEN HARDER TO SEE 😑

🙈 If you style your Sort menu too subtly, it can get lost in the mix — how long does it take for you to find the Sort menu below?

🥖 Ted Baker’s Filter and Sort icons provide a visual hint at the difference between them

💡

Many ecommerce sites don’t apply their own UI for the Sort menu, instead using the default O/S.

Applying your own style enables you to: ⚡ Make tap-targets larger and more finger-friendly for mobile shoppers ⚡ Apply type styling to emphasize selected or featured sort options ⚡ Apply emoji to list items ⚡ Add special markers or other UI styling to enhance usability ⚡ Keep your brand experience and design system consistent throughout

🔥 Much better:

💡 Applying a highlight and/or checkmark to the currently applied option provides clarity to users. Will it dramatically increase conversion? Of course not. But it’s a nice touch

💡 If you combine Sort & Filter menus together on mobile, consider adding a little wiggle to draw attention to the Sort menu, like Urban Outfitters. This also hints that horizontal scrolling will show more options

🍎 Cider adds whimsical flair with Sort menu emoji bullets — in its collapsed state the “thumbs up” emoji grabs extra attention!

🎧 Crutchfield auto-expands Brand, Price, Customer Rating and Availability by default, saving users a tap to open, and keeping the menu tighter than if all were auto-expanded

🍏 Cider expands all sections by default, requiring users to scroll, and scroll, and scroll. (See the “makeover” experience below, if they simply collapsed all but the most used sections)

🍎 The Cider “makeover”:

⌚ Fossil keeps controls at users’ fingertips as they scroll through the product list (if this gif loads slow, skip to the static image below)

👗 Kohl’s keeps applied filter chips visible for quick modification

⌚Crutchfield shows it deeply understands its product specs, providing custom attribute filters at the sub-category level for Sport & GPS watches (Maps, Music Storage, Activities, Digital Wallet, Microphone). It provides similar scoping for all major categories.

👗 ASOS ranks its Category filters by number of results when browsing the top-level Women’s department

💄 Some merchandizing tools will auto-rank lists by click-through engagement, showing the most applied filters first. This can be far superior to A-Z ranking, especially if attributes like “Vegan” and “Sulfate-free” are the most popular

🚲 REI ranks subcategories by number of results, with the ability to drill down to a 3rd category level (+)

👗 Nordstrom carries hundreds of brands — requiring a lot of filter-list scrolling. Its inline search box lets customers beeline to their faves quickly:

💄 Sephora lets you search by ingredient

📸 BH Photo lets you search across all filter lists (aka “within results”), but places the box below all filters. Not all users will spot it at the bottom

🍷 Wine.com’s Region filter lets you drill-down three levels deeper without leaving the widget

🛋️ IKEA’s Size filter lets you scope by Width, Height and Depth from the same dropdown

👖 H&M’s sub-filter menus are cool — but some have a large number of values!

👖 Another example from NA-KD with large tappable chips and the # of results displayed dynamically

💡

If your sizes span multiple departments (Men’s, Women’s and Kids) or conventions (e.g. US and Euro sizes; or Petite, Tall, Plus), or display both numeric and alpa ranges, the WORST think you can do is lump them all together in one hot menu mess. (Better examples below👇) Exhibit A:

Exhibit B:

Exhibit C:

🏆 Lily Pulitzer deserves a prize for this improved pattern

🪷 Lululemon takes a similar approach

👗 Revolve’s horizontal filters display multiple size groupings nicely on desktop

💣 Back to more bad examples (because there are just. so. many…)

👟 When it comes to scrollable filters, Nike just does it.

💊 RiteAid only displays 4 brands, this may be fine if the 80/20 rule applies to these top links. Or, it may require most users to “Show more.” Use your data and your common sense in your own scenarios.

📸 BH Photo applies a color and the number of hidden options for better visibility!

🥖 Ted Baker bakes input boxes with its price slider

👱🏿‍♀️ Amika has a tight DTC catalog that falls within a narrow price range to begin with. In this case the slider’s scale of max $75 is not the worst…but still would benefit from text input boxes (but note that the slider blends in with the other horizontal spacers in the menu)

😁 Or just don’t bother with sliders, and just show Custom input fields with pre-defined ranges

👗 Marc Cain shows a filter nudge on categories with a large number of results, such as Shop All and Sale (but not on regular categories)

🛋️ Vetsak has a perfect use case for filters toggles — some fabric variants are suitable for both indoor and outdoor use. The filter tab clarifies what’s not obvious at the Collection level, and helps customers think about their buying criteria earlier in the funnel.

See how the toggle UI is super obvious. No “tab blindness” here.

This is an idea to consider if your variants have “subgroups” within an Option type, or attributes that distinguish them that are important to the buying decision 😉

👟 On’s desktop grid shrinks in scale to make room for the left rail filter menu

🎒 Sandqvist does similar, instead shifting from a 3x to 2x grid

⚡ Ruggable applies a shaded highlight to selections

… and indicates which options have applied selections before you proceed to results, and when you return to the panel

🦉 Bellroy fills the checkboxes with a poppin’ color

💄Compare the above examples to Kylie Cosmetics’ simple bold text — it’s much more difficult to see what you’ve applied

🧘🏼 While it’s tempting to save space by simply indicating how many filters were applied, this doesn’t help customers recall their selections and quickly remove individual filters without expanding the panel

😎 Easy to see, easy to use!

🎯 Target’s clear Update button is easy to understand, and you can start over in one shot with Reset

👗 Fashion Nova indicates how many results will display after submitting your filter selections — this is great for customers who may want to remove their less-important filters (especially if less than 10 results match)

👔 Ted Baker lets you know how many products you’ll see after closing the panel. This gives you a chance to refine to increase results, if desired.

🔗 Button-style links are more tap-friendly than tightly-packed text links. Test it!

👆Crutchfield adds definitions to help shoppers better understand what they mean — this is great for technical specifications, jargon and other unconventional filter types

🛍️ Saks Fifth Avenue informs what its unique “My Designers” feature is for with a tooltip

🩳 Chubbies provides a visual for the relative 6” and 8” inseam styles

🛋️ IKEA’s icons illustrate relative cushion firmness

💍 Ritani’s icons illustrate stone shape, particularly helpful for industry-specifics like Baguette and Princess Cut

🔥 Kettle & Fire’s icons are cute - but may not be necessary here. When combined with checkboxes, they add clutter and makes it doubly hard to scan link text

✈️ As a D2C brand with a unique value proposition, Away provides definitions and detail for filter items where relevant. Check out the mobile view below:

Mobile:

🛠️ Ace Hardware includes thumbnail images with its filter chips, this helps customers scan quicker without having to read word-for-word

💡 Help colorblind users by labeling your color swatches. This also helps identify ambiguous colors like “multi-color,” “tie-dye,” metallics and “Solid” (whatever that means..)

🧠 Size filters can be very hard to navigate when all size groups are mashed together (see below for BAD examples!) Revolve smartly breaks sizes into Numeric, Bottoms and Shoes for macro-categories like Sale that span multiple departments

👗 Daniela Draper slips a Gift Voucher CTA in its desktop and mobile filter menus. The animation draws additional eyeballs ;)

🔪 Dolls Kill’s pink chip draws attention to all applied filters, with a quick way to clear ‘em all

🧘🏽 Lululemon’s clear boxes don’t compete with other links

👗 Anthropologie’s chips are clear, with a blue Clear All link

💊 Color-filled pills are also easy to see

😃 Looks good on mobile, too!

🙈 Contrast the above with the typical text-links that are overshadowed by other elements

⚽ Dick’s Sporting Goods asks customers to “Tell me what you think about our filters!” at the bottom of the product grid. It doesn’t hurt to capture real customer sentiment. (If the GIF is slow, see the static image below!)

🧘🏽 Alo Yoga caters to the segment of “site stalkers” with recency filters so raving fans can discover new items since their last visit

🎿 Backcountry uses this too, and quantifies the number of results

🛠️ While you may bury OOS products by default, lists can re-rank themselves after Sort is applied - this filter can help the user control their results

Zoom:

🛍️ Saks Fifth Avenue lets you create a favorites list for your fave brands (or categories, or sizes), and save as a custom filter. It’s also a great way to encourage account creation to capture first party data ;-)

🛍️ Inside your Saks account, you can save preferred brands, categories and sizes for quick filtering

🛍️ Just apply the Preference filter and bypass scrolling through the 200+ item Designer filter!

🧠 Fashion Nova promotes New In Sale and % off above product results. Kinda genius

Zoom:

🧠 Fashion Nova helps you winnow thousands of sale results with a single click by embedding a Select Your Size filter block. This is especially helpful for clearance sections where variant inventory is very spotty (this GIF may take a sec to load, see static image below for context)

🧠 Alo serves them front-and-center above product listings, with a “Just Added to Sale” section for the sale-stalkers ;-)

🏈 Dick’s Sporting Goods lets you filter by inventory that can reach you (based on your geolocation) by a specific sensitive date — in this case, Christmas Eve

Zoom:

🍷 Wine.com understands Region is an important attribute to its products, and built a custom interactive map that you can toggle from standard text filter. This use case can apply to many industries, so long as it’s relevant to the product!

🐆 J. Lindenberg's Mild-to-Wild slider is an advanced merchandising ninja move 🥷🏿 the slider calls up products tagged with specific attributes. This could have many non-apparel use cases as well (colors: neutral to bright, etc)

😲 This merchant’s clothing and bedding sizes have found their way into the same filter menu…

😲 Oopsie! This needs a dev ticket to investigate why fields are passing through this way…

😲  What does “SELECT A VALUE” mean?

😲 Attributes can easily slide into the wrong category’s filters

🎩 Always put your customer hat on and ask yourself “is this a good experience”?

💡 Avoid sort options that really should be filters, like “Just In” or “On Sale”

🚧 Make sure the tiers you choose map to your customers’ needs. For example, $25 increments are likely too granular for higher end apparel, creating a list of 17 options

💡

It’s wise to display filter options only when matching products exist, most of the time. The exception is for numeric ranges, where missing tiers can make your site look broken. If your filters are set up to only display values with matching products, you can get tiers displaying with obvious gaps:

Depending on your commerce platform’s filtering logic, you may be able to correct this by: ⚡ Displaying all tiers, with no-match options grayed out, or ⚡ Display number of results in (brackets) ⚡ Using an “up to” range instead of tiered values What’s more, you may want to customize tier ranges by Category, depending on product type. For example, an Appliances category should show wider ranges with higher dollar values than small accessories and add-on collections.

This doesn’t just apply to prices, age ranges or any numeric value can display all-funky (although it’s likely that customers are more forgiving for age gaps than pricing)

🤑 If you have country-specific domains or enable localization (with currency conversion), make sure your pricing tiers don’t display with odd values

🤑 They’re even harder to digest in horizontal layout!

❓ Is this inches, millimeters, feet, kilometers?

😬 IKEA breaks convention and puts its sort options to the left of its filters. Users that want to beeline to the Sort and expect it in its typical position won’t see it (and may click All Filters unnecessarily)

😬 Doubly troublesome here is this merchant doesn’t label the tab ‘Sort’ but applies the default value “Newest” to add to the obscurity

🤷🏽 Self explanatory:

😑 Sometimes it’s unavoidable (heck, I can’t control it on my OWN site Ecom Ideas!), but write an SOP for max character length, or fix your implementation if you’re an ecommerce site

😑 OMG, they’re so much harder to read. Who’s underlined links since 2004?

🤔 Some of these things make you go “hmmmmmm…”

😱 mm would be fine

😱 A-Z, Z-A is enough

😱 One CAD is good. (Speaking as a Canadian)

😱 $XX to $XX is all ya need

😱 Ragged alignment runs you ragged