// shopify-mockups.jsx — Shopify Store variant // PHASE 01 — DISCOVER: product catalog brief + moodboard function ShopDiscoverMockup({ progress = 1 }) { const swatches = [ { c: '#d4a574', l: 'Amber 01' }, { c: '#c8b89a', l: 'Sand 02' }, { c: '#8a7256', l: 'Bark 03' }, { c: '#6fa37a', l: 'Moss 04' }, { c: '#2a1f18', l: 'Ink 05' }, ]; return (
BRAND MOODBOARD · fragrance_house
{/* Left: catalog brief */}
Catalog · brief
— 24 SKUs, 4 ranges
— Editorial product copy
— Subscription + one-time
— Lookbook hero
— Ingredient stories
{/* Moodboard images */} {[ { x: 320, y: 72, w: 180, h: 220, rot: -1.5, d: 0.1 }, { x: 520, y: 92, w: 160, h: 200, rot: 2, d: 0.25 }, { x: 700, y: 62, w: 200, h: 240, rot: -1, d: 0.4 }, ].map((im, i) => { const p = clamp((progress - im.d) * 3, 0, 1); return (
{/* simple hint shapes */} {i === 1 && (
)} {i === 2 && ( <>
)}
); })} {/* Color swatches row */}
{swatches.map((s, i) => (
{s.l}
))}
{/* Texture notes */}
VOICE
Quiet luxury. Letterforms that breathe. Editorial over salesy.
); } // PHASE 02 — DESIGN: Shopify theme editor function ShopDesignMockup({ progress = 1 }) { return (
{/* Shopify top bar */}
S
fragrance-house · Theme editor
Preview
Save
{/* Left panel: sections */}
SECTIONS
{['Header', 'Hero — lookbook', 'Featured collection', 'Ingredient story', 'Press quotes', 'Footer'].map((s, i) => { const active = i === 1; const p = clamp(progress * 5 - i * 0.4, 0, 1); return (
{s}
); })}
{/* Preview */}
{/* Site header */}
maison
ShopLookbookStory
{/* Hero */}
No. 04
NEW · ATELIER EDITION
Amber
Woodsmoke
An editorial fragrance for the hours you don't explain.
SHOP · €120
{/* Right inspector */}
INSPECTOR
{[ ['Layout', 'Split · 50/50'], ['Image', 'hero-04.jpg'], ['Heading font', 'Instrument Serif'], ['Eyebrow', 'NEW · ATELIER'], ].map(([k, v], i) => { const p = clamp(progress * 5 - i * 0.3, 0, 1); return (
{k}
{v}
); })}
); } // PHASE 03 — BUILD: Shopify admin, products importing function ShopBuildMockup({ progress = 1 }) { const products = [ { name: 'Amber Woodsmoke · EDP 50ml', price: '€120', inv: 240, state: 'ready' }, { name: 'Green Fig · EDT 30ml', price: '€78', inv: 180, state: 'ready' }, { name: 'Iris Oud · EDP 100ml', price: '€210', inv: 96, state: 'importing' }, { name: 'Moss & Salt · Candle 220g', price: '€54', inv: 320, state: 'ready' }, { name: 'Neroli Blanc · EDT 50ml', price: '€98', inv: 0, state: 'importing' }, { name: 'Sandalwood · Travel 10ml', price: '€28', inv: 840, state: 'ready' }, ]; return (
{/* Sidebar */}
S
Admin
{['Home', 'Orders', 'Products', 'Customers', 'Content', 'Analytics', 'Marketing'].map((n, i) => { const active = n === 'Products'; return (
{n}
); })}
{/* Main */}
Products
Import CSV
+ Add product
{/* Import progress bar */}
↻
Importing products · {Math.floor(progress * 24)}/24
{Math.floor(progress * 100)}%
{/* Table */}
Product
Price
Inventory
Status
{products.map((p, i) => { const pr = clamp(progress * 3 - i * 0.25, 0, 1); return (
{p.name}
{p.price}
{p.inv}
{p.state === 'ready' ? ( ● LIVE ) : ( ◐ SYNCING )}
); })}
); } // PHASE 04 — LAUNCH: live storefront, lookbook hero + product grid function ShopLaunchMockup({ progress = 1 }) { const time = useTime(); return (
{/* Announcement */}
COMPLIMENTARY EU SHIPPING · ORDERS €80+
{/* Nav */}
maison
ShopLookbookAtelierStory
SearchAccountBag · 2
{/* Lookbook hero */}
{/* Model placeholder silhouette */}
{/* Product bottle */}
No. 04
50 ML
{/* Text */}
ATELIER · SS26
Amber,
carried
by smoke.
{/* Shipped badge */} {progress > 0.2 && (
SHIPPED
)}
{/* Product grid */}
{[ { name: 'Green Fig', price: '€78', hue: '#8fa880' }, { name: 'Iris Oud', price: '€210', hue: '#9a8fb5' }, { name: 'Moss & Salt', price: '€54', hue: '#6fa37a' }, { name: 'Neroli Blanc', price: '€98', hue: '#e8d4b4' }, ].map((p, i) => { const pr = clamp(progress * 3 - i * 0.2, 0, 1); return (
{p.name} {p.price}
); })}
); } // PHASE 05 — OPTIMIZE: Shopify analytics function ShopOptimizeMockup({ progress = 1 }) { const bars = [34, 48, 40, 62, 55, 78, 68, 88, 72, 95, 82, 110]; return (
SHOPIFY · ANALYTICS
Store overview · Last 30d
{/* KPI tiles */}
{[ { l: 'Conv. rate', v: '3.4%', d: '+1.6pp', c: DH.moss600 }, { l: 'AOV', v: '€128.40', d: '+12%', c: DH.moss600 }, { l: 'RPV', v: '€4.37', d: '+22%', c: DH.amber }, ].map((k, i) => { const p = clamp(progress * 3 - i * 0.3, 0, 1); return (
{k.l}
{k.v} ↑ {k.d}
); })}
{/* Two panels: bar chart + collection breakdown */}
SALES · BY DAY
€48,220
{bars.map((b, i) => { const p = clamp(progress * 2 - i * 0.04, 0, 1); return (
); })}
CONV · BY COLLECTION
{[ ['Amber', 92, '3.8%'], ['Green Fig', 74, '2.9%'], ['Iris Oud', 58, '2.2%'], ['Moss', 42, '1.6%'], ].map(([n, w, r], i) => { const p = clamp(progress * 3 - i * 0.3, 0, 1); return (
{n} {r}
); })}
); } // A/B mockups for Shopify function ShopABMockupA() { return (
maison
ShopAboutCart · 1
Amber Woodsmoke
€120 · 50ml
An editorial fragrance, layered with amber and birch smoke.
Add to cart
); } function ShopABMockupB() { const time = useTime(); return (
maison
ShopAboutCart · 1
{[0,1,2,3].map(i => (
))}
ATELIER · NEW
Amber,
carried by smoke.
€120 · 50ml · Eau de parfum
● IN STOCK · SHIPS IN 24H · FREE RETURNS
An editorial fragrance — amber and birch smoke, worn close.
Add to bag — €120
♡
324 PURCHASED THIS WEEK
); } Object.assign(window, { ShopDiscoverMockup, ShopDesignMockup, ShopBuildMockup, ShopLaunchMockup, ShopOptimizeMockup, ShopABMockupA, ShopABMockupB });