Coffee PDP - Origin Story Template

A product page for specialty roasters who sell the story as much as the bag. Five square panes of cream paper, burnt-orange accents, and Fraunces serif headlines built around the fictional Norte roastery and its Huila Lote 7 - a washed Colombian single origin at $19, with a NORTE roundel chip holding the top corner of every pane. The sequence covers exactly what a coffee-literate buyer scans a label for: variety and process, tasting notes, farm and altitude, a brew recipe, and the subscribe line.

#What Makes This Template Stand Out

The altitude gets the spotlight it deserves. Pane 3 fills the frame with a misty Colombian hillside, then lays "Finca La Ladera, Huila" and a 200px "1,750 m" over the lower third - the numeral counting up with a number-roll above the mono label "ABOVE SEA LEVEL". Every roaster prints altitude on the bag; this template makes it the single fact the whole pane exists for.

Tasting notes become objects, not adjectives. Pane 2 splits the frame - an oily bean macro on the left, and on the right "Tastes like" in Fraunces over three kraft chips that pop in staggered: Cherry, Cacao, Panela. The same chips return miniature on the closing pane, so the flavor promise is the last thing on screen next to the CTA.

The brew card treats the recipe like a spec sheet. On a kraft panel beside the bag, "RECIPE · V60" heads four mono-labeled figures that roll in - 18 g dose in, 290 g water out, 1:16 ratio, 2:45 brew time - with a burnt-orange chip declaring "Roasted Tuesdays." It is the pane that converts a browser into a regular: proof the roaster has opinions about how their coffee should be made, and a freshness cadence worth subscribing to.

• Warm harvest palette: cream paper field, burnt-orange accents, kraft chips, Fraunces serif headlines
• Kraft-bag hero with stacked "Huila / Lote 7" name, "WASHED · CATURRA · 250 G" mono meta, and a $19 price chip
• Tasting-notes pane pairing an oily bean macro with staggered Cherry, Cacao, and Panela chips
• Full-bleed farm landscape with a 200px "1,750 m" altitude numeral that counts up
• V60 brew recipe card with four rolling figures and a "Roasted Tuesdays" freshness chip
• 5-pane 1:1 format with steady fades and slow photo zooms, built for PDP embeds and square social

#Who Should Use This Template

• Specialty roasters and single-origin programs whose price needs the farm, the altitude, and the process to make sense. The template puts all three on screen in order.
• Provenance food and drink brands - wine, chocolate, olive oil, tea - that sell where a thing comes from. Every pane adapts by swapping one stat and one landscape.
• Ecommerce teams replacing static bag photos with a gallery that answers the label-reader's questions before they scroll to reviews. Export to code and mount it in the PDP media slot.
• Subscription coffee businesses for whom the "Roasted Tuesdays" cadence and the "Subscribe & save 15%" close are the actual business model, not an afterthought.

#Best Use Cases

#Product Detail Page Galleries

Export to HTML, React, Vue, or Svelte and embed the gallery where the product photos sit. The square format works in desktop and mobile PDP layouts alike, the "Get the bag - $19" pill hands off to your cart button, and the subscribe line links straight to your subscription flow. One embed replaces the photo stack, the origin blurb, and the brew guide tab.

#New Lot and Seasonal Drops

Single-origin lots rotate, and this template is built for the cadence: duplicate the project, swap the bag and farm photos, update the lot name, notes, and altitude, and the new drop page is live in an afternoon. Publish as a hosted PaneFlow link to announce the lot before it lands in the store.

#Social Announcements and Cafe Screens

The 1:1 format exports to video or image sequence for Instagram without recomposition - the origin pane with its rolling altitude is the scroll-stopper, and the tasting-note chips make the carousel's second slide. The same video export loops cleanly on a cafe counter screen, doing quiet menu-board work between customers.

#How to Customize This Template

1. Open PaneFlow and select "Coffee PDP - Origin Story" from the template gallery
2. Replace the hero bag photo, then edit the stacked "Huila / Lote 7" name, the "WASHED · CATURRA · 250 G" meta, and the "$19" chip
3. Update the persistent "NORTE" roundel chip with your roastery name
4. Swap the bean macro on pane 2 and rewrite the three tasting chips - Cherry, Cacao, Panela - with your lot's notes
5. Replace the farm landscape on pane 3, then edit "Finca La Ladera, Huila" and the "1,750 m" altitude figure
6. Update the brew card on pane 4 - dose, water, ratio, time - and the "Roasted Tuesdays" chip to your roast schedule
7. Swap the top-down bag-and-cups photo on the close, then edit the CTA pill and the "Subscribe & save 15%" line
8. Export to HTML, React, Vue, or Svelte for the product page embed, or to video for Instagram and cafe screens

#Related Templates

• Cafe & Coffee Brand - the brand-level slideshow to this template's single-bag product page
• Skincare PDP - Ingredients - the same formula-as-evidence structure for the beauty shelf
• Furniture PDP - Dimensions - another PDP where one technical pane does the convincing
• Product Page Gallery - E-Commerce - the general-purpose PDP gallery for less story-driven products

#Related Resources

• PaneFlow for Ecommerce - product galleries, lookbooks, and PDP embeds for teams that sell things
• PaneFlow for Content Creators - story-led product content for feeds and channels
• PaneFlow vs Canva - how PaneFlow goes beyond Canva for animated, code-exportable product pages