# Delta LP Playbook The "how to build the next Delta LP" reference. Built from what shipped on `/5`, `/10`, `/20`, `/5-guide`, `/10-guide`, `/20-guide`. If a future LP doesn't follow this, the deviation should be deliberate. Companion docs: - [DELTA_LANDING_PAGE_BRIEF.md](DELTA_LANDING_PAGE_BRIEF.md) — paid-media data, sub-personas, why each page exists - [copy-reference-5-10-20.md](copy-reference-5-10-20.md) — brand voice, claims, block ideas, FAQ bank, pull-quote bank - [README.md](README.md) — stack and deploy notes --- ## Table of contents 1. The two LP archetypes 2. Tier system and naming rules 3. Compliance rules (never break these) 4. Stack and file layout 5. Anatomy of a Sampler LP (`/N`) 6. Anatomy of a Guide LP (`/N-guide`) 7. Shared building blocks 8. Buy block, cart, and checkout wiring 9. Imagery system 10. Copy patterns and signature lines 11. Pricing and offer math 12. How to add a new LP 13. Pre-ship checklist 14. Common mistakes (already learned) 15. Future LP ideas (from the brief) 16. Shopify IDs (truth source from production go.drinkdelta.com) 17. Production code patterns (HTML, JS, checkout) 18. V2 vs production: the deltas worth knowing --- ## 1. The two LP archetypes Every Delta acquisition page is one of two formats. Pick one before writing anything. ### Sampler LP (`/5`, `/10`, `/20`) Editorial PDP. Hero with hero image and price card, then a long product story (USPs, moments, comparison, reviews, founder, FAQ), then a buy block that runs a flavor + pack + subscribe configurator. CTA is "shop now," the page is built to convert traffic that already self-identified with the tier (e.g. clicked an ad for "the social drink"). Use when: the ad sold a tier-specific product. The job is to close. ### Guide LP (`/5-guide`, `/10-guide`, `/20-guide`) Advertorial listicle. Article-style hero, then a numbered "5 reasons / 5 nights / 5 things" body. Each item is one flavor + one moment + one teaching point. Buy block lands once mid-article and again at the bottom. No configurator, no flavor switcher, just the Sampler. Use when: the ad sold curiosity, hosting, ritual, or a frame ("what your friends are quietly drinking instead of wine"). The job is to teach, then close. The two formats share a navbar, top promo bar, footer, FAQ, color tokens, and the buy block. They diverge entirely in the middle. --- ## 2. Tier system and naming rules Three tiers. They map 1:1 to the three SKUs. The dose number never appears in user-visible copy. | Tier | Internal | User-visible name | Vibe | Audience | |---|---|---|---|---| | Light | 5mg | **The Light** | Sessionable, daytime, casual | First-timers, sober-curious, social weekday | | Moderate | 10mg | **The Moderate** | Social, balanced, sweet spot | Regulars, hosts, sober-curious at the table | | Bold | 20mg | **The Bold** | Wind-down, deep, longer-lasting | Experienced, sleep, evening ritual | Naming scheme used everywhere: - Product: "The Light Sampler", "The Moderate Sampler", "The Bold Sampler" - Eyebrow on `/N`: "The Light Tier · 21+", "Sober curious · 21+", etc. - Reading-level for guides: "Garden Seltzer 101" (Light), "Garden Seltzer 102" (Moderate), "Garden Seltzer 103" (Bold) Internal/code references that may keep "5mg/10mg/20mg" (filenames, JS variables, comments, image paths like `/assets/images/sampler/10mg/hero.jpg`) are fine. User-visible HTML, alt text, meta tags, JS-rendered strings, and titles are not. --- ## 3. Compliance rules (never break these) These are project rules. They have already been violated and corrected once each. Don't repeat. 1. **No "mg" in user-visible copy.** Use Light / Moderate / Bold. This is Meta-ad compliance for cannabis dose claims. Grep `\d+mg` before shipping. (See [memory: feedback_no_mg_in_copy.md](../../../../../Users/williamsartorius/.claude/projects/-Volumes-selfmade-lucid-Claude-Code-Landing-Pages-Drink-Delta-LP-V2/memory/feedback_no_mg_in_copy.md)) 2. **No em dashes (`—`, `–`).** Project voice rule. Use periods, commas, or colons. Hyphens (`-`) for compound words are fine. Grep before shipping. 3. **No banned words in body copy:** "THC", "high", "buzz", "stoner", "weed". "Hemp" is OK in spec/factual context. "Plant-based", "garden seltzer", "feel-good", "lift", "sip" are the working alternatives. 4. **No sticky add-to-cart bar.** Don't include `
` or the `js-sticky-add` handler on new LPs. The `/5` legacy version may still have one — leave it. 5. **All visible cans are NO-THC variants** from the brand library. The product is photographed and rendered without dose call-outs on the can. 6. **21+ marker** appears in the hero eyebrow or trust strip on every page. 7. **FDA-style disclaimer** lives in the footer. Already in `site-footer`. Don't remove. --- ## 4. Stack and file layout Static HTML, no build step. Bootstrap 5 + jQuery + a few small site scripts. Hosted on Vercel. ``` / → redirects to /5 (handled by index.html) /5/index.html → Light Sampler LP /5-guide/index.html → Light Guide /10/index.html → Moderate Sampler LP /10-guide/index.html → Moderate Guide /20/index.html → Bold Sampler LP /20-guide/index.html → Bold Guide /index.html → SelfMade-facing card grid (preview / showcase, not a landing page) /assets/css/site.css → all shared styles (one file, ~2k lines) /assets/css/bootstrap.min.css /assets/js/jquery-3.7.1.min.js /assets/js/bootstrap.bundle.min.js /assets/js/shop.js → cart, checkout permalink, mini-cart drawer /assets/js/sampler-configurator.js → /5 PDP configurator (flavor/pack/subscribe) /assets/js/sampler-configurator-10.js → /10 variant /assets/js/sampler-configurator-20.js → /20 variant /assets/js/animations.js → IntersectionObserver fade-ins, can rotators /assets/images/cans/ → individual flavor cans (5mg-rotation/, 10mg-rotation/, 20mg-rotation/) /assets/images/sampler/{5,10,20}mg/ → sampler box renders, gallery thumbs /assets/images/lifestyle-{5,10,20}mg/ → lifestyle moments per tier /assets/images/icons/zero/ → 0/0/0 SVG icons (sugar, alcohol, calories, gluten) /assets/images/retailers/ → Total Wine, Sprouts, Circle K, Winn-Dixie, ABC, Kwik Trip, Refuel, Lowes Foods /assets/images/founder/jack.jpg /assets/images/logo.svg /assets/images/favicon-delta.png /vercel.json → cleanUrls, rewrites /N → /N/index.html, immutable cache for assets ``` ### Versioning the cached assets `site.css` and the JS files are referenced with a `?v=YYYYMMDD` cache-buster query (`site.css?v=20260502c`). When you edit a shared file, bump the version on every page that uses it. Vercel headers cache them with `must-revalidate` so the bust matters. ### Local dev ``` npx serve . # static-serve the project ``` There's no test runner, no bundler, no TS. Edits go straight in. Vercel builds from main. --- ## 5. Anatomy of a Sampler LP (`/N`) Every sampler page has this section order. Keep it stable; the cart and configurator wire through these IDs. ``` 1. — title/meta, fonts, bootstrap, site.css?v=... 2. .bar — top promo strip ("Free shipping over $50 · NEW20 · 30-day guarantee") 3. .site-header > .nav — logo, nav links (#why, #flavors, #reviews, #faq), .cart-trigger 4. .page-hero — H1 + lede, 0/0/0 line, CTA, mini-trust, hero image with .hero-promo-card overlay 5. .quick-testi-bar — 3 short testimonial cards (Gruns-style social-proof bar right under hero) 6. .brand-marquee — scrolling pull-quote ribbon 7. .zero-strip-section — 4 0/0/0 icons (sugar, gluten, alcohol, calories) 8. .press-strip — retailer logos row ("Stocked at retailers nationwide") 9. .can-usps-section — big rotating can in the middle, 6 USP blocks around it 10. .section-stats — 4 stats (4.88★, 100k+ sippers, 15min onset, 0/0/0) 11. .section-divider-text — italic pull-quote divider 12. .product-section #shop — THE BUY BLOCK (configurator + add-to-cart) 13. .moments-grid — 4 lifestyle moments specific to the tier 14. .compare table — Delta vs Other Seltzers vs Wine/Cocktail 15. .pullquote-section — single hero pullquote block 16. .testi-grid #reviews — 3 image testimonials + 3 text testimonials 17. .section-deep — dark "made with the good stuff" CTA 18. .founder-section — Jack Sherrie quote + photo + secondary CTA 19. .faq-list #faq — 5 to 7 FAQ details 20. .section-cream — final "ready when you are" CTA 21. .site-footer — links, FDA disclaimer, copyright 22. .offcanvas#cartDrawer — cart drawer (Bootstrap offcanvas) 23. ``` V2 doesn't load the Stay AI widget — V2 builds the subscribe-card UI in HTML directly and just passes the selling-plan ID through to Shopify at checkout. If you ever need to expose the full Stay AI subscriber portal (account management, swap, skip), wire in the widget. Otherwise V2's lightweight pattern is enough. ### Vercel rewrite pattern (V2 vercel.json) ```json { "version": 2, "cleanUrls": true, "trailingSlash": false, "rewrites": [ { "source": "/5", "destination": "/5/index.html" }, { "source": "/5-guide", "destination": "/5-guide/index.html" }, { "source": "/10", "destination": "/10/index.html" }, { "source": "/10-guide", "destination": "/10-guide/index.html" }, { "source": "/20", "destination": "/20/index.html" }, { "source": "/20-guide", "destination": "/20-guide/index.html" } ], "headers": [ { "source": "/assets/(.*)\\.(png|jpg|jpeg|webp|avif|gif|svg|ico|woff|woff2|ttf|otf|eot)", "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }] }, { "source": "/assets/(.*)\\.(js|css|mjs|map)", "headers": [{ "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }] } ] } ``` When adding a new route (e.g. `/social-occasion`), append to the rewrites array. Asset cache headers are aggressive on images/fonts (`immutable`, 1 year) and conservative on JS/CSS (`must-revalidate`, 0). That's why the `?v=YYYYMMDDx` cache-bust on `site.css` matters: assets are immutable-cached, so the URL must change to force a re-fetch. --- ## 18. V2 vs production: the deltas worth knowing V2 is *not* a clone of production. It's a different codebase serving different acquisition routes. Knowing where they diverge prevents bugs. | Aspect | Production go.drinkdelta.com | V2 (this repo) | |---|---|---| | Routes | `/5`, `/10`, `/20`, `/bloodorange` | `/5`, `/5-guide`, `/10`, `/10-guide`, `/20`, `/20-guide` | | HTML | One `index.html`, route-config object | One `index.html` per route | | Discount code | `NEW` | `NEW20` | | Cart localStorage key | `drink_delta_cart` | `delta_v2_cart` | | Subscription widget | Stay AI widget loaded (`stay-widget.js`) | Custom HTML + selling-plan-id passthrough | | Bundle subscription IDs | `3776938228` etc. | `3776938228` etc. (same — they share the bundle product) | | Flavor subscription IDs | `1892745389` (4w), `2698510509` (1w), `2698674349` (2w) etc. | `2698674349` (2w) only | | Product fetch | `/products.json` API call at runtime | Hardcoded variant maps in `shop.js` and configurator JS | | Strength label internal | "experience" for 20mg | "bold" for 20mg (in V2 CSS data-tier and copy) | | Tier name shown to user | "Light / Moderate / Experience" — production drift | "Light / Moderate / Bold" — V2 follows brand brief | | Compliance ("mg" in copy) | Some legacy "5/10/20" framing remains | Stripped out, project rule enforced | | Sticky add-to-cart bar | Not present | Removed from new LPs; `/5` legacy still has it | | Top promo bar copy | Per-route via ROUTE_CONFIG | Hardcoded in HTML | | Guide / advertorial pages | Not present | Three (`/5-guide`, `/10-guide`, `/20-guide`) | ### When to sync something back into production If a V2 LP wins and we want to ship the angle on production: 1. Port the *copy* and *imagery*, not the route-shape. 2. Add a new entry to production's `ROUTE_CONFIGS` keyed by the new path. 3. Use production's discount code (`NEW`), not V2's (`NEW20`). 4. Use production's cart key (`drink_delta_cart`) — don't introduce a second. 5. Use the `1892745389` (4-week) plan for individual-flavor subscribes on production. V2's `3776...` plans are bundle-only. ### When to leave production alone Production serves established acquisition flows with proven creative. Don't touch it for tests — that's what V2 (this repo) is for. V2 is the lab. Production is the store. --- ## Appendix A: full ID cheat sheet (paste-ready) Drop this into the head of any new V2 page or buy-block reference. ```js // Shopify const SHOPIFY_DOMAIN = 'bfac5a-e3.myshopify.com'; const DISCOUNT_CODE = 'NEW20'; // V2 only. Production uses 'NEW'. const STORAGE_KEY = 'delta_v2_cart'; // Sampler bundle products const SAMPLERS = { light: { productId: '8371013451949', variantId: '45102353678509', oneTime: 67.96, subscribe: 54.37, perCanOT: 4.25, perCanSub: 3.40 }, moderate: { productId: '8449097007277', variantId: '45486123516077', oneTime: 75.96, subscribe: 60.77, perCanOT: 4.75, perCanSub: 3.80 }, bold: { productId: '8449097433261', variantId: '45486167949485', oneTime: 87.96, subscribe: 70.37, perCanOT: 5.50, perCanSub: 4.40 } }; // Selling plans (V2 bundle subscription) const SUBSCRIBE_PLAN_BUNDLE = '3776938228'; // every 4 weeks (default) const BUNDLE_FREQUENCIES = { '3776938228': 'Every 4 Weeks', '3776970996': 'Every 6 Weeks', '3776970997': 'Every 8 Weeks', '3776970998': 'Every Month' }; // Selling plans (individual flavor subscription) const SUBSCRIBE_PLAN_FLAVOR = '2698674349'; // every 2 weeks // Individual flavor variants const FLAVOR_VARIANTS = { light: { productId: '8371013451949', flavors: { 'bright-berry': { '4': '43706600226989', '12': '43476426260653' }, 'tropical-mango': { '4': '43706652000429', '12': '43644594421933' }, 'juicy-watermelon': { '4': '43706563559597', '12': '43644594520237' }, 'squeeze-of-lime': { '4': '43706638991533', '12': '43644594618541' } } }, moderate: { productId: '8449097007277', flavors: { 'passion-fruit': { '4': '44305077665965', '12': '44305077698733' }, 'blood-orange': { '4': '44305076453549', '12': '44305076486317' }, 'pink-lemonade': { '4': '44305071112365', '12': '44305071145133' }, 'blueberry': { '4': '44305054793901', '12': '44305054826669' } } }, bold: { productId: '8449097433261', flavors: { 'passion-fruit': { '4': '43644594290861', '12': '44031199215789' }, 'blood-orange': { '4': '43644594356397', '12': '43916737282221' }, 'pink-lemonade': { '4': '43644596551853', '12': '44031200755885' }, 'blueberry': { '4': '43644596715693', '12': '43644596748461' } } } }; // Cannabis Spirit (only for /bloodorange or cross-sell) const SPIRIT = { productId: '8460535595181', variantId: '45708036374701', title: 'Blood Orange Spirit', price: 59.00, packSize: '1 Bottle' }; ``` ## Appendix B: minimal Sampler buy-block (V2) The smallest valid V2 buy-block. Drop this into any new page, fill the four data-attrs from Appendix A, and `shop.js` does the rest. ```html

The Light Sampler · 16 Cans · 4 Flavors

$67.96 $54.37 20% off · code NEW20

Free shipping over $50 · Code NEW20 auto-applies at checkout

30-day Sip-It-and-Love-It refund. If it's not for you, we refund the full pack. No questions.

``` That's it. The four `data-*` attributes are the contract. `shop.js` reads them on click, writes the cart line to `localStorage.delta_v2_cart`, opens the cart drawer, and sets the checkout permalink with `?discount=NEW20` baked in. Everything else is window dressing.