E-commerce guidelines

Filter list

The filter list is a fundamental component of the e-commerce experience, enabling users to refine their search and quickly find products that meet their specific preferences.

Usage

Start by organizing filters on the left hand side into clear categories such as range, sizes, and other technical information, using collapsible sections or checkboxes for easy access. Ensure that each filter option is clearly labeled with simple, descriptive language and that multiple filters can be selected simultaneously to allow for precise customization. Use sliders for parameters like price and additional toggle switches where appropriate.

The filter interface should be responsive, adapting smoothly to different screen sizes and devices, with large, clickable areas for ease of use on mobile.

Visual cues like selected filters with distinct highlighting or checkmarks are provided so users can easily see their choices. A “Clear all” button allows users to quickly clear selections, and display the number of results remaining as filters are applied to keep users informed of how their options are narrowing.

On the right hand side of the filter list are product cards followed by a pagination.

Overall, the filter list page should enhance the shopping experience by making it easy, efficient, and visually clear for users to find exactly what they’re looking for.

Template for a e-commerce filter list with a 3-column grid