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

1. Payment stack: Wire up Coinbase Commerce (fastest path to BTC) alongside Squarespace checkout.

2. Products: Add 2–3 placeholder SKUs with clean mock photos, price, inventory, shipping.

3. Policies: Publish Privacy + Terms pages and link them in the footer.

4. SEO & Meta: Set title/description, OG image, favicon, social sharing.

5. Analytics: Connect GA4 + Search Console; request indexing.

6. 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.