Distill is a single-page aromatherapy landing page template built for small-batch essential oil studios. It uses a modular card grid to sell daily rituals rather than plain products. A cinematic portrait hero, moment-named product cards, a sliding side-cart, and a three-step custom blend quiz guide visitors from first breath to completed purchase.
by Rocket studio
Loading preview…
Quick summary
Distill is a luxury aromatherapy landing page template designed for small-batch essential oil studios. Cards represent daily moments rather than product SKUs. A staggered bento grid, side-cart, and custom blend quiz work together to move wellness-minded buyers from curiosity to purchase without ever leaving the page.
Who this template is for
This template is built for boutique wellness brands that sell through story and sensory feeling, not ingredient lists. If your studio sources traceable, single-origin oils and wants to connect with discerning buyers, this layout reflects that standard.
Aromatherapy and essential oil studios selling directly to consumers
Yoga instructors, acupuncturists, and wellness practitioners who build signature product protocols
Self-care brands targeting restless sleepers and holistic wellness seekers
What problem this template solves
Most product pages present a catalog. Buyers scroll past rows of bottles without feeling anything. For a small-batch studio built on provenance and ritual, that format is a mismatch. This template replaces the shelf-scan experience with something slower, more intentional, and far more persuasive.
Generic grid layouts flatten the sensory story that premium oils depend on to justify price
Visitors leave without understanding what makes single-origin, traceable oils worth choosing
No obvious path exists for wellness practitioners who want a personalized blend, not a browsable shelf
What you get with this template
You get a fully structured, single-page layout with every section built and ready to customize. The design system, card behavior, and conversion components are all defined in the template so you can focus on your copy and photography rather than building from scratch.
A cinematic portrait hero section, a staggered moment-card grid, a provenance strip, a craft section, a testimonials rail, and a linear footer
A sliding side-cart triggered by "Add to Ritual" card buttons and a sticky bottom bar with a free-shipping prompt
Theme
Organic Flow
Creative direction
Seasonal/Moment
Color system
Plum Executive
Style
Card Grid (Modular)
Direction
Direct Sales
Page Sections
Moment-based Bento Card Grid
Sliding Side-cart and Sticky Bar
Three-step Custom Blend Quiz Modal
Cinematic Portrait Hero Section
Provenance Origin Strip
Practitioner Testimonials Rail
Related questions
Can I rename the moment cards to match my own product names?
Does the custom blend quiz require a third-party service to function?
Is this template suitable for a studio that sells to both retail customers and professional practitioners?
Can I adjust the number of moment cards in the bento grid?
What typography and color choices does the template use by default?
A three-step custom blend quiz modal that outputs a personalized product recommendation with a one-tap purchase path
Feature list
This template delivers specific, prompt-grounded components across layout, interactivity, and visual design.
Moment-Based Card Grid
Cards in the bento grid are named after daily moments, such as "The 6 AM Unfog" or "Saturday Soak," rather than product names. Each card pairs a curated oil or blend with a one-line ritual instruction. Cards stagger in size so the grid feels like a market stall, not a spreadsheet.
Sliding Side-Cart with Sticky Bar
Every card carries an "Add to Ritual" call-to-action button. Tapping it adds the item to a slide-in side-cart without navigating away from the page. A sticky bottom bar tallies the ritual in progress and surfaces a soft free-shipping prompt once the threshold is met.
Three-Step Custom Blend Quiz
A "Build a Custom Blend" button in the header opens a modal quiz. Buyers choose their moment, their mood, and their preferred format, such as roll-on, dropper, or diffuser blend. The quiz outputs a personalized product recommendation with a one-tap purchase option.
Provenance Origin Strip
A dedicated section traces each oil from field to still to bottle. Animated counter stats reinforce the small-batch and single-origin story. This section provides the trust signal that premium pricing needs to land credibly.
Cinematic Portrait Hero
The hero uses a tall, narrow vertical frame centered on a single amber bottle with one luminous drop suspended mid-fall. Thin, tracked-out serif headline type sits beside the image. The composition relies on negative space and warm side lighting to set tone before a word is read.
Practitioner Testimonials Rail
A rotated card rail displays testimonials from yoga instructors, acupuncturists, and real wellness practitioners. Role and specialty labels add credibility. This section reinforces that the product earns professional trust, not just personal preference.
Page sections overview
Section
Purpose
Hero Portrait
Set cinematic tone and headline
Provenance Origin Strip
Prove field-to-bottle traceability
Moment Card Grid
Drive "Add to Ritual" conversions
Craft Split Section
Show distillation process and story
Testimonials Rail
Build practitioner-level social proof
Linear Footer
Close with brand and navigation links
Design & branding system
The visual identity follows an Organic Flow theme built on the Plum Executive color system. Every color has a defined role, so the palette reads as intentional and luxurious rather than decorative.
Deep plum (#3C1642) anchors the header and footer; warm parchment (#F4EDE4) breathes across card backgrounds; dried lavender stem (#7B6D8D) handles all body text
Burnished gold (#C49B5F) appears exclusively on prices, call-to-action buttons, and hover states, so every golden moment signals either money or action
Typography pairs Fraunces serif display type with DM Sans body text; grain overlay and spotlight hover animations reinforce the dark apothecary luxury aesthetic
Mobile & speed optimization
The template is designed desktop-first with a deliberate mobile stack that preserves the luxury feel at every breakpoint. Card proportions and typographic scale adapt so the sensory atmosphere carries through on smaller screens.
The staggered bento grid collapses into a clean vertical stack on mobile without losing the moment-based card identity
Static sections use server components while interactive elements, including the cart and quiz modal, run as client components for responsive feel
Grain overlay, staggered reveal animations, and the sticky ritual bar all remain active across device sizes
How this template helps you convert
The page is built to earn the sale by selling the feeling first and revealing the bottle second. Every conversion element appears only after context and desire have been established.
The moment-card grid and ritual language lower the perceived barrier to purchase by framing each product as a daily self-care habit rather than a luxury item with a price tag.
The side-cart and sticky bar keep the purchase path open at all times without interrupting the browsing experience, reducing the friction between desire and checkout.
The custom blend quiz creates a personalized path for buyers who are not sure where to start, moving them from uncertainty to a confident one-tap purchase recommendation.
Other information about this template
This section covers additional practical details that help you evaluate whether this template fits your studio and your workflow.
The template is built for direct-to-consumer aromatherapy and wellness e-commerce with USD pricing and English (US) copy as the default localization
The Fraunces and DM Sans typefaces are open-source and widely available, making font replacement straightforward if your brand uses a different type system
The color system, section structure, and card layout are all customizable so the template can represent a range of wellness and holistic beauty brands beyond a single studio identity
