[Dev] Implement advanced commerce UX

[hta218]

Context

Naturélle needs production-ready shopping flows beyond the homepage.

Goal

Implement the approved collection, PDP, cart, and search UX improvements for Naturélle.

Scope

• Product cards: badges, secondary image, swatches, quick add if approved, sale/sold-out states
• Collection filters/sort UX, including mobile drawer
• Predictive search/search results polish
• PDP gallery and product information layout
• Variant swatches/options UX
• Sticky add-to-cart
• Accordions/metafield-driven product info
• Recommendations/cross-sell areas
• Cart drawer polish and selected advanced cart features
• Empty/loading/error states where relevant

Blocked by

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

Acceptance criteria

• Collection, PDP, cart, and search match approved design direction.
• Core commerce flows work on desktop and mobile.
• Edge states are handled gracefully.
• Weaverse schemas/settings are clean where sections are configurable.
• Build/typecheck/lint pass.
• QA notes, screenshots, or preview URL are added.

Verification

Run and report actual output for build/typecheck/lint and manually verify product browse → add to cart flow.

Metadata

• Theme: Naturélle
• Track: Theme Refresh
• Priority: High
• Milestone: July-2026