Adorn is a bento grid landing page built for African bead and jewelry retailers. It pairs a Before/After Slider header with a scroll-reveal Curated Collection grid and a five-step visual quiz. The Neo-Retro Obsidian and Gold design system creates an immersive, market-stall atmosphere that guides diaspora shoppers and style-conscious buyers toward their perfect piece.
by Rocket studio
Loading preview…
Quick summary
Adorn is a single-page bento grid landing page for African bead and jewelry stores. It opens with a Before/After Slider that reveals the craft journey from raw Krobo glass bead to finished necklace. A scroll-reveal collection grid and a five-step visual quiz work together to move every visitor closer to a purchase or an email capture.
Who this template is for
This template is built for jewelry retailers who sell culturally rooted, handcrafted pieces to modern, style-aware buyers. It fits sellers who need a page that feels as distinctive as the objects they sell.
Independent jewelry brands and artisan collectives selling African beadwork, brass, cowrie, and woven pieces
Diaspora-owned boutiques serving customers who shop for both ceremony and everyday wear
Interior designers and concept store buyers sourcing authentic accent pieces for boutique spaces
What problem this template solves
Most jewelry landing pages look identical. They rely on white backgrounds, grid thumbnails, and add-to-cart buttons that strip all the story from the product. African craft jewelry carries deep cultural weight, and a generic storefront cannot communicate that weight.
Buyers do not understand the origin or craft behind a piece, so they hesitate to pay premium prices
Sellers have no structured way to guide a visitor from curiosity to a confident, personalized purchase
Email capture methods feel transactional and forgettable, causing warm leads to leave without a connection
What you get with this template
You get a fully designed, single-page landing page that functions as a gallery, a storytelling space, and a conversion tool simultaneously. Every section is intentional and tied to a specific stage of the buyer journey.
A Before/After Slider header with a gold bead drag handle and a reveal headline that appears after interaction
A bento grid collection layout with four expandable cells, each containing an origin story, artisan photo, and three hero pieces
Theme
Neo-Retro
Creative direction
Curated Collection
Color system
Obsidian & Gold
Style
Scroll Reveal (Progressive)
Direction
Marketplace/Multi
Page Sections
Before/after Slider with Interaction Headline
Expandable Bento Collection Grid
Five-step Visual Quiz
Dual Conversion Path Design
Scroll-reveal Progressive Layout
Neo-retro Obsidian and Gold System
Related questions
Can I change the four collection names in the bento grid?
Does the quiz deliver product recommendations automatically?
What happens after a visitor downloads the bead glossary?
Is the Before/After Slider interaction required before the headline appears?
Who is the ideal buyer for this template?
A five-step visual quiz that delivers a curated three-piece capsule recommendation and a secondary email-capture path via a downloadable bead glossary
Feature list
This template ships with a focused set of purpose-built components. Each one serves the craft-jewelry retail context directly.
Before/After Slider Header
The header places a raw, kiln-warm Krobo glass bead on the left and a styled finished necklace on the right. The visitor drags a gold bead icon to reveal the transformation. The headline "From Fire to You" appears only after the visitor interacts, creating an earned moment of engagement.
Bento Grid Collection Layout
Four collection cells sit inside a structured bento grid: Ancestral Glass, Modern Brass, Sacred Cowrie, and Woven Thread. Each cell expands in place into a micro-gallery with an origin story, an artisan photo, and three hero product images. The grid reshuffles as the visitor scrolls deeper, building a sense of discovery.
Five-Step Visual Quiz
The primary call to action, "Find Your Signature Piece," launches a five-step quiz covering metal tone, vibe, body placement via a silhouette tap map, cultural origin region, and budget range. Results present a curated three-piece capsule with a "Claim Your Collection" button.
Dual Conversion Paths
Visitors who complete the quiz can claim their capsule directly or take a secondary path. The secondary option offers a downloadable bead glossary as a portable document format file, capturing email addresses through education rather than sales pressure.
Scroll-Reveal Progressive Layout
Sections animate into view as the visitor scrolls. The page builds momentum gradually, with collection pieces growing bolder in combination the further down the visitor travels, reinforcing the feeling that the right piece is always just ahead.
Neo-Retro Visual Identity System
The Obsidian and Gold color system uses four defined values: deep volcanic black for backgrounds, molten gold for hover states and price tags, smoked amber for dividers and secondary text, and sun-bleached cowrie white for breathing space. Backgrounds alternate between obsidian and cowrie white, keeping the layout rhythmic and legible.
Page sections overview
Section
Purpose
Before/After Slider
Opens the page with a craft origin reveal and an interaction-triggered headline
Bento Collection Grid
Houses four expandable collection cells with stories, artisan photos, and hero pieces
Quiz Entry Block
Introduces the "Find Your Signature Piece" call to action and launches the five-step quiz
Visual Quiz Steps
Guides visitors through metal tone, vibe, body placement, origin region, and budget
Capsule Results Panel
Delivers a three-piece personalized recommendation with a claim button
Email Capture Path
Offers a bead glossary download as a secondary, education-first conversion route
Design & branding system
The template uses a Neo-Retro theme that fuses the warmth of an African market stall with the precision of a modern editorial layout. The palette is built around four anchored values, each with a clear role.
Deep volcanic black (#1A1A1A) for primary backgrounds, molten 18-karat gold (#D4A017) reserved strictly for hover states and price tags, smoked amber (#8B6914) for dividers and secondary text, and sun-bleached cowrie white (#FAF3E0) for open negative space
Typography uses a condensed serif for display text, giving headlines the weight of carved stone while remaining completely legible at scroll speed
Backgrounds alternate between obsidian and cowrie white across sections, with gold appearing as a reward for interaction rather than as ambient decoration
Mobile & speed optimization
The bento grid and slider components are structured to adapt cleanly to smaller viewports. The progressive scroll-reveal behavior is designed to work within the natural tap-and-scroll rhythm of mobile browsing.
The bento grid cells stack and reflow on narrow screens without losing the expand-in-place micro-gallery behavior
The silhouette tap map in the quiz step is built for touch interaction, allowing finger taps to select body placement zones accurately
Scroll-reveal animations trigger at viewport entry, keeping the progressive reveal experience intact on both desktop and mobile devices
How this template helps you convert
The page is structured around two conversion outcomes: a direct purchase path and an email-capture path. Neither outcome requires the visitor to feel pressured.
The Before/After Slider creates an earned interaction before any product is shown, building curiosity and emotional investment before the visitor reaches the collection grid or the quiz entry point
The five-step visual quiz filters preferences and delivers a personalized capsule recommendation, replacing generic browsing with a guided, confident path to the "Claim Your Collection" button
Visitors who are not ready to buy are offered a downloadable bead glossary in exchange for their email address, turning educational interest into a lasting connection without a hard sell
Other information about this template
This template is categorized under Retail and E-Commerce with a focus on African Specialty Retail. It is matched to the African Art and Sculpture Gallery niche intersection, making it well suited for sellers whose inventory carries both commercial and cultural significance.
The template style is Scroll Reveal (Progressive), meaning each section builds on the emotional momentum of the previous one rather than presenting everything at once
The landing page direction is Marketplace and Multi, supporting a multi-collection retail presentation within a single-page structure
The header concept is classified as a Lifestyle Shot, grounded in the Before/After Slider that shows the product in a real-world, styled context rather than against a plain background
The Intersection Match Score for this template is 9 out of 10, reflecting a strong alignment between the design system, creative direction, and retail niche
