Overlay Filter Drawer

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Overview

The Filter Drawer is a slide-out panel on collection pages that appears when customers tap the Filter button on mobile or tablet (when the filter sidebar is hidden). It contains product filters, sort options, and layout toggles. It slides in from the left with a backdrop.

Where It Appears

Collection page — Main collection product grid section
Mobile/tablet — When filters or sorting are enabled but the sidebar is hidden (e.g. stacked layout)
Does not appear when sidebar is visible (e.g. desktop with sidebar layout)

Files

File	Purpose
`sections/main-collection-product-grid.liquid`	Renders filter drawer; filter drawer trigger
`snippets/collection-filter-drawer.liquid`	Drawer panel content (filters, sort, layout)
`assets/main-collection-product-grid.js`	Opens/closes drawer, focus trap, Escape

Structure

Filter Drawer (data-filter-drawer, role="dialog", aria-modal="true")
├── Backdrop (data-filter-drawer-close) — click to close
└── Panel (mcp__drawer-panel)
    ├── Filter content (from collection-filter-drawer snippet)
    │   ├── Sort options
    │   ├── Filter groups (price, color, etc.)
    │   └── Layout switch (grid/list)
    └── Close button (data-filter-drawer-close)

Data Attributes

Attribute	Element	Purpose
`data-filter-drawer`	Drawer root	Identifies filter drawer
`data-filter-drawer-trigger`	"Filter" button	Opens drawer
`data-filter-drawer-close`	Backdrop, close button	Closes drawer

When It Shows

Condition	Filter drawer visible
Filters or sorting enabled	Yes (if sidebar hidden)
Sidebar layout (desktop)	No — uses sidebar instead
Stacked layout (mobile/tablet)	Yes — uses drawer

Drawer Content

From collection-filter-drawer.liquid:

Sort — Price, newest, etc.
Filters — Store filter groups (e.g. product type, vendor, price)
Layout switch — Grid vs list (if enabled)
Apply / Clear — Apply filters, clear all

Behavior

Opening

Customer taps "Filter" button (data-filter-drawer-trigger)
Drawer slides in from left
Backdrop appears
Focus trapped in drawer
aria-hidden="false", aria-expanded="true" on trigger

Closing

Backdrop click — closes
Close button — closes
Escape key — closes
Applying filters — may close (or keep open depending on theme)

Applying Filters

Selecting filters updates the collection URL (query params)
Page may reload or use AJAX to refresh products
Drawer closes after apply (theme-dependent)

Section Settings

Setting	Effect
Enable filters	Shows filter options
Enable sorting	Shows sort dropdown
Filter layout	Sidebar vs drawer; when sidebar is hidden, drawer is used

Accessibility

role="dialog", aria-modal="true", aria-label="Filter products"
Focus trap when open
Escape closes
Focus returns to trigger when closed

Multipurpose theme documentation