Web Pattern Library

Github Repo


Global styles

Global components

Template Structure

Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides


My Account / History

Static pages

JavaScript Helpers

Web Pattern Library:

Product Filters

Product Filter Feedback

Product Filter Panels


Sizes (1)

1 Selected - Clear

Style (1)

Default State in Filter Dialog

On the Product Grid, filters are displayed differently depending on the viewport size. On small screens, filters are displayed in a dialog. On larger screens, they are displayed in a rail on the left.

You can control the default state of these filter collapsibles in the dialog with the data-product-filter-dialog attribute. Set to collapse or expand to control this behavior.