How to Create a Pricing Section

A Pricing Section displays your subscription plans or pricing tiers in a clear, comparison-friendly format.

What you'll create:

The finished Pricing Section with plan comparison

Overview

The Pricing Section helps visitors compare plans and choose the right option. Display multiple tiers with features, pricing, and CTAs in an easy-to-scan format.

Key features:

• Multiple pricing tiers/plans
• Feature comparison lists
• Highlighted "popular" plan
• Monthly/annual toggle (if supported)
• Clear CTA buttons
• Mobile-responsive design

Quick Setup

1. Add Section: Pages → Your Page → Sections → Add "Pricing Section"
2. Add Heading: "Choose Your Plan"
3. Select Plans: Choose from existing pricing documents
4. Publish

Step 1: Create Pricing Plans

1. Go to Content → Pricing in Sanity Studio
2. Create 2-4 pricing plans
3. For each plan, fill in:

- Name: "Starter", "Pro", "Enterprise"

- Subtitle: Brief description

- Price: Monthly price (e.g., "$29")

- Button Text: "Get Started", "Try Free"

- Is Popular: Toggle for recommended plan

- Features: List of included features

- Order: Display order (left to right)

Step 2: Configure Pricing Tiers

Plan Names

Keep short and clear:

• Basic / Pro / Enterprise
• Starter / Growth / Scale
• Free / Premium / Business

Subtitles

One line describing who it's for:

• "For individuals just getting started"
• "For growing teams"
• "For large organizations"

Pricing Display

• Use consistent format: "$29/mo" or "$29 per month"
• Show savings for annual: "Save 20%"
• Include "Free" or "$0" for free tiers

Features

List 5-8 key features per plan:

• Start with most important
• Use checkmarks for included features
• Consider showing what's NOT included
• Keep feature names consistent across plans

Example Configuration

Heading: "Simple, Transparent Pricing"
Description: "Choose the plan that fits your business."

Plans (3 selected):

1. Name: "Starter"
Subtitle: "Perfect for small businesses"
Price: "$29"
Button Text: "Start Free Trial"
Is Popular: false
Features:
- 1 location
- Up to 1,000 products
- Basic reporting
- Email support
- Mobile app
Order: 1

2. Name: "Pro" ⭐
Subtitle: "For growing businesses"
Price: "$79"
Button Text: "Start Free Trial"
Is Popular: true
Features:
- Up to 5 locations
- Unlimited products
- Advanced analytics
- Priority support
- Mobile app
- Staff management
- Loyalty programs
Order: 2

3. Name: "Enterprise"
Subtitle: "For large operations"
Price: "Custom"
Button Text: "Contact Sales"
Is Popular: false
Features:
- Unlimited locations
- Unlimited products
- Custom reporting
- Dedicated support
- Mobile app
- Advanced permissions
- API access
- Custom integrations
Order: 3

Pricing Psychology

Anchor Pricing

• Show highest price first OR
• Highlight middle "popular" option
• Makes other prices seem reasonable

Value Communication

• Emphasize ROI: "Pays for itself in saved time"
• Show cost per day: "Less than a coffee"
• Annual savings: "Save 2 months"

Social Proof

• "Most popular" badge
• "Best value" indicator
• Customer count: "Join 10,000+ businesses"

Best Practices

✅ DO:

• Limit to 3-4 plans
• Highlight one recommended plan
• Use clear feature language
• Show annual savings
• Make CTAs prominent
• Keep prices visible

❌ DON'T:

• Hide pricing ("Contact us" only)
• Use confusing tier names
• List 20+ features per plan
• Make comparison difficult
• Forget mobile optimization
• Use tiny text for disclaimers

Schema Reference

File: sanity/schemas/sections/pricingSection.ts

Section fields:

• heading (required): Portable Text
• description: Portable Text
• plans (required): Array of references
• showAnnualToggle: Boolean (if supported)

Pricing document fields:

• name (required): String
• subtitle: String
• price (required): String
• buttonText: String
• buttonLink: URL
• isPopular: Boolean
• features: Array of strings
• order: Number

Pro Tip: Most SaaS companies find that 3 tiers with the middle tier highlighted as "most popular" converts best. The middle tier should be your target plan.