Leporello - Fold-Out Bootstrap E-commerce Template for Small Shops
1 of 18
Loading screenshot

A one-page, front-end e-commerce template that opens like an accordion book: visitors leaf through the collection, unfold a product to see more photos and its details, then unfold the bag, shipping, payment and confirmation steps without ever leaving the fold-out.

Who it is for

Leporello is made for small shops: an independent brand, a designer or a maker presenting a short collection, a capsule or a seasonal drop. Each product gets its own panel in the fold-out, which works best with a small number of products (the demo shows seven).

It is not designed for large stores with many products: there are no category or collection pages, no search, filters, sorting or pagination.

What makes it different

The whole store lives in a single 3D fold-out made of colored panels. An "Unfold" button reveals extra photo panels and a details panel right next to a product, and folds them back with a short glide. The bag is a panel too, and the checkout steps unfold one after another once the visitor clicks "Checkout".

Included pages

Page Content
Home (fold-out) Cover, product panels with unfolding photos and details, bag, shipping, payment, confirmation
Legal notice Publisher, host, intellectual property, sales terms, personal data, local storage, credits (sample content)
404 Error page

Features

  • Reusable fold-out component: drag and swipe from anywhere, mouse wheel, trackpad, arrow keys, bottom navigation bar, click on folded panels
  • Panels can be hidden and revealed at runtime without the view jumping
  • Bag with quantities and a free-shipping progress bar, stored in the browser
  • Shipping and payment forms with validation, delivery options and order confirmation
  • Product data in a single JavaScript file
  • Generated placeholder images with the right proportions; demo mode for preview photos
  • Respects the "reduce motion" system setting
  • Editable SCSS sources built on Bootstrap 5.3 variables, no JavaScript framework

Technical details

  • Bootstrap 5.3.8 (Sass sources), Sass (SCSS), plain JavaScript ES modules
  • Vite 8 build with HTML partials; production build included in dist/
  • Requires Node.js 20.19+ or 22.12+ to edit and rebuild
  • Fonts: Gloock and Schibsted Grotesk from Google Fonts (SIL Open Font License)

Limitations

  • Made for a small catalogue: all products sit in one fold-out that visitors browse panel by panel. Large catalogues, product categories, search and filters are not covered.
  • Front end only: the bag and checkout are a demonstration. No order is created and no payment data is sent; connect your own e-commerce back end to sell.
  • The built pages must be served by a web server (they use JavaScript modules, which browsers do not run from file://).

Preview content

The photos shown in the live preview and screenshots come from Pexels and are not included in the download: the package uses generated placeholder images. The PLI brand, products, prices, texts and legal details are fictional sample content.

Find more items like this