Implement subscriptions demo for Weaverse Pilot theme

Why

Subscription-based products are increasingly popular among merchants aiming to boost customer lifetime value. Shopify's official Subscriptions app and Hydrogen cookbook provide a structured approach to implementing this feature. Integrating a subscriptions demo into the Pilot theme will showcase our capability to support recurring purchase models.

What (Acceptance Criteria)

• Dev: Install the Shopify Subscriptions app on the demo store and configure at least one product with a selling plan group (e.g., "Monthly Coffee Subscription").
• Dev: Implement a SellingPlanSelector component on the Product Detail Page (PDP) to allow customers to choose between one-time purchases and subscription options.
• Dev: Enhance GraphQL queries to fetch necessary selling plan data, including price adjustments and delivery intervals.
• Dev: Update the cart to display subscription details for applicable line items, ensuring clarity on recurring charges.
• Dev: Create a "Manage Subscriptions" page where customers can view and cancel their active subscriptions.
• Design: Provide Figma mocks (desktop and mobile) for the subscription selector on the PDP, cart line items with subscription details, and the "Manage Subscriptions" page, adhering to Pilot's design tokens.
• Ensure all UI components meet WCAG AA color contrast standards and function correctly in both light and dark modes.
• Verify that the PDP maintains a Cumulative Layout Shift (CLS) score below 0.1 after rendering subscription components (use Lighthouse for assessment).

Implementation Notes

• Follow the Shopify Hydrogen Subscriptions cookbook: https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/subscriptions
• Place new components under /src/components/subscriptions/ and ensure they are tree-shakable.
• Utilize existing HydrogenProvider context for cart management; no additional global state management is required.
• Handle edge cases where products have both subscription and one-time purchase options, ensuring the UI reflects available choices accurately.
• Use Cursor with Sonet 4 Max for code generation and refactoring to enhance development efficiency.
• Safelist any new CSS classes related to subscriptions in Tailwind v4 to prevent them from being purged.
• Emit a subscription_added_to_cart analytics event to align with Pilot's tracking standards.
• Conduct QA testing on the latest versions of Chrome, Safari, Firefox, iOS Safari, and Android Chrome.

Checklist

• Tests added/updated
• Documentation updated (/docs/subscriptions-demo.md)
• Screenshots added (if UI)
• Added to project board/milestone

Risk: Medium – relies on the stability of the new Subscriptions API and accurate handling of recurring billing logic.
Effort: M

Assignee: @hta218 @imsinhp
Reviewer: @paul-phan

Related: Shopify Subscriptions cookbook: https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/subscriptions • Pilot repository: https://github.com/Weaverse/pilot