Guide: Build a Pricing Page (Patterns)
The big idea
A pricing page lets customers browse your plans and start a purchase in a single self-service flow. Limio provides two built-in patterns depending on how you want the cart to behave, and both work without custom engineering.
Pricing pages are often design-sensitive. If the built-in components don't match your brand, Limio supports fully custom offer display components built with the Limio SDK — in particular useCampaign() to read offers and addOfferToBasket() / navigateToCheckout() from useBasket() to handle basket interactions. See Getting Started with the Limio SDK and Basket helpers. You don't even need to know how to code — Claude can connect to your Limio environment and generate a pixel-perfect pricing page, leveraging Limio's SDK and component best practices. See Vibe Coding with Limio Skills and the Claude Code Skill to get started.
Pattern 1 — Offer display page that links directly to checkout
Use this when you want a clean marketing-style pricing page where customers pick a plan and are immediately taken to a dedicated checkout page.
How it works
Create a Limio page using the Page Builder.
Add one of these components to display your offers:
Offers — the standard choice; clicking the CTA adds the offer and navigates to checkout.
Grouped Offers — groups offers by category or tier, useful when you have a base plan with optional add-ons.
The component's CTA navigates the customer to your checkout page tag (e.g.
/checkout) with the offer pre-loaded in the basket.Attach your offers to the page in the Page Builder so the component knows which offers to display.
When to use this
You want a clear separation between browsing plans and completing checkout.
You are running A/B tests on the pricing page independently of the checkout.
Your checkout requires authentication and you want to gate it separately from browsing.
Pattern 2 — Single page with an inline floating cart
Use this when you want customers to add items and see a running cart summary on the same page without navigating away — for example when selling a base plan alongside multiple add-ons.
How it works
Create a Limio page using the Page Builder.
Add the Header with Floating Cart component at the top of the page. Enable the "Show floating cart icon in the header" prop. The component includes the cart item list, totals, and a "Continue to checkout" button — no separate Cart Summary or Cart Items components are needed.
Set the Button URL prop on the Header with Floating Cart to your checkout page tag (e.g.
/checkout).Add Offers or Grouped Offers to the body of the page.
In the Page Builder page settings (or in your custom component via
pageOptions), ensure "Go to checkout" (pushToCheckout) is disabled. This means clicking an offer CTA adds it to the basket and opens the floating cart — rather than immediately navigating the customer away to checkout.
When to use this
You sell multiple add-ons alongside a base plan and want customers to build a bundle before checking out.
You want to show a running price total as customers configure their order.
You are building an e-commerce-style experience where cart and browsing are on the same view.
Purchase Links — for when you don't control the pricing page
If your pricing page lives outside Limio (your marketing site, a CMS, or a third-party tool), use Purchase Links to send customers directly into a pre-populated Limio checkout.
A purchase link looks like:
This skips the Limio pricing page entirely and lands the customer at checkout with the specified offer already in their basket. See Purchase Links for the full syntax including multiple offers, promo codes, and label-based targeting.
Purchase links are best suited when you cannot edit the page that links to checkout. If you are building the pricing page in Limio, use Pattern 1 or 2 above — the offer components handle basket population automatically.
Where to go next
Last updated
Was this helpful?