# Roast Module Implementation Context

This note captures the current product-page and email context for implementing Glass roast profile modules from the Roast Cards JSON metafield.

## Sources

- Email baseline: `shopify/notifications/shipping-confirmation.current.liquid`
- Email notes: `shopify/notifications/README.md`
- Roast Studio JSON reference: `roast-card-json-reference.html`
- Roast Studio tool: `roast-studio.html`
- Roast Studio email preview: open a product with a valid roast profile, then use `Shipping email preview` below the graph. The preview generates static email-safe HTML from the same customer-facing JSON data.
- Figma module: [Roasting and Flavour, node 4451:5221](https://www.figma.com/design/JbSAONlK70h3P7LTBzUwV4/Roasting-and-Flavour?node-id=4451-5221&t=O7diOWU06h6RIfkn-4)
- Live PDP mock reference: [TNT Coffee Lab - Auromar Estate - Geisha](https://glasscoffee.co.uk/products/tnt-coffee-lab-auromar-estate-geisha)

## Product Page Target

The live PDP already has these product information sections: `TASTING NOTES`, `CHARACTERISTICS`, `FLAVOUR PROFILE`, `ROAST PROFILE`, and `RECIPE`. Treat the roast graph as an enhancement or replacement for the existing `ROAST PROFILE` area, not as a new standalone page section.

The product page can render the full roast profile from the Shopify JSON metafield:

- metafield: `custom.roast_cards`
- expected value shape: `{ "version": 1, "cards": { "filter": {}, "espresso": {} } }`
- product identity should come from Shopify's product object, not from the JSON value
- card selection should follow the product context when known, then fall back to the first available card

The Figma source includes desktop, tablet, and mobile layouts under `Roast module - As profile, v1 17.06.26`. The product-page implementation should follow that responsive structure: product/title context first, roast copy and colour when present, the graph as the main visual object, then target, key events, roast phases, and batch size.

## Email Target

The saved shipping confirmation template renders fulfilled line items with `fulfillment.fulfillment_line_items`. The roast email module should be inserted per shipped product, after the product line content.

Email implementation should be deliberately simpler than the product page:

- use static HTML tables and inline-safe styling
- do not require JavaScript, canvas, or an interactive SVG
- prefer a static roast image if a hosted image URL exists later
- otherwise show a compact summary: style, end time, end temperature, first crack when available, and a link to the product page
- omit the module entirely when no roast-card JSON is available

The Roast Studio preview is a handoff aid, not a deployed notification template. `Copy email HTML` copies the roast module snippet for frontend testing, while `Download email HTML` exports a complete mock shipping email around the current product.

Open verification item: Shopify notification Liquid must be tested in the admin preview to confirm whether `line.line_item.product.metafields.custom.roast_cards.value` is available. If it is not available, the email should fall back to a product-page link or a precomputed/static asset strategy.

## JSON Boundary

Keep the customer-facing Roast Cards JSON clean and paste-ready for Shopify Admin. Do not add email, product-page, source, draft, preview, image-export, or rendering metadata to the JSON value. Rendering decisions belong in the product page, email template, or future theme/app code.