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, computers, cyber/sci-fi brands	~3h + data
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 + data
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.

⛔⛔ One block belongs in every recipe

The Product safety (GPSR) block is not a tech-store feature. Regulation (EU) 2023/988 has applied since 13 December 2024 to every consumer product — apparel, cosmetics, homeware, the lot. Selling at a distance into the EU means the manufacturer’s name and postal address, an electronic address, and (where the manufacturer sits outside the EU) the same for the responsible person in the Union, must be visible before the contract is concluded.

It is two metaobjects and one rich-text field, and it is the block with the widest reach and the smallest effort in this theme. Every recipe below includes it. See §7a.10.

⚠️ This is an orientation, not legal advice — which rules bind you depends on what you sell and where.

⚠️ Two recipes need data, not just settings. Linux-Rice Tech and B2B / Wholesale both build on the technical and compliance blocks, and those render nothing until the metafields exist in your store. The ”+ data” in the build time is the one-off setup in §7a.1 — an hour or so with the admin API, longer by hand.

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): Size Guide (Tabs link) + Share
   ├─ Product Tabs (Details / Care / Shipping & Returns)
   ├─ Files & documents (care instructions, material certificates — optional)
   ├─ Product safety (GPSR)   ← see the note below
   └─ 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.

Step 0 — the data layer (do this first)

⭐ The glass and the glow are the surface of this recipe. The data is the substance. A gadget store’s real competition is the spec sheet on somebody else’s site, and the twelve blocks in chapter 7a are what keeps that visit on your page.

Before you touch a colour scheme, create the metafields and metaobjects in §7a.1 — 8 metaobjects, 43 metafields. Then, per product:

Fill in	Gets you
a `spec_sheet` with `spec_field` entries	the specification table, the key specs on the card, the comparison, and filters
`specs.power_draw`	the running-cost calculator
`compliance.energy_class` + `energy_scale`	the EU energy block — and it is not optional if you sell into the EU
`compliance.manufacturer` (+ `eu_representative`)	the GPSR block — required for every consumer product since 13 Dec 2024
`compliance.repairability_index`, `spare_parts_until`, `repair_steps`	the repair block with visible, marked-up steps
`parts.items`	the spare-part catalogue
`compliance.support_until`	the security-update window
`docs.files`	manuals, declarations of conformity, dimensional drawings
`compat.targets`	”compatible with” on the product and the compatibility finder

⭐ Tick show_in_card on the three or four specs a buyer scans first — resolution, memory, ports — and comparable on everything you would put in a table. Both flags live on the spec_field, so you decide once and every surface follows.

⚠️ Then release specs.* and compat.targets as filters in Search & Discovery. Without that, values render as plain text instead of links into a filtered list.

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. Compatibility finder
   - "Pick your machine, see what fits" — the reverse of the
     Compatible-with block, reading the same compat_target entries
   - Merge dropdown + button: ON (one conjoined shape, matches the
     newsletter form)
   - Note below the form: say the list is not exhaustive

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

10. 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 Rating (sm, next to the name)
   ├─ Product Price (bold)
   ├─ Product Variant Picker (square swatches, glass surface)
   ├─ Product Buy Buttons (glow on primary, full express checkout row)
   ├─ Back-in-stock notice (sits where the buy button was, on sold-out variants)
   ├─ Product Pickup
   ├─ Product Description (mode = show-more, clamp 4 lines)
   │
   │   ── the technical layer, in the order a buyer thinks ──
   ├─ Specifications      (the table — from the spec_sheet)
   ├─ Compatible with     (what it fits)
   ├─ EU energy & durability
   ├─ Running cost        (from specs.power_draw)
   ├─ Repair and spare parts  (index, window, and the steps in a <details>)
   ├─ Spare parts         (the catalogue with part numbers)
   ├─ Security updates    (until when)
   ├─ Files & documents   (manual, DoC, dimensional drawing)
   ├─ Product safety (GPSR)
   ├─ Product questions
   └─ Product Share

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

⭐ That order is the recipe’s real argument. Energy → running cost → repair → spare parts → updates is the sequence a technical buyer actually asks about: what does it cost to run, what happens when it breaks, how long will it be supported. Marketing copy sits above it; the answers sit below, in one column, without a tab to click.

⛔ Do not put the technical blocks behind product-tabs. A tab hides content from a reader who is scrolling to decide, and the Repair block’s HowTo markup requires the steps to be visible on the page — Google forbids marking up what a reader cannot see.

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).
💡 Turn on the comparison. card_compare on the product card plus compare_display: drawer gives a side-by-side table of up to four models, built from the same comparable flags — the single highest-value thing you can switch on in a gadget store, and it needs no app.
💡 Put the key specs on the card. card_specs_mode: inline with three or four values turns a grid of pictures into a grid of answers.
⛔ Never invent a registration number. EPREL ids, GTINs and EANs sit in a densely populated space: an invented one either belongs to somebody else or collides with theirs. For demo content use none at all — see §7a.4.

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")
   ├─ Variant picker (dropdowns — easier than swatches for many options)
   ├─ Buy Buttons + "Request quote" secondary
   ├─ Product Description (short — the data belongs below, in fields)
   │
   ├─ Specifications      (the table, from the spec_sheet)
   ├─ Compatible with     (what it fits — decisive in parts catalogues)
   ├─ Spare parts         (part numbers, tools, availability)
   ├─ Files & documents   (datasheet, declaration of conformity, drawing)
   ├─ Product safety (GPSR)
   └─ Product questions

⚠️ Do not write specifications into the description. An earlier version of this recipe advised “SKU + technical details prominent” and a Specs tab full of prose — that predates the blocks. A spec kept as a spec_field is filterable, comparable, appears on the card, and stays correct in both languages. The same value typed into a description is none of those things.

Two pages of their own

Page	Template	Why
Business account	`page.b2b.json` — the `b2b-antrag` section	Collects company, VAT id and the rest, through Shopify’s own contact form. ⛔ It needs its own page: `form.posted_successfully?` is true for every contact form on a page, so sharing one with the contact form shows the success message on both.
Compare	`page.compare.json` — the `compare` section	A side-by-side table of up to four products, built from the `comparable` flag on each `spec_field`. In a catalogue of near-identical parts this is the page buyers actually use.

Settings highlights

Buttons: rectangle/slightly-rounded, NO glow, solid colors
Cart drawer: full-featured but compact (B2B users add many items)
Recently viewed: ON (B2B users often re-order the same parts)
Quick View: ON (browse fast)
Compare button on cards (card_compare): ON, with compare_display: inline — B2B buyers compare deliberately, not in a drawer
Key specs on the card (card_specs_mode: inline, 3–4 values): the difference between browsing pictures and browsing answers
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”).
💡 Put the Compatibility finder on the home page. In a parts catalogue “pick your machine” beats any menu, and it reads the same compat_target entries as the product blocks.
⚠️ The contact-form field names are text your staff reads. Shopify shows the names inside contact[…] as headings in the notification email, so they stay in English and are deliberately not translated — otherwise the same inbox would carry “Company” and “Firma” for one field.

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 Collapsible — Ingredients / How to use / Pairs with / Shipping
   ├─ Product safety (GPSR)   ← see the note below
   └─ 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
Engineering reference → CLAUDE.md (~290 rules, code patterns)

Welcome to building with Hyprism.