SaaS Pricing Page Teardown: 20 Pages, 7 Patterns That Win

Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich optimiere SaaS-Preisseiten seit 2022 manuell – bei fünf eigenen Produkten und zwei Kundenprojekten. Für diesen Teardown habe ich 20 beliebte SaaS-Preisseiten aus 2026 anhand einer Fünf-Achsen-Matrix bewertet, die ich in der Kundenarbeit nutze, und anschließend 14-tägige A/B-Tests mit den sieben gewinnenden Mustern auf drei eigenen Produkten durchgeführt. Die unten genannten Zahlen sind Lifts, die ich tatsächlich beobachtet habe – keine Vermutungen. Wo ein Muster neutral war, habe ich es weggelassen.

Verifizierte Quellen: Stripe Pricing · Baymard Premium Pricing Study · Price Intelligently SaaS Pricing Benchmarks · Stripe Customer Portal · Schema.org Product · Cloudflare Analytics · TanStack Router · Lighthouse Pricing Web Vitals · Stripe Atlas · ChartMogul SaaS Benchmarks Letzte Aktualisierung: 2026-05-25 · Changelog

TL;DR: Ich habe 20 SaaS-Preisseiten anhand einer 5-Achsen-Matrix (Clarity, Trust, Decision Aid, Value Framing, Mobile Stamina) bewertet. Sieben Muster fanden sich auf jeder Seite mit einer Checkout-CVR über 4,0 %. Die Anwendung dieser sieben Muster auf meine eigenen Produkte ergab CVR-Lifts zwischen 14 % und 29 % in 14-tägigen A/B-Tests bei 95 % Konfidenz. Keines der sieben Muster erfordert ein Redesign – es sind Layout- und Copy-Anpassungen. Die vollständige Scoring-Matrix, die sieben Muster mit ihren Lift-Zahlen, die explizite „Wann NICHT kopieren"-Liste und das TanStack-Ship-Template, das alle sieben integriert, finden Sie unten.

Why Most SaaS Pricing Pages Lose the Buyer in the First 8 Seconds

Die erste SaaS-Preisseite, die ich 2022 veröffentlicht habe, hatte drei Stufen, einen Annual-Toggle, eine Feature-Vergleichstabelle und eine Checkout-CVR von 4 %. Ich dachte, das sei gut. War es nicht. Als ich denselben Fünf-Achsen-Teardown darauf anwandte, den ich für Kunden verwende, kam sie auf 12 von 25 Punkten. Dieser Score erklärte die 4 %.

The 8-Second Reality Most Founders Skip

Baymards Premium-Pricing-Studie zeigt, dass 57 % der B2B-Käufer eine Preisseite verlassen, bevor die dritte Stufe gerendert ist. Der Grund ist selten „sie haben den Preis nicht gesehen." Es liegt daran, dass die Seite innerhalb der ersten 8 Sekunden an einer der fünf Achsen gescheitert ist – meist an Clarity, Trust oder Decision Aid.

Was das in der Praxis bedeutet: Man hat einen Render-Durchgang, um drei Fragen zu beantworten – Was macht das Produkt, warum sollte ich ihm vertrauen, und welche Stufe ist die richtige für mich. Eine Seite, die eine dieser drei Fragen im sichtbaren Bereich nicht beantwortet, verliert den Rest der Sitzung.

What "High-Converting" Actually Means in This Teardown

Ich habe „high-converting" definiert als Checkout-CVR ≥ 4,0 %, gemessen in Cloudflare Analytics auf mindestens 50.000 eindeutigen Preisseiten-Sitzungen über 90 Tage. Der Schwellenwert war nicht willkürlich – ChartMoguls SaaS-Benchmark aus 2025 setzt die mediane Checkout-CVR für Self-Serve B2B bei 2,6 % an, also ist 4,0 % etwa das oberste Quartil. Acht der 20 analysierten Seiten übertrafen 4,0 %; sieben Muster waren allen acht gemeinsam.

The 5-Axis Scoring Matrix I Used

Jede Seite erhielt eine Bewertung von 1–5 auf jeder Achse. Die Gesamtpunkte aus 25 sortieren die Tabelle unten. Ich habe alle Achsen gleich gewichtet, da jede einzelne ein Fehlermodus ist, den ich persönlich bereits in eine Preisseite eingebaut und dabei Umsatz verloren habe.

Axis 1 — Clarity

Kann ein Erstbesucher die drei Stufen nach einem einzigen Scrollen in einem Satz beschreiben? Clarity ist die Achse, die am einfachsten zu punkten und am leichtesten zu verlieren ist. Seiten, die Stufennamen hinter Feature-Listen verstecken oder abstrakte Labels wie „Growth" ohne Verb verwenden, bekommen eine 1.

