Satchel — Bold Cottagecore Landing Page Template

Quick summary

Satchel is a single-page masonry landing page template designed for a small-batch bag brand selling deadstock-fabric vintage silhouettes. The page opens with a looping unboxing video, moves through an emotionally sequenced grid, and closes with a Heritage Bundle upsell. Every section earns trust before it asks for anything.

Who this template is for

This template suits founders and makers who sell considered, story-rich products and want their page to reflect that care. It works especially well for direct-to-consumer brands where provenance, craft, and ritual are part of the value.

• Small-batch artisan bag and accessories brands selling through their own storefront
• Cottagecore, neo-retro, or vintage-inspired lifestyle brands targeting a style-conscious female audience
• Gift-focused product brands that want to present an upgrade or bundle experience naturally

What problem this template solves

Most product landing pages show the item first and the story never. For a brand whose value lives in the sourcing, the stitching, and the ritual of receiving, that order destroys the sale before it begins. This template reverses the sequence.

• Visitors fall in love with the unboxing ritual before they see a price, building desire naturally
• The masonry grid separates anticipation, reveal, and detail phases so the scroll tells a complete story
• The Heritage Bundle upsell is framed as a natural next step, not an interruption

What you get with this template

You get a fully structured single-page layout with five distinct content sections, high-interactivity components, and a cohesive neo-retro visual identity ready to customise. Every element is grounded in the Satchel brief and built to support the unboxing creative direction.

• A full-screen video hero, three-phase masonry grid, craft detail bento, and Heritage Bundle call-to-action section
• A quick-view drawer with dual call-to-action options and a sticky bottom upgrade bar
• A complete Ruby and Chrome colour system with Fraunces serif headlines and DM Sans body text

Feature list

This template includes a focused set of purposeful features. Each one supports the emotional arc from anticipation through to upsell.

Full-Screen Video Hero with Trembling Headline

The header plays a continuous twelve-second looping video in soft, overexposed 16mm-style grain. Two hands unwrap a kraft parcel on a farmhouse table to reveal a ruby-clasped satchel. The headline "Every Bag Arrives Like a Gift" renders in a letterpressed-feel serif typeface with a subtle trembling animation. A scroll indicator guides the visitor downward.

Three-Phase Masonry Unboxing Grid

The masonry grid is divided into three emotional phases as the visitor scrolls. The first phase shows bags mid-emerge from tissue paper. The second shifts to styled life shots in real-world contexts. The third presents close-up detail tiles of stitching, brass hardware, and interior hand-stamped labels. Each phase uses GSAP-powered scroll reveals and slideInBlur transitions.

Quick-View Drawer with Dual Call-to-Action

Each bag card opens a quick-view drawer without leaving the page. The primary call-to-action reads "Add the Full Experience," bundling the signature gift-wrap kit at a combined price. A smaller secondary link reads "Just the Bag" for the base option. This structure presents the upsell as an enhancement, not a push.

Sticky Heritage Bundle Upgrade Bar

After the visitor reaches the third scroll depth, a sticky bottom bar appears. It shows the selected bag thumbnail alongside copy introducing the Heritage Bundle, which includes monogramming, lifetime re-stitching, and a seasonal dust bag. A ruby "See the Bundle" button anchors the bar. The bar appears only after engagement, so it never feels premature.

Craft Detail Bento Section

A bento-style grid highlights the sourcing and making story. Close-up photography of stitching, deadstock fabric swatches, brass clasps, and the hand-stamped interior label fills this section. It serves as the obsession phase of the scroll sequence, deepening trust before the final upsell section.

Heritage Bundle Call-to-Action Section

The final content section presents the Heritage Bundle with ritual framing. Copy focuses on the full experience of ownership rather than listing product specs. This section closes the emotional arc opened by the video header and gives the visitor a clear, meaningful action to take.

Page sections overview

Design & branding system

The template uses a Ruby and Chrome colour system that evokes a 1940s compact mirror opened on a linen tablecloth. Glamour is present but softened by age and warmth. Every colour serves a structural role.

• Deep blackberry ruby (#722F37) anchors every button, price tag, and primary call-to-action element
• Polished chrome silver (#C0C0C8) traces card borders and user interface fixtures like clasp lines on a vintage frame
• Clotted cream (#FFF8E7) fills card backgrounds so the masonry grid breathes rather than crowds
• Muted charcoal (#3B3B3B) carries all body text for clean, comfortable reading
• Fraunces serif handles all headlines; DM Sans handles body copy and interface labels

Mobile & speed optimization

The template is built mobile-first, reflecting the target audience's browsing habits on Pinterest-style feeds and phone-based shopping. Layout decisions prioritise a smooth vertical scroll on smaller screens.

• Masonry grid reflows cleanly for mobile viewports, preserving the three-phase scroll sequence
• GSAP handles complex animations with IntersectionObserver triggering reveals only as sections enter the viewport
• CSS scroll-behavior smooth is applied throughout for a fluid, unhurried scrolling experience

How this template helps you convert

This template is designed to build genuine desire before presenting any purchase option. The conversion path follows the emotional arc of the page rather than interrupting it.

1. The video header and unboxing grid create attachment to the ritual and the object before a price appears, so the visitor is already emotionally invested when the call-to-action arrives.
2. The quick-view drawer presents the Heritage Bundle upgrade as the natural, complete version of what the visitor already wants, reducing resistance by framing it as an enhancement rather than an add-on.
3. The sticky upgrade bar appears only after proven scroll engagement at the third depth, surfacing the bundle offer at the moment of highest interest without appearing before the visitor is ready.

Other information about this template

This template is built as a direct-to-consumer product page with UK-inflected English copy, GBP pricing conventions, and a brand voice suited to an artisan maker rather than a mass retailer. A few additional details worth noting before you start customising.

• The footer uses Pattern 3, a Vercel Horizontal layout with dot separators
• Social proof is supported through maker notes, deadstock sourcing details, and interior label photography displayed in the bento section
• The grain overlay on the video header is a CSS film-grain effect applied at the template level
• Interactive elements include magnetic buttons, an FAQ accordion, and the GSAP-driven masonry reveal system
• The template is suited to gift-givers as a secondary audience, making it useful for seasonal campaign pages as well as evergreen product pages

Show more