SwiftUI Paywall Design That Actually Converts — Templates and Best Practices

Why Paywall Design Is the Highest-ROI Investment for an Indie App

I want to start with a number that should change how you think about paywall design. According to RevenueCat's 2025 benchmark data, the difference between a bottom-quartile paywall (1.5% conversion) and a top-quartile paywall (6% conversion) is a 4x difference in revenue — from the exact same app, with the exact same number of users.

Think about that. You could spend three months adding new features, or you could spend a weekend redesigning your paywall and potentially quadruple your revenue. No other screen in your app has this kind of leverage. Your paywall is not just a screen — it is your business model rendered in pixels.

I have designed, tested, and iterated on dozens of paywalls across my own apps and apps I have consulted on. What follows is everything I have learned about what works, what does not, and why.

Anatomy of a High-Converting Paywall

Every effective paywall contains the same core elements. Miss one, and your conversion suffers. Here is the anatomy, from top to bottom:

1. A Headline That Addresses Pain, Not Features

Bad headline: "Unlock Premium Features." Good headline: "Never lose a workout streak again." Great headline: "Join 12,000+ people who track every workout."

Your headline should remind the user why they downloaded your app in the first place. It should address the problem they are trying to solve or the outcome they want to achieve. Features come later — the headline is about emotion and intent.

2. Social Proof

Include your App Store rating and review count near the top. Something like "Rated 4.8 by 2,400+ users" creates immediate trust. If you have notable press mentions or a large user base, mention it. Social proof reduces the perceived risk of subscribing.

3. Feature Comparison (Free vs Premium)

Show users exactly what they are missing. A side-by-side comparison of Free vs Pro is one of the most effective paywall elements. Use checkmarks and X marks — keep it visual and scannable. Limit it to 4–6 features to avoid overwhelming users.

4. Pricing with Smart Defaults

Present your pricing options with the annual plan pre-selected and highlighted. Show the monthly equivalent of the annual plan ("Just $3.33/month"). Use a badge like "Best Value" or "Save 40%" on the annual plan. Make the selected plan visually distinct with a border, background color, or glow effect.

5. Trial Messaging

If you offer a free trial, make it impossible to miss. "Start your 7-day free trial" should be part of the primary CTA button. Below the button, add reassurance text: "No charge until [date]. Cancel anytime." Be explicit about when billing starts.

6. Restore Purchases Button

This is an App Store Review requirement. Place a "Restore Purchases" link below the subscribe button. It does not need to be prominent, but it must be visible and functional.

7. Close/Skip Option

Always provide a way to dismiss the paywall. A small "X" button in the top corner or a "Not now" text link at the bottom. Apple will reject apps that trap users on the paywall. Delaying the close button by 1–2 seconds is acceptable (and increases conversion slightly) but hiding it is not.

3 Paywall Design Patterns That Work

After analyzing hundreds of paywalls across top-grossing indie apps, I have identified three patterns that consistently convert well. Each suits different types of apps.

Pattern 1: The "Classic Stack"

This is the most common and most reliable paywall layout. Plans are stacked vertically, with the recommended plan highlighted. It works because it is simple, scannable, and familiar — users have seen this pattern in hundreds of apps.

Layout: Header with app icon and headline, 2–3 vertically stacked plan cards, primary CTA button, trial terms, restore purchases link.

Best for: Most apps. Especially good when you have 2–3 plans (monthly, annual, lifetime).

struct ClassicStackPaywall: View {
    let offerings: Offerings?
    @State private var selectedPackage: Package?
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        VStack(spacing: 0) {
            // Close button
            HStack {
                Spacer()
                Button { dismiss() } label: {
                    Image(systemName: "xmark.circle.fill")
                        .font(.title2)
                        .foregroundStyle(.secondary)
                }
            }
            .padding()

            ScrollView {
                VStack(spacing: 24) {
                    // Header
                    VStack(spacing: 8) {
                        Image(systemName: "star.circle.fill")
                            .font(.system(size: 56))
                            .foregroundStyle(.accent)
                        Text("Unlock Everything")
                            .font(.title.bold())
                        Text("Join 10,000+ users who upgraded")
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                    }

                    // Plan cards
                    if let packages = offerings?
                        .current?.availablePackages {
                        ForEach(packages, id: \.identifier) { pkg in
                            PlanCard(
                                package: pkg,
                                isSelected: selectedPackage?.identifier
                                    == pkg.identifier
                            )
                            .onTapGesture {
                                selectedPackage = pkg
                            }
                        }
                    }

                    // CTA
                    Button {
                        // Purchase logic
                    } label: {
                        Text("Start Free Trial")
                            .font(.headline)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(.accent)
                            .foregroundStyle(.white)
                            .clipShape(RoundedRectangle(
                                cornerRadius: 16))
                    }

                    // Trial terms
                    Text("7-day free trial, then \(selectedPackage?.localizedPriceString ?? "")/year. Cancel anytime.")
                        .font(.caption)
                        .foregroundStyle(.secondary)
                        .multilineTextAlignment(.center)

                    // Restore
                    Button("Restore Purchases") {
                        // Restore logic
                    }
                    .font(.caption)
                    .foregroundStyle(.secondary)
                }
                .padding(.horizontal)
            }
        }
    }
}

