Recipe patterns (use-case guides)

The previous chapters showed you what every section and setting does. This chapter shows you how to compose them for specific kinds of stores. Each recipe is a concrete settings walkthrough — pick the one closest to what you’re building, follow it, then iterate.

These aren’t rigid templates. They’re starting points. Mix-and-match settings between recipes as needed.

Recipe index

#	Recipe	Best for	Build time
22.1	Editorial Fashion	Boutique apparel, sustainable brands, slow-fashion	~3h
22.2	Linux-Rice Tech	Gadgets, devtools, gaming hardware, cyber/sci-fi brands	~3h
22.3	Single-Product DTC	One hero product, deep storytelling, kickstarter-style	~2h
22.4	B2B / Wholesale	Bulk pricing, catalog-heavy, no-frills professional	~2.5h
22.5	Luxury Beauty	Skincare, fragrance, premium cosmetics, jewelry	~3h

Each recipe assumes you’re starting from a fresh Hyprism install. If you’re customizing an existing store, treat the recipes as a reference to compare against.

22.1 Editorial Fashion

Vision

Magazine-style fashion store: large hero imagery, generous whitespace, slow-cadence content with editorial copy, hero-quality product photography, lookbook-style collection pages. Think: Studio Nicholson, Tekla, Margaret Howell aesthetic.

Tone: considered, restrained, photographic.

Theme settings (Foundation + Layout)

Color schemes

