On mobile, move collection filters to a slide-in drawer. Filter button with count badge, clear all, sticky apply.
Want more control? See the expanded prompt ›
On mobile, replace the inline collection filters with a 'Filter' button that opens a slide-in drawer from the right. Show applied-count badge on the button, 'Clear all' link inside, and a sticky 'Apply' CTA at the bottom.
- Filter button shows applied count as a badge.
- Slide-in drawer from the right edge.
- Sticky Apply CTA at the bottom of the drawer.
- Clear all returns to unfiltered state.
What you're trying to do
Inline mobile filters eat scroll real estate and force shoppers to scan-and-filter at the same time. An off-canvas drawer lets them browse, decide to filter, open a focused filter screen, and emerge with results: three discrete moves, each easier than the merged version.
Things to watch out for
- Touch targets: filter chips are sized for thumb taps.
- Drawer height: full height by default, or a bottom sheet if you prefer.
- Scroll lock: the page behind stops scrolling while the drawer is open.
- Back gesture: the drawer closes on a swipe right or the system back gesture.
How Fudge does it
Fudge duplicates your live theme into a draft, builds the section as an editable Shopify section with the placement and behavior your prompt requires, and wires it to your real product data and brand styling. Everything starts in draft — preview on your store, tweak via the Theme Editor, and publish only when you're ready. Your live store stays untouched.
Why mobile collection filters belong in a drawer
Inline filters work on desktop where there’s space. On mobile, they crush the product grid and create vertical scroll fatigue. The off-canvas drawer pattern — Filter button → slide-in drawer → apply → close — gives mobile shoppers the full grid width back.
When this is worth building
Build the off-canvas filters for any store with mobile collection traffic and meaningful filter usage. Skip for stores where shoppers never filter.
What makes one great
- Filter button with applied-count badge — shows how many filters are active.
- Slide-in from the right — standard mobile pattern.
- ‘Clear all’ link inside — reset escape hatch.
- Sticky ‘Apply’ CTA at bottom — confirms changes.
Pair this with tag-based filters and sort and mobile UX audit.
Fudge builds this as part of its merchandising work.