Skip to main content

Design and Customize Your Pricing Table

Quickly showcase your plans and pricing in a clear, attractive layout with Durable’s Pricing Table feature.

Leodith avatar
Written by Leodith
Updated over 3 weeks ago

Highlight features, prices, and calls to action that guide visitors toward the right option.

Here’s how to add and customize a Pricing Table Section in your Durable website editor:

  1. Click Add section + at the top or bottom of your page.

  2. Type Pricing Table into the search box for a fast find.

  3. Select Pricing Table from the results—Durable will insert example tiers with placeholder names, images, prices, and feature lists.

  4. Open the editor by hovering over the new section, clicking the menu, and choosing Edit section.

You’ll find two handy tabs: Content and Style.

Content Tab:

Customize each tier to match your offerings:

  • Tagline (optional): Click Generate to add a short introductory line above your table.

  • Headline: Enter a clear title such as “Choose Your Plan” or “Our Pricing.”

  • Subtext (optional): Click Generate to add a brief description beneath the headline.

  • Display toggles: Turn Image, Description, Button, and Included items on or off to show exactly what you need.

  • Tiers: Add up to four plans by clicking Add tier +. For each tier:

    1. Click the ⋮⋮ drag handle to reorder plans.

    2. Click the pencil icon to edit tier details:

      • Title: e.g. “Basic,” “Pro,” “Premium.”

      • Description: A concise summary of what’s included.

      • Price: Enter the amount (e.g. “$29”).

      • Per: Define the billing cycle (e.g. “per month,” “per session”).

      • Image: Click Change to upload your own photo or Regenerate for AI suggestions.

      • Alt text: Describe the image for accessibility and SEO.

    3. Included items: Click Add item + to list features like “Unlimited support” or “Advanced analytics.” Use Generate for ideas or the trash icon to remove.

    4. Button: Toggle on to add a call-to-action button, then set the Label (e.g. “Get Started”) and Link to a checkout page or section.

    5. Highlight: Toggle on to feature your recommended plan with a badge or accent style.

Style Tab:

Make your pricing table stand out:

  • Colors: Click Change to pick your theme palette or enter custom hex values for backgrounds, headers, text, and buttons.

  • Button style: Click Change to choose from preset button designs.

  • Background image/video: Toggle on to layer media behind your table.

  • Text size: Select heading and subtext sizes (Small, Medium, Large).

  • Alignment: Align your entire table left, center, or right.

  • Card style: Choose between Outline or Filled for each plan’s card.

  • Spacing: Set Top and Bottom padding (Small, Medium, Large) and minimum height (Content or Screen).

  • Image settings: Control Image fit (Cover, Contain) and Aspect ratio (e.g. 16:9).

  • Rounded corners: Choose from None, Small, Medium, Large, or Theme.

  • Animations: Select how the table appears on scroll (Fade, Zoom, Slide, or None).

  • Dividers and Borders: Toggle on to add lines or frames between plans.
    [[screenshot – Style tab options for Pricing Table]]

Click Done, then Publish to make your pricing table live.

Our team is here to support you every step of the way. If you have questions or need extra assistance, just reach out we’re excited to help you present your pricing with confidence!

Did this answer your question?