Refill is a modular card grid landing page built for sustainable apothecary and zero-waste beauty brands. It opens with a Before/After Slider, flows through macro product photography, a slow-motion video section, and ingredient origin cards. Every product card includes an "Add to Ritual" call to action, a sticky cart bar, and a refill subscription path, all wrapped in a warm, atelier-inspired visual identity.
by Rocket studio
Loading preview…
Quick summary
Refill is a single-page landing page template designed for sustainable, refillable beauty brands. It combines a dramatic Before/After Slider header, a modular card grid with flip animations, and a full-width video section. The layout moves at a deliberate pace, guiding visitors from curiosity to commitment through quiet, intentional design rooted in the zero-waste beauty ethos.
Who this template is for
This template is built for founders and sellers who lead with purpose as much as product. It suits brands where the packaging is part of the story and the customer expects transparency.
Sustainable skincare founders selling refillable serums, balms, and cleansers in amber glass
Zero-waste households and conscious consumers looking for a storefront that matches their values
Boutique spa owners and wholesale buyers who need a credible, display-worthy brand presence
What problem this template solves
Most beauty landing pages were designed to move volume, not to build trust. They rush toward checkout with loud banners and countdown timers that feel out of place for a brand built on slowness and intention.
Visitors who care about ingredients and sourcing need space to read, explore, and believe before they buy
Refillable product models require explanation, the return-and-refill lifecycle needs a visual story, not a bullet point
First-time buyers are hesitant without proof; the template addresses this with a gentle sample kit modal that earns the click before asking for payment
What you get with this template
You get a fully structured, section-led landing page that tells the complete brand story from clutter to calm. Every component is purposeful and prompt-ready for a sustainable beauty storefront.
A Before/After Slider header, modular product card grid with hover flip animations, full-width slow-motion video section, and ingredient origin cards
A sticky bottom bar that tallies cart items and displays a running count of plastic bottles avoided
Theme
Atelier Studio
Creative direction
Immersive Visual
Color system
Soft Mist
Style
Card Grid (Modular)
Direction
Marketplace/Multi
Page Sections
Before/after Slider Header
Modular Product Card Grid with Hover Flip
Full-width Slow-motion Video
Ingredient Origin Cards
Sticky Cart and Impact Bar
Timed Free Sample Kit Modal
Related questions
Can I use this template for a wholesale or spa-facing audience?
Does the product card grid support multiple product types?
How does the refill subscription path work within the page?
What is the timed modal and when does it appear?
Can I edit the color palette and typography to fit my brand?
A timed modal offering a free sample kit, plus a "Start a Refill Subscription" path leading to a skin-type quiz
Feature list
This landing page template delivers a set of visual and functional components designed specifically for the refillable beauty market. Each feature earns its place by serving both the brand story and the buyer journey.
Before/After Slider Header
The page opens with an overhead comparison: a cluttered plastic-filled counter on the left, a single amber glass bottle on a linen cloth on the right. Visitors drag the divider and watch the visual noise dissolve into calm. A hand-set serif headline, "Less packaging. More ritual.", fades in beneath the slider.
Modular Product Card Grid
Product cards display macro photography close enough to show seed flecks in a scrub or air bubbles in an oil. Each card flips on hover to reveal the return-and-refill lifecycle icon. The primary call to action, "Add to Ritual" in aged brass, lets visitors build a cart without leaving the grid.
Full-Width Video Section
A slow-motion video of amber bottles being hand-filled, capped, and sealed with wax plays full-width between the product grid and the ingredient section. The pacing is deliberate and immersive, reinforcing the handcrafted nature of the product line.
Ingredient Origin Cards
Each botanical ingredient is pinned to a named farm through dedicated origin cards. This section adds transparency and depth, giving ingredient-conscious shoppers the sourcing detail they look for before committing to a purchase.
Sticky Cart and Impact Bar
A sticky bottom bar follows the visitor through the scroll. It tallies cart items in real time and displays a running count of plastic bottles avoided, making the environmental impact of each purchase feel immediate and personal.
Timed Sample Kit Modal
After thirty seconds on the page, a gentle modal appears offering a free sample kit in exchange for covering return shipping. The form collects only name, email, and skin concern, reducing friction while proving the product before asking for full payment.
Page sections overview
Section
Purpose
Before/After Slider
Opens with a dramatic clutter-to-calm visual comparison
Serif Headline Block
Fades in brand promise beneath the slider
Product Card Grid
Displays refillable products with hover flip animations
Full-Width Video
Showcases the hand-filling process in slow motion
Ingredient Origin Cards
Pins each botanical to a named farm source
Sticky Cart Bar
Tallies items and tracks plastic bottles avoided
Subscription Quiz Path
Routes visitors to a skin-type refill subscription quiz
Sample Kit Modal
Offers a free trial kit after thirty seconds on page
Design & branding system
The visual identity follows an Atelier Studio theme built around the Soft Mist color system. The palette feels like a ceramicist's workshop at golden hour: chalky, muted, and warm, with generous whitespace acting as breathing room between elements.
Core palette: warm linen (#F5F0EB), stone mortar gray (#C4BAA8), pressed sage (#A3AA96), and aged brass (#C49E6C) reserved for hover states, cart icons, and price tags
Typography uses hand-set serif faces that feel deliberate and crafted, pairing naturally with the artisan product photography
Macro photography and slow-motion video carry the immersive visual direction, while dried botanical styling details reinforce the atelier atmosphere throughout the scroll
Mobile & speed optimization
The modular card grid adapts cleanly to smaller screens without losing the visual rhythm that makes the template distinctive. The layout prioritizes readability and touch-friendly interaction at every breakpoint.
Product cards reflow into a single or double column on mobile, keeping macro photography prominent and the "Add to Ritual" action easy to tap
The Before/After Slider is touch-drag compatible, and the sticky cart bar remains fixed at the bottom of the viewport on mobile for consistent cart access
The timed modal is designed to appear unobtrusive on smaller screens, with a minimal form that does not interrupt the scroll experience
How this template helps you convert
This landing page is structured to build trust gradually and convert visitors through proof and intention rather than pressure. Every section earns the next click.
The Before/After Slider creates an immediate emotional shift, turning abstract sustainability claims into a felt visual experience before a single word of copy is read.
The "Add to Ritual" card grid lets visitors act at the moment of interest, and the sticky impact bar reinforces the decision by showing a live count of plastic bottles avoided as items are added.
The timed sample kit modal captures hesitant first-time buyers with a low-commitment offer, collecting only name, email, and skin concern before delivering proof of the product.
Other information about this template
This template is a strong fit for organic and natural beauty brands operating in the sustainable skincare space. It is equally suited to direct-to-consumer launches and wholesale-facing storefronts where brand credibility is part of the pitch.
The marketplace and multi-storefront landing page direction means the grid can accommodate a range of product types within one cohesive page flow
The refill subscription quiz path supports recurring revenue models without requiring a separate page or checkout flow
The Atelier Studio theme and Soft Mist color system are fully embedded in the design, so the warm linen, pressed sage, and aged brass tones are ready to use from the first edit
