Boutique Business Booking Website Template
Shelf is a bento grid landing page built for boutique bookstores that sell hand-picked first editions and curated subscription boxes. It guides design-conscious visitors from browsing to buying through three tiered bundle offers, an interactive Before/After reveal, and a taste profiler that captures emails and reading preferences for follow-up conversion.
by Rocket studio
Quick summary
Shelf is a single-page bento grid landing page designed for boutique bookstores. It presents three curated book box tiers, a Before/After reveal comparing generic book orders to the Shelf experience, and a taste profiler email capture. The template is built to move hesitant browsers toward a subscription upgrade through editorial-quality visuals and intentional copy.
Who this template is for
This template fits independent booksellers and curated retail brands who want a landing page that feels as considered as the products they sell. It is not a general-purpose storefront. It is built for sellers whose value lives in curation, not convenience.
- Boutique bookstore owners selling hand-picked first editions or subscription boxes
- Gift-brand founders and book club hosts offering curated reading experiences
- Creative entrepreneurs launching a curated retail concept with a strong visual identity
What problem this template solves
Most book retailers look the same online. The packaging is algorithmic, the copy is generic, and nothing communicates the physical pleasure of a well-chosen book. Shelf fixes that by making the tactile, editorial quality of the product visible before the buyer commits.
- Visitors cannot tell what makes a curated bookstore different from a large retailer
- Bundle tiers are hard to communicate without a visual comparison structure
- Hesitant buyers leave without any path to re-engagement or a lower-commitment first step
What you get with this template
You get a complete, section-led bento grid landing page with every layout and interaction component already structured. The design system, copy structure, and conversion logic are all built in from the start.
- A three-tier bundle bento hero with cinematic flat-lay card layouts and saffron hover states
- A Before/After reveal section using flip tiles to contrast generic orders with the Shelf experience
- A tier comparison upgrade grid, a curator voice section, a taste profiler email capture, and a styled footer
Feature list
This template includes six purpose-built components. Each one serves a specific role in the visitor journey from discovery to purchase.
Three-Tier Bundle Bento Hero
The header presents three curated book box options as staggered bento tiles. Each tile shows a styled overhead flat-lay with real spines, linen wrapping, and a handwritten recommendation card. A single price tag anchors each tile like a gallery label. Saffron hover states activate on interaction.
Before/After Flip Reveal
Bento flip tiles contrast what a standard online book order looks and feels like against what arrives from Shelf. The reveal shows deckle-edged pages, a wax-sealed curator envelope, and a custom ex libris bookplate. Scroll-triggered GSAP animations drive the transition as visitors move down the page.
Upsell Upgrade Grid
The tier comparison section lands visitors on the mid-tier "Deep Shelf" box by default. A violet "Upgrade My Shelf" call-to-action button sits at the visual intersection of all three tiers. A comparison row lists exactly what each tier adds, including personalized curator notes, signed editions, and quarterly literary prints.
Taste Profiler Email Capture
A secondary conversion path captures visitors who are not yet ready to commit to a box. The taste profiler form collects an email address alongside reading preferences: fiction or nonfiction, mood, and favorite cover era. This data supports a follow-up subscription upgrade email sent three days after the first single-book purchase.
Curator Voice Section
An asymmetric split section uses a handwritten note aesthetic to give the curator a distinct editorial voice. This section builds trust by making the selection process feel personal rather than automated.
Scroll Animation System
GSAP powers scroll reveals, bento card flips, staggered card entry, and magnetic call-to-action buttons throughout the page. The animation layer reinforces the premium, tactile identity of the brand without adding visual noise.
Page sections overview
| Section | Purpose |
|---|---|
| Bundle Bento Hero | Introduce three curated box tiers with flat-lay visuals and prices |
| Before/After Reveal | Show the contrast between generic orders and the Shelf experience |
| Tier Comparison Grid | Display what each tier adds and anchor the upgrade call to action |
| Curator Voice Split | Build trust through a personal, editorial-style curator introduction |
| Taste Profiler Capture | Collect email and reading preferences for lower-commitment entry |
| Branded Footer | Close with logo, tagline, and navigation links in a split layout |
Design & branding system
The visual identity follows a Luxe Minimal theme with a Dopamine Pop color palette. The result is a restrained, editorial base that comes alive with deliberate moments of color. Typography pairs Fraunces serif headings with DM Sans body text for a tone that feels both literary and modern.
- Warm ivory (#FAF7F2) background, deep espresso (#1A1410) body text, electric saffron (#FF9F1C) on featured cards and hover states
- Bookish violet (#7B2D8E) reserved for upgrade badges and primary call-to-action buttons
- Fraunces for display headings, DM Sans for all body and interface text
Mobile & speed optimization
The template is designed desktop-first, with the bento grid as the primary visual experience. On smaller screens, the layout transitions to a responsive mobile stack so every section remains readable and functional.
- Interactive bento components use client-side rendering; static sections use server components for faster initial load
- Bento grid columns collapse into a vertical stack on mobile without breaking the visual hierarchy
- Flip cards and the taste profiler form remain fully operable on touch devices
How this template helps you convert
Every section of this template plays a defined role in moving a visitor closer to a purchase or a follow-up touchpoint. The structure is built around a clear upgrade path, not just a static product display.
- Visitors land with the mid-tier "Deep Shelf" box already selected, reducing decision friction and anchoring the upgrade as the natural next step.
- The Before/After reveal makes the product's physical quality visible before the buyer pays, addressing the core objection that online book orders feel impersonal.
- The taste profiler captures hesitant visitors with a low-commitment email entry, then triggers a subscription upgrade email three days after their first single-book purchase.
Other information about this template
This template is built for a specific kind of boutique e-commerce brand: one where the experience of receiving the product is as important as the product itself. It is not a general-purpose shop template.
- Social proof is built into the layout with curator credentials, reader quotes tied to specific titles, and a live-count line reading "342 shelves built this season"
- The footer follows a split layout pattern with the logo and tagline on the left and navigation links on the right
- The page is localized for English-language audiences using United States dollars and United States date formatting
- The template is suited for brands launching a curated book subscription, a one-time gift box offering, or a seasonal reading collection




Theme
Luxe Minimal
Creative direction
Before/After Reveal
Color system
Dopamine Pop
Style
Bento Grid
Direction
Upsell/Upgrade
Page Sections
Three-tier Bundle Bento Hero
Before/after Flip Reveal Tiles
Upsell Upgrade Comparison Grid
Taste Profiler Email Capture
Curator Voice Section
GSAP Scroll Animation System
Related questions
Can I use this template for a subscription box that is not books?
Does the taste profiler form connect to an email platform automatically?
Can I change the three bundle tiers to match my own pricing?
Is this template suitable for a gift-giving landing page?
How does the Before/After reveal work visually?