[Design] Redesign collection, product, cart, and search UX

[hta218]

Context

Maison needs production-ready commerce pages so merchants can use it for real sales flows. This task focuses on the shopping journey after the homepage.

Goal

Redesign Maison's core commerce UX: collection, product detail page, cart drawer, and search.

Scope

Design desktop and mobile UX for:

• Collection page layout
• Product grid and product cards
• Filters/sort UX, including mobile filter drawer
• Product card states: sale, sold out, new, hover/secondary image, swatches, quick add if appropriate
• Predictive search/search results UX
• PDP media gallery
• Variant swatches/options
• Size guide entry point
• Sticky add-to-cart
• Product information accordions/metafields
• Recommendations/cross-sell areas
• Cart drawer with upsell/free-shipping/gift-note concepts if appropriate
• Empty/loading/error states where relevant

Deliverables

• Figma designs for collection, PDP, cart drawer, and search
• Desktop and mobile variants
• Interaction notes for filters, swatches, sticky ATC, search, and cart drawer
• Notes for app/integration surfaces such as reviews, wishlist, size guide, subscriptions, and back-in-stock

Non-goals

• Do not implement code in this task.
• Do not design app-specific internals unless needed to reserve the right storefront surface.

Acceptance criteria

• Collection page desktop/mobile designs are complete.
• PDP desktop/mobile designs are complete.
• Cart drawer and search UX are covered.
• Key states and interactions are documented.
• Integration surfaces are clearly marked.
• Figma link and handoff notes are added to this issue.

Metadata

• Theme: Maison
• Track: Theme Refresh
• Priority: High
• Milestone: July-2026