Website
Puffin & Proof: bakery & café website with shop pages
By Templates.party
Warm café landing page plus product, checkout, order-confirmed and login pages, with a working demo cart.
Pay what you wantLive demo
Product page sections · E-commerce sections
Product Page Blocks
Ten copy-paste product page sections in HTML + Tailwind: variant gallery, size guide, bundle builder, upsell, reviews, FAQ and a sticky add-to-cart with a cart drawer.
View the live demoCheckout coming soon
By Templates.party
What’s inside
Ten blocks, one product page
The parts of a product page that answer questions and lift the order value, as separate blocks you can copy into any HTML or Tailwind store. Each block has its own page and a Copy HTML button, and one small script powers all the interactive ones.
Gallery & buy box
Image gallery with thumbnails, color and size variants, quantity and add to cart.
Open in the demo (opens in a new tab)Size guide
A comparison table with metric and imperial units.
Open in the demo (opens in a new tab)Bundle builder
Pick add-ons and watch the 10% and 15% tier discounts update the total.
Open in the demo (opens in a new tab)Reviews
Rating summary, filters and review cards.
Open in the demo (opens in a new tab)Sticky add-to-cart
A bar that follows the visitor, plus a slide-out cart drawer.
Open in the demo (opens in a new tab)The ten blocks
- Gallery + variant buy box
- Trust bar
- Feature highlights
- Lifestyle story
- Size guide (metric / imperial)
- Bundle builder
- Frequently bought together
- Reviews
- FAQ
- Sticky add-to-cart + cart drawer
Built in
- Each block on its own page and a Copy HTML button on the demo
- One dependency-free script (blocks.js) for every interactive block
- Cart drawer with quantities and totals; checkout is a demo hook you connect to your store
- Accessible gallery, tabs, accordion and dialog with keyboard support
- Animations are motion-safe, so they switch off with “reduce motion”
- Self-hosted fonts and compiled Tailwind: no CDN, no framework
Palette & type
- Shell
#F6F2EC - Ink
#1C2420 - Tide
#2E5B4C - Clay
#C2633B - Sand
#D8CBB3 - Star
#E2A23B
Manrope + Instrument Serif (self-hosted, OFL)
Colors and fonts live in tailwind.config.cjs. Change them, run npm run css, done.
In the ZIP
- index.html: all 10 blocks on one page
- blocks/: each block on its own page, ready to copy
- assets/: compiled CSS, blocks.js, product images and fonts
- src/ and tailwind.config.cjs to copy into your own config
- README with block-by-block notes and how to connect checkout
- LICENSE: commercial use, unlimited projects, client work
A fictional business
Tidewell, its bottles, prices and reviews are fictional placeholders, and the product photos are AI-generated. The cart takes no payment. Replace them with your own products and connect your checkout before you sell anything.
License
Pay what you want, once: no subscription. Use it for your own business or for client work, on unlimited projects. You can’t resell or redistribute it as a template. Full terms.
MCP access included
Every order comes with a license key, whatever amount you choose. The key unlocks MCP access, so AI assistants like Claude, ChatGPT or Cursor can read, customize and download the templates you own.
Keep exploring
Browse all More templates
Website
The Velvet Radish: dark restaurant & bistro one-pager
By Templates.party
Dark, editorial one-page site: tabbed menu, chef story, private dining and a reservation form.
Pay what you wantLive demo
Presentation
Aurora: airy startup pitch deck (16:9, 12 slides)
By Templates.party
Airy 12-slide investor deck with aurora glows: problem, solution, market, model, traction, team and the ask.
Pay what you wantLive demo
Social media
Sunwave: warm social media kit (posts, stories, carousels)
By Templates.party
Twelve warm designs for Instagram, TikTok and LinkedIn as layered SVG plus ready-to-post PNG, with fonts.
Pay what you wantLive demo
Ready to bring your ideas to life?
Every niche is on the guest list. Find the template that fits your next project.