Popovers and drawers

Everything that opens over the page shares one look: the cart drawer, the menu and search panel, the sort menus, the filter drawer on smaller screens, the newsletter popup, and the product page’s dialogs such as the size guide, the Pop-up block, Share and Ask a question.

Settings

• Color scheme. The scheme every popover and drawer uses. Default: scheme-1.
• Corner radius. Range: 0 to 16 px. Default: 8 px.
• Border thickness. Range: 0 to 10 px. Default: 0 px.
• Drop shadow. Default: on.

On desktop the collection filters are a sidebar on the page rather than a drawer, so they follow the section’s own color scheme. Below 990 px they become a drawer and take this scheme.

Tips

• A contrasting scheme makes drawers feel like a layer. A slightly darker or tinted scheme separates the cart drawer from the page behind it without needing a heavy shadow.
• Shadow or border, rarely both. With the drop shadow on, a border is usually unnecessary. Turn the shadow off if you prefer a flat look, and give popovers a 1 px border instead so their edge stays clear.
• Check the scheme’s contrast inside the drawer. The cart drawer holds prices, buttons and fields, so every pair from Colors applies there too.