Pricing section

The pricing section compares the plans or purchase options for your product. Its job is to make the decision understandable: what someone pays, what they receive, and which limits apply.

Prices in the template are fictional layout data. They are not ConvertFast subscription offers. ConvertFast UI is an open-source CLI; installing the pricing component does not enable payment processing, recurring billing, customer accounts, or plan enforcement.

Install this section


npx convertfast-ui@latest block add pricing

Use --template editorial to select the editorial design. Both templates also include this section when you run page create. To replace it on a generated route after saving your edits:


npx convertfast-ui@latest page add marketing pricing --template editorial --force

The replacement overwrites that section’s source. A standalone block installs into your configured components directory; import its PricingSection export into your page. See installation for prerequisites and the CLI reference for file locations.

Customize the content

Edit each plan’s name, amount, billing period, feature list, and action destination. State whether a price is a one-time payment, monthly charge, or annual commitment. If you offer usage allowances, name the unit and explain what happens after the allowance is used.

Connect each action to the correct checkout or contact flow. The displayed amount should agree with the amount charged. Handle tax, currency, cancellations, and refunds in your actual payment flow and supporting terms. Do not present a toggle between monthly and annual prices unless it updates both the display and the purchase destination.

Preview the layout

The preview below contains sample content. It demonstrates the default template separately from this documentation.

Interactive template preview. All product names, claims, and prices inside are sample content.

Open the editorial preview to compare the second layout.

Check before publishing

Compare plans at phone width, where columns may stack and the highlighted option can change position. Use long plan names and realistic feature descriptions during review. Follow every purchase link in a test environment and confirm the selected product and billing interval. Remove empty features and sample discount claims before deployment.