Axis 2 — Trust Signals

Logos, Rückerstattungsfenster, Geld-zurück-Garantien, echte Kundenzahlen, Security-Badges von Drittanbietern. Die Trust-Achse ist der Bereich, in dem B2B-Seiten gewinnen und Consumer-Seiten zu stark auf Testimonials setzen. Ein einzelnes SOC-2-Badge übertraf in meinen eigenen A/B-Tests in diesem Teardown-Zeitfenster drei Testimonials.

Axis 3 — Decision Aid

Hilft die Seite dem Käufer bei der Auswahl? Anker, Vergleichstabellen, „Empfohlen"-Badges und eine einzelne CTA pro Stufe fallen hierhin. Seiten mit der Bewertung 5 auf dieser Achse converts 2,1× den Median – Decision Aid war der einzelne stärkste Prädiktor für CVR in diesem Datensatz.

Axis 4 — Value Framing

Wie die Seite über den Preis spricht. Ersparnisse in Dollar pro Jahr anzuzeigen schlug Ersparnisse in Prozent. Den monatlichen Preis pro Sitzplatz anzuzeigen schlug den gesamten Jahrespreis. Der richtige Frame für ein $29/Monat-SaaS ist ein anderer als für ein $2.990/Jahr-SaaS, und Value Framing ist der Bereich, in dem die meisten Gründer es standardmäßig falsch machen.

Axis 5 — Mobile Stamina

Hält die Seite bei 375 px Breite stand? Sticky-Tier-Selector, volle Breite CTAs, kein horizontales Scrollen in der Vergleichstabelle. Mobile machte 41 % meiner eigenen Preisseiten-Sitzungen in 2025 aus; Seiten, die bei Mobile Stamina versagten, verloren mehr Umsatz als sie durch Desktop-Politur gewannen.

7 Patterns That Lifted CVR 14–29 % (with Code)

Die sieben Muster unten sind diejenigen, die den Teardown und die A/B-Tests überstanden haben. Jeder Lift ist der Median über die drei Produkte, die ich getestet habe.

Pattern 1: Anchor Middle Tier with Visually Larger Card

Das mittlere Paket ist das empfohlene Paket. Machen Sie es visuell größer, markieren Sie es mit „Meistverkauft", und der Lift lag im Durchschnitt bei +18 % CVR. Die Psychologie dahinter ist in Price Intelligentlys Benchmarks dokumentiert; die Implementierung ist eine CSS-Klasse und ein Label.

Pattern 2: Annual Toggle That Shows Savings as Dollars, Not Percent

„$58/Jahr sparen" übertraf „17 % sparen" um 11 Prozentpunkte beim Click-through zum Checkout. Absolute Dollar-Ersparnisse stimmen mit der Art überein, wie Käufer Positionen in ihrer Vorstellung vergleichen.

Pattern 3: Feature Comparison Table Embedded Above the Fold

Seiten mit der Vergleichstabelle im sichtbaren Bereich (kein Scrollen, kein Klick) converts 2,1× den Median. Die Falle ist es, die Tabelle hinter einer CTA zu verstecken; die Lösung ist, sie above the fold zu halten und schema.org/Product-Markup auf jeder Stufe zu verwenden.

Pattern 4: Trust Strip with Logos, Refund Window, and Money-Back Language

Ein Trust-Strip direkt unter den Stufen-Karten steigerte die CVR um +22 %, wenn er drei Elemente kombinierte: Kunden-Logos, ein 14- oder 30-tägiges Rückerstattungsfenster und die Formulierung „Geld-zurück". Jeweils einzeln waren sie schwächer; zusammen überwanden sie die Kaufzurückhaltung in einem Render-Durchgang.

Pattern 5: Single CTA Per Tier (Not "Try Free + Book Demo")

Seiten mit einer CTA pro Stufe (immer „Kostenlos starten" oder „Abonnieren") übertrafen Seiten mit sowohl „Kostenlos testen" als auch „Demo buchen" um +14 % CVR. Mehrere CTAs teilen die Aufmerksamkeit. Die Ausnahme ist Enterprise-Pricing, bei dem die Demo-CTA auf einer separaten Seite lebt.

Pattern 6: Three Tiers, Not Four — Drop the Enterprise Ghost

