Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Product Filters

Product Filter Feedback

Product Filter Panels

Category

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.

Style