struct PlanCard: View {
    let package: Package
    let isSelected: Bool

    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text(package.storeProduct.localizedTitle)
                    .font(.headline)
                Text(package.localizedPriceString)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            Spacer()
            if isSelected {
                Image(systemName: "checkmark.circle.fill")
                    .foregroundStyle(.accent)
            }
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 12)
                .stroke(
                    isSelected ? Color.accent : Color.secondary
                        .opacity(0.3),
                    lineWidth: isSelected ? 2 : 1
                )
        )
    }
}

Pattern 2: The "Comparison Table"

This pattern places a feature grid front and center, showing exactly what Free users are missing. It is particularly effective when your premium tier adds multiple clearly differentiated features. The comparison creates a natural sense of "I am missing out."

Layout: Headline, two-column feature grid (Free vs Pro with checkmarks), single pricing section below, CTA button.

Best for: Apps with a strong free tier where premium adds 5+ features. Productivity apps, creative tools, and utility apps.

struct ComparisonTablePaywall: View {
    @Environment(\.dismiss) private var dismiss

    let features: [(name: String, free: Bool, pro: Bool)] = [
        ("Basic templates", true, true),
        ("Cloud sync", false, true),
        ("Export to PDF", false, true),
        ("Custom themes", false, true),
        ("Priority support", false, true),
        ("Unlimited projects", false, true),
    ]

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Spacer()
                Button { dismiss() } label: {
                    Image(systemName: "xmark.circle.fill")
                        .font(.title2)
                        .foregroundStyle(.secondary)
                }
            }
            .padding()

            ScrollView {
                VStack(spacing: 24) {
                    Text("Free vs Pro")
                        .font(.title.bold())

                    // Comparison grid
                    VStack(spacing: 0) {
                        // Header row
                        HStack {
                            Text("Feature")
                                .frame(maxWidth: .infinity,
                                       alignment: .leading)
                            Text("Free")
                                .frame(width: 60)
                            Text("Pro")
                                .frame(width: 60)
                                .foregroundStyle(.accent)
                        }
                        .font(.caption.bold())
                        .padding(.vertical, 8)

                        Divider()

                        // Feature rows
                        ForEach(features, id: \.name) { feature in
                            HStack {
                                Text(feature.name)
                                    .font(.subheadline)
                                    .frame(maxWidth: .infinity,
                                           alignment: .leading)
                                Image(systemName: feature.free
                                    ? "checkmark" : "xmark")
                                    .frame(width: 60)
                                    .foregroundStyle(
                                        feature.free
                                            ? .green : .secondary)
                                Image(systemName: "checkmark")
                                    .frame(width: 60)
                                    .foregroundStyle(.accent)
                            }
                            .padding(.vertical, 10)
                            Divider()
                        }
                    }
                    .padding()
                    .background(.ultraThinMaterial)
                    .clipShape(RoundedRectangle(cornerRadius: 16))

                    // Pricing
                    VStack(spacing: 4) {
                        Text("$4.99/month")
                            .font(.title2.bold())
                        Text("or $39.99/year (save 33%)")
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                    }

                    // CTA
                    Button {
                        // Purchase
                    } label: {
                        Text("Go Pro")
                            .font(.headline)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(.accent)
                            .foregroundStyle(.white)
                            .clipShape(RoundedRectangle(
                                cornerRadius: 16))
                    }

                    Button("Restore Purchases") {}
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
                .padding(.horizontal)
            }
        }
    }
}

Pattern 3: The "Single Focus"

This is the minimalist approach — one plan, one price, one big CTA. No choices, no paralysis. It works surprisingly well when your value proposition is strong and your trial offer is compelling. Some of the highest-grossing indie apps use this pattern.

Layout: Large hero section with benefit-focused headline, 3–4 bullet points of value, single price with trial terms, one CTA button filling the bottom.

Best for: Apps with a single clear value proposition. AI tools, niche utilities, and apps where one plan makes sense.