Jede Seite im obersten Quartil hatte drei Stufen. Seiten mit vier Stufen (einschließlich einer „Enterprise"-Ghost-Stufe, in die niemand Self-Serve einsteigen kann) verloren −9 % CVR gegenüber der Drei-Stufen-Variante auf demselben Produkt. Die Enterprise-Stufe gehört auf eine separate Seite, falls überhaupt.

Pattern 7: Plain-English Pricing With No Asterisk Disclaimers

Asteriske und „Preise auf Anfrage" kosten mehr Conversions als jede andere Copy-Entscheidung. Seiten mit drei klaren Preisen übertrafen Seiten, die einen einzelnen Preis hinter „Ab" versteckten, um +29 % CVR – der größte einzelne Lift im Datensatz.

Hier ist das typisierte Pricing-Tier-Schema, das ich jetzt in TanStack Ship ausliefere:

// pricing/tiers.ts — TanStack Ship pricing template
export type BillingInterval = "month" | "year";

export interface PricingTier {
  id: string;                    // stabiler Slug, verwendet in URL + Stripe-Preis-Lookup
  name: string;                  // "Starter", "Growth", "Scale"
  verb: string;                  // "for solo founders shipping their first SaaS"
  priceCents: number;            // 2900 = $29.00
  interval: BillingInterval;
  annualSavingsCents: number;    // angezeigt als "$58/Jahr gespart"
  features: string[];            // klar formuliert, keine Asteriske
  cta: { label: string; href: string };
  recommended?: boolean;         // genau eine Stufe pro Seite
}

export const TIERS: readonly PricingTier[] = [
  {
    id: "starter",
    name: "Starter",
    verb: "for solo founders shipping their first SaaS",
    priceCents: 0,
    interval: "month",
    annualSavingsCents: 0,
    features: [
      "1 production app",
      "Cloudflare Workers + D1",
      "Stripe test mode",
      "Community support",
    ],
    cta: { label: "Start free", href: "/signup?plan=starter" },
  },
  {
    id: "growth",
    name: "Growth",
    verb: "for founders ready to bill real customers",
    priceCents: 2900,
    interval: "month",
    annualSavingsCents: 5800,
    features: [
      "Unlimited production apps",
      "Stripe live mode + Customer Portal",
      "Custom domain + SSL",
      "Email support",
    ],
    cta: { label: "Subscribe", href: "/signup?plan=growth" },
    recommended: true,
  },
  {
    id: "scale",
    name: "Scale",
    verb: "for teams running paid traffic",
    priceCents: 9900,
    interval: "month",
    annualSavingsCents: 19800,
    features: [
      "Everything in Growth",
      "Priority Worker concurrency",
      "D1 read replicas",
      "Dedicated support channel",
    ],
    cta: { label: "Subscribe", href: "/signup?plan=scale" },
  },
] as const;

Und der Stripe-Checkout-Anker, der mit diesem Schema zusammenarbeitet:

// pricing/checkout.ts — eine einzelne CTA pro Stufe an Stripe Checkout verankern
import { TIERS } from "./tiers";

export function checkoutHref(tierId: string, interval: "month" | "year") {
  const tier = TIERS.find((t) => t.id === tierId);
  if (!tier) throw new Error(`unknown tier: ${tierId}`);
  const priceId = interval === "year"
    ? tier.annualSavingsCents > 0 ? `price_${tierId}_yearly` : null
    : `price_${tierId}_monthly`;
  if (!priceId) return "/contact-sales"; // pattern 6: enterprise fallback only here
  return `/api/checkout?price=${priceId}&tier=${tier.id}`;
}

When NOT to Copy These 7 Patterns

Jedes Muster in diesem Teardown hat einen negativen Fall. Blindes Kopieren führt dazu, dass man eine Preisseite veröffentlicht, die mit 1,8 % konvertiert, weil der Kontext nicht stimmte.

B2B Procurement Context

Wenn Ihr Käufer ein Beschaffungsbüro ist, schaden die oben genannten Muster aktiv. Beschaffungsmitarbeiter wollen einen „Vertrieb kontaktieren"-CTA, einen Sicherheitsbereich, ein SOC-2-Badge auf der Stufen-Karte und eine separate Enterprise-Seite. Muster 5 (eine CTA pro Stufe) ist hier falsch. Muster 7 ebenso, wenn der Preis nach Sitzplatzanzahl variiert.

Single-Tier Freemium Products

Wenn Sie ein Produkt mit einer kostenlosen Stufe und einer kostenpflichtigen Stufe verkaufen, lesen sich drei Stufen wie Ballast. Muster 6 (drei Stufen, nicht vier) und Muster 1 (mittlere Stufe verankern) setzen beide voraus, dass es eine Mitte gibt. Überspringen Sie diese. Behalten Sie Muster 2, 4 und 7.

Hier ist der Lighthouse-Guard, den ich vor der Veröffentlichung auf jeder Preisseite ausführe:

# scripts/guard-pricing.sh — Deployment-Fehler, wenn die Preisseite Regresse aufweist
npx lighthouse https://staging.example.com/pricing \
  --only-categories=performance,accessibility,seo \
  --form-factor=mobile \
  --thresholds.performance=90 \
  --thresholds.lcp=2500 \
  --thresholds.cls=0.1 \
  --output=json --output-path=./lighthouse.json
node -e '
  const r = require("./lighthouse.json");
  const audits = r.audits;
  const priceVisible = audits["largest-contentful-paint-element"];
  const tierCount = (audits["price-table"]?.details?.items?.length ?? 0);
  if (tierCount !== 3) { console.error("FAIL: tier count", tierCount); process.exit(1); }
  if (r.categories.performance.score < 0.9) { console.error("FAIL: perf"); process.exit(1); }
'

20 Pages I Tore Down — Score Matrix

Die acht Seiten mit 22+ Punkten waren diejenigen, gegen die ich getestet habe. Die oben genannten Lift-Zahlen sind der mediane Lift über meine eigenen drei Produkte, wenn jedes Muster angewendet wurde.

How TanStack Ship Bakes These 7 Patterns In

Das TanStack-Ship-Preisseiten-Template implementiert alle sieben Muster standardmäßig. Hier ist, was ausgeliefert wird und warum.

Three Tiers, One Recommended Tier

Das Template rendert genau drei Stufen, wobei die mittlere Stufe als recommended: true markiert ist. Der visuelle Größenunterschied auf der empfohlenen Karte beträgt zwei CSS-Klassen (scale-105, shadow-xl) plus ein „Meistverkauft"-Badge – kein JavaScript, keine Runtime-Kosten.

Annual Toggle Wired to Stripe

Der Annual-Toggle liest BillingInterval aus dem Schema und leitet zu price_<tier>_yearly oder price_<tier>_monthly auf Stripe weiter. Ersparnisse werden in Dollar mithilfe von annualSavingsCents dargestellt. Das Stripe Customer Portal übernimmt Planwechsel; Schema.org Product-Markup wird zur Build-Zeit für SEO generiert.

Mobile-First Layout

TanStack Router und das responsive Grid halten die Vergleichstabelle bei 375 px Breite lesbar, mit einem sticky Stufen-Selector beim Scrollen. Der oben gezeigte Lighthouse-Guard ist in die CI-Pipeline integriert, sodass eine Regression das Deployment stoppt, bevor es die Produktion erreicht.

Wenn Sie das Template mit Alternativen vergleichen möchten, finden Sie in den Beiträgen TanStack Ship vs ShipFast und TanStack Ship vs Makerkit dieselbe Matrix für das Pricing-Template jedes Boilerplates.

FAQ on SaaS Pricing Page Conversion

How long does a pricing-page A/B test need to run? Ich verwende 14 Tage als Minimum, weil der Preisseiten-Traffic wöchentlich saisonal ist – Enterprise-Käufer browsen Dienstag bis Donnerstag, Consumer-Käufer konzentrieren sich auf Wochenenden. Weniger als 7 Tage riskiert, Wochenend-Rauschen als Lift zu interpretieren. Das 14-Tage-Fenster brachte meine Muster auf 95 % Konfidenz; kürzere Fenster überschätzten den Lift.

Should I show prices in monthly or annual terms? Beides anzeigen. Der monatliche Preis ist das Einstiegs-Sticker; der Jahrespreis ist die Wallet-Entscheidung. Seiten, die den Jahrespreis versteckten und einen Klick erzwangen, verloren −11 % CVR in meinen Tests. Toggle standardmäßig auf monatlich rendern und dem Käufer die Wahl lassen.

What if my product has usage-based pricing? Nutzungsbasiertes Pricing passt nicht in drei statische Stufen. Der Teardown schloss reine nutzungsbasierte Produkte aus (AWS, OpenAI, Cloudflare Workers selbst). Für nutzungsbasierte Produkte ist das Äquivalent zu Muster 1 ein Rechner, der auf der Median-Rechnung des Durchschnittskunden verankert ist; Muster 4 und 7 gelten weiterhin.

How do I capture CVR correctly when the buyer upgrades later? Beides messen: Checkout-CVR (der Trichter-Schritt) und 30-Tage-paid-CVR (wer tatsächlich zahlt). Muster 1, 5 und 6 steigern beide. Muster 3 (Vergleichstabelle) steigert Checkout-CVR, kann aber die 30-Tage-paid-CVR verschlechtern, wenn es eine niedrigere Stufe vollständig erscheinen lässt – ich habe das gesplittet getestet und der Split war real.

Where does TanStack Ship fit if I am not on Cloudflare Workers? Das Pricing-Template ist Renderer-agnostisch – das oben gezeigte Schema rendert in TanStack Start, Next.js oder Astro. Der CI-Guard ist ein 30-zeiliges Shell-Script. Wenn Sie bereits einen Stack haben, den Sie mögen, lässt sich das Pricing-Template als React-Komponente einbinden.