Scheme 1 (primary): warm off-white background (#f7f4ef), dark gray-brown text (#2a2520), muted earth accent (#8a7a65)
Scheme 2 (dark companion): rich dark brown (#1a1612) bg, cream text (#f7f4ef), same accent
Schemes 3+: neutral grays for variety
Dark/light pair: off (let merchant manually choose between Scheme 1 dark-on-light and Scheme 2 light-on-dark per section if needed)

Typography

Body: a clean transitional serif (e.g. Lora, Source Serif) for editorial weight
Heading: a refined display serif OR a confident sans (e.g. PP Editorial Old, Söhne)
Subheading: same as Heading at smaller size with letter-spacing: 0.05em
H1 size: 56px desktop / 36px mobile (large but not gimmicky)

Layout

Content width: 1280–1440px (room to breathe)
Page margin: 24px
Section spacing default: 80px (a lot — editorial pacing)
Mobile-padding: 16px

Effects

Glow / shadow: OFF (no glassmorphism or Linux-rice effects — clean photographic vibe)
Glass: not used in this recipe
Frame: optional, if used, line style with thin border (1px) in scheme border color

Home page composition

1. Hero (full-bleed, 100vh)
   - Image: editorial product photo or lifestyle shot
   - Content background: TRANSPARENT (no scrim, no glass — image carries the weight)
   - Heading: 4-6 words ("Crafted in Portugal")
   - Subheading: 1 line ("Slow-fashion linen, made to last")
   - CTAs: PRIMARY "Shop the collection" + SECONDARY "Our process"
   - Content position: bottom-left or bottom-center

2. Featured Collection (3-column grid, 6 products)
   - Image ratio: `Portrait` (3:4 — fashion's natural ratio; product-grid options are Natural / Square / Portrait / Landscape, no separate 4:5)
   - Card surface: TRANSPARENT
   - Card glow + card shadow: both OFF (editorial = quiet hover, no glow/shadow)
   - Show vendor: OFF
   - (Price is always shown — no toggle to hide it on product-grid)
   - Show swatches: OFF (clutters editorial feel)
   - Card padding: 0 (image is the card)
   - Card radius: 0 (sharp corners — editorial)

3. Featured Article ("Behind the season")
   - Embed your "About sourcing" / "How we make our linen" article
   - Image: large, 16:9 or 21:9 panorama
   - Excerpt word count: 80 (snippet preview)
   - Heading size: h2
   - Background: subtle warm tint (use Scheme 2)
   - Effects: OFF
   - CTA: "Read full essay →" (use Link button style)

4. Image with Text (2-column 50/50)
   - Image (left): detail product macro shot
   - Text (right): heading + paragraph + Link CTA
   - Effects: OFF
   - Padding generous (60-80px top/bottom)

5. Newsletter
   - Heading: "Join the list"
   - Subtitle: "Early access to drops. No spam."
   - Layout: Inline
   - Max width: 480px
   - Padding: 100px top/bottom (very generous)

6. Footer
   - Logo + tagline + 3-column menu + social + payment + copyright + legal
   - All blocks in their default block-types
   - Card-glass OFF (clean text)

Product page composition

- Product (split layout, 60/40 media/info)
   ├─ Product Vendor (small uppercase)
   ├─ Product Title (h1, serif heading font)
   ├─ Product Price
   ├─ Product Description (richtext, 200-400 words editorial — fabric origin, fit notes, sizing)
   ├─ Product Variant Picker (use pill swatches for colors, dropdown for size)
   ├─ Product Buy Buttons (Primary "Add to Cart", show express checkout)
   ├─ Group (Horizontal, 2 buttons): Wishlist + Size Guide (Tabs link)
   ├─ Product Tabs (Details / Care / Shipping & Returns)
   └─ Product Share (icon-only, subtle)

After main product:
- Related Products (4-column grid, same card style as featured collection)
- Newsletter (compact variant)

Settings highlights

Buttons: Square corners (not rounded). Primary in scheme accent. Secondary outline.
All product images: 4:5 portrait ratio (consistent across the whole site)
Hover states minimal — slight lift, no zoom (zoom can feel cheap in editorial context)
No badges (sale, new) — let editorial design lead. If sales matter, use a banner section.

Customization tips

💡 Photography is everything in this recipe. Invest in real product photography before launch. Stock photos kill editorial feel instantly.
💡 Keep the home page short — 5–6 sections max. Editorial = slower pace = fewer pages full of stuff.
💡 Use the Article + Featured Article sections to tell sourcing/process stories. This is your differentiator.

22.2 Linux-Rice Tech

Vision

The signature Hyprism aesthetic in full force: glassmorphism, accent glow, Matrix-style pretext banner, frame system on, dark-mode default. Think: system76, framework laptop, devtools companies, cyberpunk-leaning brands.

Tone: technical, distinctive, slightly playful.

Theme settings (Foundation + Layout)

Color schemes

Scheme 1 (default dark): deep blue-black bg (#0a0e1a), bright cool-white text (#e8eef5), neon-cyan accent (#00ffd1)
Scheme 2 (alternate accent): same dark bg, magenta accent (#ff4499)
Schemes 3-4: variations with green / orange / purple accents
Dark/light pair: ON with pair_1 primary = scheme-1, pair_1 alternate = (one of the lighter schemes for contrast)

Typography

Body: Geist Mono OR a humanist sans (Inter, IBM Plex Sans)
Heading: a tech-display font (Geist Mono Bold, or PP Neue Bit)
Accent: Monospace (Geist Mono) — for code-snippet vibes in eyebrows
H1: 64-80px desktop, with letter-spacing: -0.02em (tight, modern)

Layout

Content width: 1280px
Page margin: 16px (tight — modern)
Section spacing: 48px (denser than editorial)
Frame: Area style, with edge-glow ON
Background: subtle tile/grid pattern OR dark abstract image, with 60% overlay

Effects (this is where Linux-rice shines)

Glow intensity: 120% (more punch than default)
Shadow intensity: 100%
Glass blur: 14
Glass opacity: 8 (subtle — let bg show through)
Glass saturate: 140 (vivid colors through glass)

Home page composition

1. Pretext Banner ABOVE header (matrix-rain mode)
   - Animation: Matrix rain
   - Content source: ASCII / Random alphanumeric
   - Height: 120px
   - Font size: 14px
   - Color: scheme accent
   - Background: transparent
   (This is the wow-on-load that screams "tech")

2. Hero (full-bleed with glass content overlay)
   - Image: a dark moody product hero OR abstract gradient
   - Content background: GLASS
   - Heading: short, punchy, accent (5-6 words)
   - Subheading: tech-spec-style ("v0.8.0 // ships globally")
   - Accent glow: ON
   - Primary CTA: glow on, lift on hover
   - Section glow: ON
   - Section shadow: ON

3. Pretext Banner BETWEEN hero and products (scramble-reveal mode)
   - Animation: Scramble reveal
   - Image mode: Char compose (your logo as ASCII)
   - Loop: ON
   - Background: glass

4. Bento Grid (mixed tile layout)
   - 6-9 tiles in asymmetric grid
   - Tile surfaces mixed: solid / glass / image-fill
   - Hover effect: Tilt (subtle 3D rotation on cursor)
   - 1-2 product tiles, 1-2 collection tiles, 1-2 image tiles, 1 CTA tile
   - Bento gap: 12px (tight grid)
   - Lock aspect ratio: ON (uniform tiles)

5. Featured Collection (4-column grid, 8 products)
   - Image ratio: `Square`
   - Card surface: GLASS
   - Card glow: ON (Linux-rice accent halo)
   - Show swatches: ON
   - Enable quick view: ON
   - Enable add to cart: ON
   - (Note: product-grid has no "Card hover effect" select — for the bento-tile-style Glow-pulse hover, use Bento Grid section instead)

6. Multicolumn (3-column feature row)
   - Icon + heading + text per column
   - Icons: tech-themed (circuit, terminal, shield) with backplate = circle, glass = ON
   - Section padding: 80px top/bottom

7. Testimonials (carousel mode, 3 visible)
   - Card glass: ON
   - Card glow: ON
   - Autoplay: 6s
   - Loop: ON

8. Newsletter
   - Layout: Inline
   - Section: full-width, dark scheme, glass content panel
   - Button: glow on, accent

9. Footer
   - Logo + menu cols + social + payment + copyright + legal
   - Footer-bar (sub-footer): on with quick links, fully transparent
   - Glass: section-level on

Product page composition

- Product (unified layout, sticky media, glow on buy-section)
   ├─ Product Vendor (subheading visual, monospace)
   ├─ Product Title (h1, tight letter-spacing)
   ├─ Product Price (bold)
   ├─ Product Variant Picker (square swatches, glass surface)
   ├─ Product Buy Buttons (glow on primary, full express checkout row)
   ├─ Product Wishlist (sync with buy-buttons width = ON)
   ├─ Product Description (mode = show-more, clamp 4 lines)
   ├─ Product Tabs (square style with rounded corners, glass surface)
   ├─ Product Size Chart (modal trigger)
   └─ Product Share

After main product:
- Sticky Product Bar (glow on, glass)
- Recently Viewed (4-col, glass cards, glow)
- Related Products (4-col)

Settings highlights

Buttons: Pill or Rounded (not sharp). Primary with glow. Secondary outline.
All effects on by default (this is the signature look — embrace it)
Card hover effects (Glow-pulse / Lift / Zoom / Tilt) are only available on bento-tile blocks — not on product-grid cards. For Linux-Rice product cards, use the Bento Grid section with Product tile type when you want hover-effects, or rely on card_glow + card_shadow for product-grid cards.
Background image visible everywhere — frame system on Area mode complements it

Customization tips

💡 The pretext-banner with scramble-reveal + char-compose of your logo is the SIGNATURE move. Spend 30 min getting it right.
💡 Glass works best on dark schemes. If using light schemes, reduce glass opacity to 4% to keep readability.
💡 If glass causes performance issues on older devices, set glass blur to 8 (less GPU load).

22.3 Single-Product DTC

Vision

One product, deep narrative, hero video, sticky add-to-cart, testimonials, FAQ. Built for someone selling a single iconic product (or product line) with heavy storytelling. Think: Topicals, Athletic Greens, Allbirds (early), most Kickstarter-graduate brands.

Tone: confident, narrative-led, conversion-focused.

Theme settings

Color schemes

Scheme 1: warm or brand-led, NOT generic. Pick a specific accent that’s recognizable.
Scheme 2: contrast variant for body sections
Schemes 3-5: minimal — you won’t use them much
Dark/light pair: OFF (one consistent palette is the brand)

Typography

Body: confident sans (Inter, Söhne, SF Pro)
Heading: bold serif or distinctive sans (PP Editorial Old, Acumin Pro, Migra)
Subheading: small caps body font for eyebrow labels
H1: 72px desktop / 44px mobile (bold and present)

Layout

Content width: 1080–1200px (smaller — focused reading)
Page margin: 24px
Section spacing: 80px (storytelling pace)
Effects: light glow + light shadow only (warmth)

Home page = Long-form product landing page

1. Hero Video (autoplay-loop, click-to-play, OR scroll-scrub)
   - 5-15 second product-in-action video
   - Overlay heading: "[Product]" or aspirational tagline
   - Overlay subheading: 1-line value prop
   - Primary CTA: "Buy now" → scrolls to buy-section (or to product page)
   - Audio: Muted (default) or with toggle

2. Multicolumn (3 trust signals)
   - Icon + label per column: "Free shipping over $X" / "30-day returns" / "Sustainably made"

3. Image with Text — "What it is"
   - Image: product hero shot
   - Text: 1 paragraph + Link CTA "How it works"

4. Featured Product (the actual product, embedded)
   - Pick your hero product via picker
   - Show all blocks: title, price, variant-picker, buy-buttons, description, share
   - Quick visual checkout — this is your conversion section

5. Image with Text — "How it works" (reverse layout)
   - Image right: process or detail shot
   - Text left: 2-3 paragraphs explaining the science / craft

6. Testimonials (3-column grid OR carousel)
   - 6-9 real testimonials with avatars
   - Card surface: solid or glass (subtle)
   - Star ratings if you have them (custom liquid block)

7. Featured Article — "Read the story" (your founder story or origin)
   - Embed your "About" page or "Founder's note" article
   - Excerpt: 100 words

8. Collapsible Content / FAQ (5-8 common questions)
   - Connected accordion style
   - Glass surface for cards

9. Newsletter
   - Heading: "Get product updates"
   - Subtle, not aggressive

10. Footer (compact)
   - Logo + 1-row menu + social + payment + copyright + legal
   - Footer-bar OFF (keep it lean)

Product page

Same as the embedded Featured Product on home, plus:

Sticky Product Bar (ALWAYS ON — this is conversion-critical)
Quick View on related products
Related Products (3-col, only if you have related items)

Settings highlights

Buttons: medium radius (8px) — friendly but professional
Sticky Product Bar visible on every page once the ATC scrolls past viewport
Trust badges visible at top of buy section
Express checkout enabled and prominent

Customization tips

💡 If you have a hero video, USE it. Static images are a missed opportunity for single-product brands.
💡 Test the sticky-product-bar on real mobile devices — it should slide in smoothly without jank.
💡 FAQ is conversion gold — answer the 8 questions everyone asks before buying.

22.4 B2B / Wholesale

Vision

No-frills professional catalog: easy browsing, clear pricing tiers (or “Contact for pricing”), strong search/filter, sparse marketing copy. Think: Restaurant supply, industrial parts, B2B fashion wholesale.

Tone: efficient, professional, trustworthy.

Theme settings

Color schemes

Scheme 1: clean white bg, dark text, professional blue/gray accent (no neon)
Scheme 2: very subtle gray bg for alternate sections
Schemes 3+: minimal use
Dark/light pair: OFF (B2B users expect predictability)

Typography

Body: clean sans (Inter, Source Sans, IBM Plex Sans)
Heading: same family at heavier weight (no decorative fonts)
Avoid serifs and display fonts — they feel “consumer-y”

Layout

Content width: 1440px (wide — show more products per screen)
Page margin: 16px
Section spacing: 48px (efficient — less whitespace)
Effects: ALL OFF (no glass, no glow, no shadow — professional clean)

Home page composition

1. Announcement Bar (rotating — current promos, MOQ info, contact link)

2. Hero (compact, NOT full-bleed)
   - Height: 400px (not 100vh — get to content fast)
   - Background: brand-relevant product photo or warehouse shot
   - Content: short heading + 2 CTAs (Browse catalog / Request access)
   - No glass, no glow

3. Featured Collection — "Featured products" (4-col grid, 8 products)
   - Image ratio: `Square`
   - Card surface: SOLID
   - Card glow + shadow: OFF (clean)
   - Show vendor: ON (B2B users care about brand)
   - Show SKU/product type: customize via product description
   - For B2B "Contact for pricing" mode: price always shows on standard cards. If you need price-hidden cards (login-gated pricing), use a third-party B2B-pricing app — or replace product-grid with a Custom Section using image + heading + "Contact" button atom blocks.

4. Collection List — "Shop by category"
   - 6-9 collection cards in 3-column grid
   - Title overlay on image
   - Card surface: solid

5. Multicolumn — "Wholesale benefits"
   - 3 columns: "Volume pricing" / "Fast shipping" / "Dedicated support"
   - Icon + heading + brief text

6. Featured Page — "About wholesale" (embed your wholesale-info Page)
   - Section embeds an FAQ-like Page explaining MOQ, payment terms, account setup

7. Newsletter — "Get our catalog" (B2B newsletter, often catalogue request)

8. Footer
   - Detailed: logo + 4-column menu (Products, About, Support, Legal) + payment methods + copyright
   - Include phone number + business email in footer-quick-links
   - Footer-bar: optional (contact info)

Collection page composition

- Collection Banner (compact 200px height, just title + description)
- Filter sidebar: ON (essential for catalogs)
- Sort dropdown: ON
- Product Grid:
   - 4-5 column desktop (more density than consumer stores)
   - Card surface: solid
   - Show vendor + SKU
   - Quick-add: ON (fast cart-adding for B2B reorders)

Product page composition

- Split layout (50/50), media + info side-by-side
   ├─ Product Vendor (uppercase small)
   ├─ Product Title (h1, no decorative font)
   ├─ Product Price (or "Contact for pricing")
   ├─ SKU + technical details prominent
   ├─ Quantity input (large, easy to edit for bulk)
   ├─ Variant picker (dropdowns — easier than swatches for many options)
   ├─ Buy Buttons + "Request quote" secondary
   ├─ Product Description (data-heavy: specs, dimensions, certifications)
   └─ Product Tabs (Specs / Datasheet / Shipping / Compliance)

Settings highlights

Buttons: rectangle/slightly-rounded, NO glow, solid colors
Cart drawer: full-featured but compact (B2B users add many items)
Wishlist / Recently viewed: ON (B2B users often save lists for procurement)
Quick View: ON (browse fast)
Cart promo: replace with “Volume discount applied at checkout” message

Customization tips

💡 Install a wholesale app (Wholesale Pricing Discount, B2B/Wholesale Solution) for tiered pricing. Hyprism plays well with these.
💡 The Search & Discovery app is essential — B2B catalogs are huge and filter UX matters.
💡 Consider a custom-liquid block on home page for live inventory status badges (“In stock” / “Backorder”).

22.5 Luxury Beauty

Vision

Sophisticated, premium feel: ample whitespace, slow scroll, ritual-driven storytelling, jewel-tone color palette, slideshow-led home. Think: Dr. Barbara Sturm, Augustinus Bader, Vintner’s Daughter.

Tone: premium, ritual-oriented, sensorial.

Theme settings

Color schemes

Scheme 1: cream/off-white bg (#fefcf7), deep charcoal text (#1a1a1a), gold or terracotta accent (#8b6e3f)
Scheme 2: rich dark bg (#1a1612), cream text, same accent
Schemes 3+: jewel tones (emerald, oxblood) for variety
Dark/light pair: optional — if used, scheme 1 ↔ scheme 2

Typography

Body: refined serif body (Lora, GT Sectra, PP Editorial New)
Heading: same serif at display weight, OR a sophisticated sans (Söhne, Pangram)
H1: 56-68px desktop, slightly letter-spaced for sophistication

Layout

Content width: 1280px
Page margin: 32px (generous)
Section spacing: 100px (very generous — luxury cadence)
Effects: subtle shadow on cards, NO glow (glow can feel cheap in luxury context), glass optional

Home page composition

1. Slideshow (3-5 hero slides)
   - Each slide: a different product/range hero
   - Slide settings: image-bleed, content-overlay glass (subtle), centered content
   - Autoplay: 6s
   - Pagination: dots (refined)
   - Section padding: 0 (edge-to-edge)

2. Multicolumn — Ritual columns (3-column)
   - Icon (custom-uploaded line drawing) + heading + text
   - Categories: "Skincare" / "Body" / "Hair"
   - Each links to a collection

3. Featured Article — Brand story
   - Embed your founder story or product science article
   - Image: 21:9 panorama
   - Excerpt: 80 words
   - Layout: media center, text overlay (glass)

4. Bento Grid (asymmetric editorial layout)
   - Hero tile (big) + 4 smaller tiles
   - Tile content: text + image + 1 product card
   - All glass surface, very subtle

5. Testimonials (carousel, 1-per-view, autoplay)
   - Beauty / luxury testimonials are long-form — give them space
   - Card surface: solid, generous padding (48px)
   - Avatar: large (72px) circle

6. Featured Page — "Our ingredients" or "Our process"
   - Embed your ingredients-source page

7. Slideshow #2 OR Image with Text — Sustainability / craftsmanship

8. Newsletter
   - Heading: "Join the ritual"
   - Subtitle: "Slow beauty, slow updates"
   - Layout: Centered, max width 600px
   - Padding generous (120px top/bottom)

9. Footer
   - Logo + 3-column menu + social + payment + copyright + legal
   - Background: subtle scheme 2 (dark cream) for contrast

Product page composition

- Product (split layout, 60/40 media-heavy)
   ├─ Product Vendor (small caps eyebrow)
   ├─ Product Title (h1, serif, large)
   ├─ Product Price (subtle, not shouty)
   ├─ Product Description (rich-text, 300-600 words, ingredients + ritual)
   ├─ Product Variant Picker (size as dropdown — color usually irrelevant in beauty)
   ├─ Product Buy Buttons (primary in scheme accent, "Add to ritual" not "Add to cart")
   ├─ Product Wishlist
   ├─ Product Collapsible — Ingredients / How to use / Pairs with / Shipping
   └─ Product Share

After main product:
- Image with Text — "Pairs with" (suggested ritual companion product)
- Related Products (3-col)

Settings highlights

Buttons: medium-rounded (12px), subtle hover Lift (no glow)
Product images: 4:5 portrait, very high quality
Cards: solid + subtle shadow (not flat-clean like B2B, not glowy like Linux-rice)
Quick Add: OFF (luxury beauty buyers don’t quick-add; they read)
Express checkout: ON (Shop Pay, Apple Pay — high AOV justifies)

Customization tips

💡 Photography MUST be premium. Crop tight, use real-life ritual context. Avoid stock.
💡 Use the rich-text fields generously — luxury beauty buyers read every word.
💡 Newsletter conversion is high in this segment — make signup prominent but not pushy.

Mixing recipes

These are starting points, not rigid rules. Common mixes:

Editorial + Single-Product: a craft brand with one hero SKU told editorially.
Linux-Rice + B2B: a developer-tools wholesale brand. Glass effects + B2B catalog density.
Luxury Beauty + Single-Product: a single hero serum / cream with rich ritual storytelling.

The Hyprism aesthetic is flexible — start from the recipe closest to your brand, then borrow specific moves from others as needed.

What to do after picking a recipe

Follow the recipe to set up theme + home + product page (~2-3h depending on recipe).
Live with it for 2 days. Look at it fresh. Note 3-5 things that don’t feel right.
Iterate. Adjust specific settings. Don’t change recipe — refine within it.
Pre-launch checklist (chapter 21) before going live.

Next — reference chapters

The remaining chapters are reference docs you’ll come back to:

Chapter 23 — Glossary — definitions for Shopify + Hyprism terminology
Chapter 24 — Theme settings reference index — every global setting in one searchable table
Pre-launch checklist before going live

Welcome to building with Hyprism.