21m Threads: From Idea → Live Store in 1h 50m
TL;DR
We took “21m Threads” from zero to a working Squarespace shop in a single sprint: brand system, logo set, hero/backgrounds that survive Squarespace’s zoom, a desktop-grade footer with a live BTC price, and a full-width rolling crypto ticker. We hit (and solved) the usual 7.1 quirks: background image cropping, CSS scoping, and CORS on price APIs. Site vibes: FiDi-clean, Bitcoin-bold, no irony. 🧢⚡️
The Brief (what we started with)
Name: 21m Threads
Target: finance guys / crypto-native, minimal and sharp
Core idea: 21 million BTC total supply → “scarcity woven in”
Colors: Bitcoin Orange #F7931A, White #FFFFFF, Charcoal/Black #0A0A0A
Fonts: Headline Anton, body Epilogue
Platform: Squarespace (7.1)
Store page ask: header image that won’t look busted when SS crops everything
Brand System (fast + durable)
Logo set:
Wordmark + emblem pass (orange 21m, black/white “THREADS”).
Exported black and white transparent PNGs for universal placement.
Pattern/backgrounds:
Bitcoin-orange wallpaper with repeating ₿ (subtle, seamless).
FiDi skyline hero photos (no text overlay).
Crypto-ticker header graphic for the Hats page (no hats in frame, abstract ticker).
Why it works: high-contrast palette, loud headline font, and backgrounds that add depth without fighting product photos.
Build Steps (what we actually did)
1) Hero & Cropping: “Zoom-out” the right way
Squarespace loves to crop/cover backgrounds. Our fixes:
Gave the hero section an ID (hero-hat).
Hid SS’s internal background <img> and painted our image on the container with background-size: contain so the whole photo shows.
Set min-height so the hero doesn’t collapse.
Turned Parallax off and used a clean center center positioning.
Lesson: When “object-fit” on their <img> won’t obey, remove it from the equation and set background-image on the container.
2) Footer: desktop-grade layout + live BTC price
Built a 3-column, full-width footer (left = ©, center = Contact/Privacy/Terms + centered BTC, right = Bolt AI Tools logo + “Built with Bolts”).
Split HTML in a Code Block and CSS in Design → Custom CSS (Squarespace ignores <style> in Code Blocks).
Live ticker source: CoinGecko (clean, formatted), refreshing every 60s.
What broke & why:
Coindesk API → intermittent CORS blocks → “Unavailable.”
Fix → switch to CoinGecko, and later we added multi-fallback logic (CoinGecko → CryptoCompare → Binance) if needed.
3) Rolling Crypto Ticker (full-width, live)
Inserted a Code Block with HTML + JS for a continuous marquee effect.
Gave the section an ID (ticker-section) and removed max-width constraints only for that section so it becomes truly edge-to-edge.
Two duplicated rows animate left for a seamless loop.
Mobile: slowed the animation slightly and tightened chip spacing.
What broke & why:
First pass “didn’t go full-width” → Squarespace content wrapper was clamping max-width/padding.
Fix → scope CSS to #ticker-section and use 100vw + centering transform.
What Worked (smooth wins)
Minimal palette with a single accent pop → instant “premium” read.
Abstract header for the Hats page (ticker energy, no product photos) → survives all crop ratios.
Split CSS/HTML → stopped weird Code Block style failures.
Centered BTC price under the middle links → reads like a micro-dashboard, not an afterthought.
What Didn’t (and how we patched it)
Squarespace zoom/crop: “object-fit” on internal images often loses; container background wins.
Full-bleed strips: 100vw alone isn’t enough; remove the parent max-width on that section.
Live price “Unavailable”: CORS/rate limits. We swapped sources and added fallback strategy.
Inline <style> inside Code Block: Squarespace may ignore it; use Design → Custom CSS.
Prompts I wish we had up front (would’ve shaved ~15 minutes)
Hero usage rule: “If image must always be fully visible, letterbox is OK.”
Exact section IDs where you want overrides (hero, ticker, footer).
Ticker placement choice: True background behind heading vs separate strip.
Payment stack selection for BTC (Coinbase Commerce vs BTCPay vs BitPay).
Aspect ratios for key images (hero banner, header, product thumbs).
None of these blocked us—they just would’ve meant fewer back-and-forth tests.
Where We Landed (now)
✅ Brand kit in place (logo PNGs in black/white, transparent).
✅ Backgrounds & headers that survive crop.
✅ Footer with centered BTC price + Bolt branding.
✅ Rolling crypto ticker, full-width, live data.
✅ Desktop ↔ mobile responsive centering and spacing.
✅ Hats page header uses crypto-esque ticker graphic (no hats).
Next 30-Minute Win List
Payment stack: Wire up Coinbase Commerce (fastest path to BTC) alongside Squarespace checkout.
Products: Add 2–3 placeholder SKUs with clean mock photos, price, inventory, shipping.
Policies: Publish Privacy + Terms pages and link them in the footer.
SEO & Meta: Set title/description, OG image, favicon, social sharing.
Analytics: Connect GA4 + Search Console; request indexing.
Perf polish: Compress media; set lazy-load where possible.
Snippet Highlights (for future you)
(A) When Squarespace crops your hero:
/* Target your hero section ID */
#hero-hat .sqs-section-background img { display: none !important; }
#hero-hat .sqs-section-background {
background-image: url(YOUR-HERO-URL);
background-size: contain; /* or cover, if crop is okay */
background-position: center center;
background-repeat: no-repeat;
background-color: #000; /* fallback */
}
#hero-hat { min-height: 80vh; } /* give it some height */
(B) Ticker section → true full-bleed:
/* Remove container clamps on that section */
#ticker-section .content-wrapper,
#ticker-section .section-content { max-width: none; width: 100%; padding: 0; }
/* Make the strip span the viewport */
#crypto-ticker-bg {
position: relative; left: 50%; transform: translateX(-50%);
width: 100vw; background:#000; overflow:hidden; padding:10px 0;
}
(C) BTC price fallback logic (browser-safe):
Start with CoinGecko; if blocked, try CryptoCompare, then Binance; update the DOM on success.
Reflection
This was classic “Squarespace reality vs. the mock”: keep your look minimal, control the containers, and don’t fight their internal image tags—replace them. The finance-bro vibe works because we kept it clean, bold, and fast. The little details (centered BTC, orange hover accents, subtle patterns) are doing a lot of brand lifting with almost no overhead.
Sign-off
Built live with ⚡ Bolt AI Tools. If you want this same sprint energy for your brand — from idea to store in a night — you already know who to call.