struct SingleFocusPaywall: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Spacer()
                Button { dismiss() } label: {
                    Image(systemName: "xmark.circle.fill")
                        .font(.title2)
                        .foregroundStyle(.secondary)
                }
            }
            .padding()

            Spacer()

            VStack(spacing: 32) {
                // Hero
                VStack(spacing: 12) {
                    Text("Unlimited AI generations")
                        .font(.largeTitle.bold())
                        .multilineTextAlignment(.center)
                    Text("Create stunning images, write better copy, and brainstorm ideas — without limits.")
                        .font(.body)
                        .foregroundStyle(.secondary)
                        .multilineTextAlignment(.center)
                }

                // Value bullets
                VStack(alignment: .leading, spacing: 16) {
                    BenefitRow(
                        icon: "sparkles",
                        text: "Unlimited AI image generation"
                    )
                    BenefitRow(
                        icon: "doc.text",
                        text: "Advanced writing assistant"
                    )
                    BenefitRow(
                        icon: "bolt.fill",
                        text: "Priority processing — no queue"
                    )
                    BenefitRow(
                        icon: "arrow.down.circle",
                        text: "Export in full resolution"
                    )
                }
                .padding(.horizontal)
            }
            .padding(.horizontal)

            Spacer()

            // Bottom CTA section
            VStack(spacing: 12) {
                Button {
                    // Purchase
                } label: {
                    VStack(spacing: 4) {
                        Text("Try Free for 7 Days")
                            .font(.headline)
                        Text("then $6.99/month")
                            .font(.caption)
                            .opacity(0.8)
                    }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(.accent)
                    .foregroundStyle(.white)
                    .clipShape(RoundedRectangle(cornerRadius: 16))
                }

                Text("Cancel anytime. No charge during trial.")
                    .font(.caption)
                    .foregroundStyle(.secondary)

                Button("Restore Purchases") {}
                    .font(.caption)
                    .foregroundStyle(.secondary)
            }
            .padding()
        }
    }
}

struct BenefitRow: View {
    let icon: String
    let text: String

    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: icon)
                .font(.title3)
                .foregroundStyle(.accent)
                .frame(width: 32)
            Text(text)
                .font(.body)
        }
    }
}

Conversion Benchmarks by Paywall Type

Here is aggregate data from RevenueCat, Adapty, and Superwall's public reports, combined with my own observations across apps I have worked on. These are paywall impression-to-purchase rates.

Key insight: the trigger matters as much as the design. A beautifully designed paywall shown at the wrong time will underperform a basic paywall shown at a high-intent moment. Read our monetization guide for a detailed discussion on paywall placement strategy.

A/B Testing Your Paywall

Your first paywall will not be your best paywall. A/B testing is not optional — it is how you systematically improve conversion. Here is what to test and how.

What to Test (in Priority Order)

1. Price point — This has the biggest impact. Test $3.99/mo vs $5.99/mo vs $7.99/mo. Higher prices sometimes convert better because they signal quality. You will not know until you test.
2. Trial length — 3-day vs 7-day. Shorter trials have higher trial-to-paid conversion but lower trial starts. Longer trials have more trial starts but lower conversion. The optimal depends on your app.
3. Headline copy — Test benefit-focused vs feature-focused vs social proof-focused headlines. "Never miss a workout" vs "Unlimited workout tracking" vs "Join 10,000+ athletes."
4. Number of plans — Two plans (monthly + annual) vs three plans (monthly + annual + lifetime). Sometimes fewer choices convert better.
5. Design pattern — Classic Stack vs Comparison Table vs Single Focus. Run each for at least 1,000 paywall impressions before drawing conclusions.

How to Measure

RevenueCat Experiments lets you run server-side A/B tests on your paywall offerings. You create two offerings (control and variant), assign traffic 50/50, and RevenueCat tracks conversion rate, revenue per user, and statistical significance. Aim for at least 2,000 impressions per variant and a p-value under 0.05 before calling a winner.

For testing paywall design (layout, copy, images) rather than pricing, you can use Superwall or build your own simple experiment system with a remote config flag. RevenueCat's Paywalls feature (launched in 2025) also supports remote paywall UI configuration, which means you can change your paywall design without an app update.

RevenueCat + SwiftUI Integration

RevenueCat provides both a low-level SDK and a higher-level SwiftUI integration. For most indie developers, the SwiftUI-specific APIs are the fastest path to a working paywall.

import RevenueCatUI

struct SettingsView: View {
    var body: some View {
        List {
            // ... other settings

            Section {
                Button("Upgrade to Pro") {
                    // Show paywall
                }
            }
        }
        .presentPaywallIfNeeded(
            requiredEntitlementIdentifier: "pro"
        ) { customerInfo in
            // User subscribed — update UI
        }
    }
}

// Or use the paywall footer for inline display
struct ContentView: View {
    var body: some View {
        VStack {
            // Your content here
            Text("Your app content")
        }
        .paywallFooter()
    }
}

The presentPaywallIfNeeded modifier automatically shows a paywall when the user does not have the required entitlement. RevenueCat even provides default paywall templates that you can configure from their dashboard. However, for maximum conversion, I recommend building custom paywalls (like the patterns above) that match your app's design language.

