Composable architectures for marketing sites

TL;DR

Marketing sites have two jobs: tell a story and drive action. A composable stack separates concerns (content, commerce, media, search, analytics) so teams can ship changes weekly—not quarterly—without breaking what already works.

• Move content into a real CMS and make pages from reusable blocks.
• Keep commerce where the money lives; orchestrate it from the frontend.
• Ship fast previews, safe experiments, and measurable outcomes.
• Start small, prove impact, then expand.

What "composable" means in practice

Instead of one platform doing everything, each system does one job well, and the frontend composes the experience. That gives you flexibility without losing brand consistency.

Reference stack (swap tools as needed):

• Frontend: Next.js (App Router) on Vercel for fast SSR/ISR and global caching.
• Commerce: Shopify or Medusa as the system of record for products, prices, and orders.
• CMS: Sanity or Contentful for blocks, landing pages, and localized copy.
• Media: Vercel Images or Cloudinary with AVIF/WebP and responsive sizes.
• Search: Algolia or Meilisearch for instant results and filters.
• Payments & trust: Stripe/Klarna plus reusable "trust" blocks and clear policies.
• Analytics & experiments: GA4 or Matomo with simple A/B toggles per block.

Principle: Content is owned by the CMS; money is owned by the commerce engine. The frontend orchestrates.

When you should (and shouldn't) go composable

Choose composable if you need to:

• Launch campaigns or landers frequently without developer tickets.
• Localize for multiple markets without copy/paste duplicates.
• Improve Core Web Vitals and SEO with tight control over the frontend.

Avoid it (for now) if:

• You're pre–product-market-fit and a single tool covers 90% of needs.
• The team can't own a couple of best-of-breed tools yet (ops maturity matters).

Blocks that actually move conversion

High-consideration products need clarity and proof. Bake these into reusable blocks:

• Trust strip near every primary CTA: "Free insured shipping · 30-day returns · 2-year warranty".
• Process timeline (e.g., repairs/custom): Book → Receive → Workshop → QA → Return.
• Helpers: size guides, material comparisons, FAQs close to the decision.
• Story blocks: craft, materials, ethics, workshop photos—kept concise.
• Before/after gallery for credibility.
• Localized microcopy: shipping, currency, VAT (SE/DK/EN) + hreflang.

How a campaign ships on a composable stack

1. Pick a page template (Collection, Story, Landing).
2. Assemble blocks in the CMS (hero, grid, proof strip, story, FAQ).
3. Preview instantly from draft, not staging.
4. Publish with events pre-wired to analytics.
5. A/B test specific blocks, not entire pages; roll back instantly.

Performance and SEO you can keep green

• Pre-define image crops per block; ship AVIF/WebP with width breakpoints.
• Use ISR + edge caching for high-traffic routes; SSR PDPs for freshness.
• Keep above-the-fold JS/CSS tiny; lazy-load non-critical sections.
• Add structured data (Product, Breadcrumb, FAQ), clean slugs, and canonicals.
• Aim for ≥90 CWV on Home, Collection, PDP, and key campaign pages.

Result: Faster pages, better rankings, and a checkout that doesn't make people wait.

Going multi-market without duplication

• One schema; localized fields per block in the CMS.
• Prices and currency come from commerce; never hardcode.
• If a block isn't translated, fall back gracefully and log it.
• Experiment toggles by market: show what each audience needs.

Migration without the burn

You don't need a big-bang rebuild. Use a strangler pattern:

1. Pick one critical flow (Home → Collection → PDP → Checkout).
2. Move copy/media for that flow to the CMS and wire live preview.
3. Proxy legacy routes while you carve off new ones.
4. Map product data (handles, variants, media) and set redirects.
5. Stabilize, then optimize; start A/B tests on the highest-traffic blocks.

Key principle: Replace incrementally, validate quickly, expand confidently.

Keep it governed (so it stays fast)

• Design tokens: color, type, spacing, motion.
• Component docs: when to use each block, copy lengths, image ratios.
• Content QA: alt text, links, translations, trust copy present.
• Cadence: weekly content windows, monthly block updates.

Risks and how to de-risk them

• Too many vendors: pick fewer, stronger tools; add later when ROI is clear.
• Content sprawl: enforce templates and required fields; archive dead blocks.
• Performance drift: Lighthouse + CWV checks in CI; image budgets per block.
• Analytics soup: one event schema, dashboards that answer real questions.

A 30/60/90 you can lift

Days 1–30: Foundations

• Choose CMS + image strategy, define tokens, build 6–8 core blocks.
• Migrate Home + one Collection + PDPs; wire analytics and preview.

Days 31–60: Expansion

• Add Repairs/Services pages with a process timeline + form.
• Ship search and filters; add trust strip and story blocks site-wide.
• Start A/B tests on hero copy and CTA placement.

Days 61–90: Scale

• Localize SE/DK/EN with hreflang.
• Add before/after gallery and size guide; push CWV to ≥90 on key routes.
• Create a campaign landing template so marketing can launch in hours.

What success looks like

• Time-to-launch: new campaign pages in hours, not sprints.
• Conversion: uplift on PDP → Checkout after trust/helpers.
• SEO: better rankings from speed + structured data.
• Operational sanity: fewer dev tickets for content and layout.

Bottom line: A composable stack turns your site into a product you can iterate on—not a brochure you rebuild every year.