Widget Redesign — Liquid Glass
The chosen visual direction for the storefront widget: light Liquid Glass — frosted translucent
panels, specular edges, brand purple (#7C3AED) for primary actions, the photo as the refractive backdrop.
The designs below are organised by customer journey — each journey is the real sequence of widget
states a shopper moves through, derived 1:1 from the Widget States ground truth. One
shared glass.css defines the material + every component, so a change to a component propagates across
all journeys (single source of truth, same as the real widget).
Click any image to open it full-size in a new tab. These are static mockups (HTML/CSS in
shopify-app/playwright-debug/mockups/journeys/). Implementation is CSS-only, storybook-verified,
deployed API-first → then the widget (backward-compat is law).
Customer journeys
1 · First try-on
The core flow: a shopper opens the widget for the first time, consents, uploads or shoots a photo, previews it, generates, sees the result, and adds the product to cart.
2 · Complete the look (bundle upsell)
After a result we suggest a complementary product, the shopper tries both together, and adds both with a bundle discount.
3 · My Try-Ons (gallery)
A returning shopper with past try-ons opens the “My Try-Ons” gallery and compares two.
4 · Similar products (cross-sell)
After a result we surface similar products; the shopper tries a different one.
5 · Limit reached (email-gate)
Free try-ons exhausted → unlock more via email capture (no payment in the widget).
6 · Returning shopper (reuse)
Comes back, sees “Recent” photos, re-tries in seconds (with an X to delete a recent photo).
7 · Edge cases
The crucial non-happy paths: camera permission denied, generation error, and a “friend shared” entry.
Earlier exploration (superseded)
Kept for reference only. These were made before the real-state capture, so some screens do not match the live widget 1:1 (e.g. a “buy tries” screen that does not exist). Use the journeys above instead.