For a complete RevenueCat setup walkthrough, check our RevenueCat SwiftUI integration guide.

Dark Mode Paywall Considerations

More than 80% of iOS users have Dark Mode enabled at least some of the time. Your paywall must look great in both modes. Here are the specific things to watch for:

• Contrast ratios. Your CTA button needs to pop against both light and dark backgrounds. Use a vibrant accent color that works in both modes. Avoid pure white text on a light background or pure black text on a dark background — use semantic colors (.primary, .secondary).
• Selected plan indicator. A blue border looks great on a dark background but disappears on a light one. Use a filled background for the selected state, not just a border.
• Shadows and elevation. Drop shadows are invisible in Dark Mode. Use border strokes or background color differences to create visual hierarchy instead.
• Images and icons. If your paywall includes illustrations, ensure they have variants for both color schemes, or use SF Symbols which adapt automatically.
• Test in both modes. Use the colorScheme environment value in Xcode Previews to render both variants simultaneously:

#Preview("Light") {
    ClassicStackPaywall(offerings: nil)
        .preferredColorScheme(.light)
}

#Preview("Dark") {
    ClassicStackPaywall(offerings: nil)
        .preferredColorScheme(.dark)
}

Accessibility in Paywall Design

Accessibility is not just the right thing to do — it also affects your App Store review approval and your conversion rate. Here is what matters for paywalls:

• Dynamic Type. Your paywall must scale properly with Dynamic Type. Test at the largest accessibility text size. If your layout breaks, switch to a scrollable ScrollView layout that accommodates larger text. Use.font(.title) and other semantic sizes rather than fixed point sizes.
• VoiceOver. Every element should have a meaningful accessibility label. Your plan cards should read something like "Annual plan, $39.99 per year, save 33 percent, selected." Mark the CTA button clearly. The close button should be labeled "Close" or "Skip."
• Reduce Motion. If your paywall has animations (glowing borders, pulsing buttons), respect the accessibilityReduceMotion environment value and disable them.
• Color contrast. WCAG AA requires a 4.5:1 contrast ratio for normal text. Test your price labels, feature text, and trial terms against your background color. Tools like the Accessibility Inspector in Xcode can help.
• Touch targets. Apple recommends a minimum 44x44 point touch target. Your plan selection cards and CTA button should be large and easy to tap.

// Accessible plan card
PlanCard(package: package, isSelected: isSelected)
    .accessibilityElement(children: .combine)
    .accessibilityLabel(
        "\(package.storeProduct.localizedTitle), \(package.localizedPriceString)"
    )
    .accessibilityAddTraits(
        isSelected ? [.isSelected, .isButton] : .isButton
    )
    .accessibilityHint("Double tap to select this plan")

Common Paywall Mistakes

I have reviewed hundreds of indie app paywalls. These are the mistakes I see most frequently, along with how to fix them:

1. Too many pricing options. Four or five plans cause decision paralysis. Stick to two (monthly + annual) or three at most. If you want to offer a lifetime option, make it a distant third choice.
2. Hiding the close button. Tucking the "X" behind a delay timer longer than 2–3 seconds frustrates users and can lead to App Store rejection. A frustrated user who is forced to stay on the paywall is not going to convert — they are going to leave your app and write a negative review.
3. Unclear trial terms. "Start Free Trial" without specifying the duration and post-trial price is a trust killer. Always show: trial length, what happens after the trial, and how to cancel. Apple requires this.
4. No visual hierarchy. If all plans look the same, users cannot quickly identify the "right" choice. Use size, color, and positioning to guide the eye to your preferred plan.
5. Feature-focused instead of benefit-focused. "Access to Cloud Sync" means nothing. "Your data, everywhere — never lose a note again" tells the user why they should care.
6. Ignoring the scroll fold. On smaller iPhones (iPhone SE, iPhone 15), your CTA button might be below the fold. Either use a sticky bottom CTA or ensure the most important elements (headline, pricing, CTA) fit on a single screen.
7. Not testing on real devices. Paywalls that look perfect in the Simulator often have issues on real devices — especially with different screen sizes, Dynamic Type settings, and network conditions (slow offering loads). Always test on physical hardware.

Get All 3 Paywall Patterns Pre-Built

Building, testing, and iterating on paywalls takes significant development time. If you want to skip that and start with proven, production-ready designs, The Swift Kit includes all three paywall patterns described in this guide — Classic Stack, Comparison Table, and Single Focus — fully integrated with RevenueCat and StoreKit 2.

Each template is customizable with design tokens, supports Dark Mode and Dynamic Type out of the box, and includes all the accessibility features covered above. You swap in your RevenueCat API key, configure your offerings, and you have a paywall that converts from day one. Check out all features or see pricing.