> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/guides/feature-implementation-guides/guide-how-to-build-a-pricing-page.md). # 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. {% hint style="info" %} **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](https://docs.limio.com/developers/limio-sdk/getting-started) and [Basket helpers](https://docs.limio.com/developers/limio-sdk/basket). 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](https://docs.limio.com/ai/vibe-coding/skills) and the [Claude Code Skill](https://docs.limio.com/developers/custom-components/claude-code-skill) to get started. {% endhint %} *** ### 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** 1. Create a Limio page using the Page Builder. 2. Add one of these components to display your offers: * [Offers](https://docs.limio.com/components/component-library/standard-components/component-offers) — the standard choice; clicking the CTA adds the offer and navigates to checkout. * [Grouped Offers](https://docs.limio.com/components/component-library/standard-components/component-grouped-offers) — groups offers by category or tier, useful when you have a base plan with optional add-ons. 3. The component's CTA navigates the customer to your checkout page tag (e.g. `/checkout`) with the offer pre-loaded in the basket. 4. 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** 1. Create a Limio page using the Page Builder. 2. Add the [Header with Floating Cart](https://docs.limio.com/components/component-library/standard-components/component-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. 3. Set the **Button URL** prop on the Header with Floating Cart to your checkout page tag (e.g. `/checkout`). 4. Add [Offers](https://docs.limio.com/components/component-library/standard-components/component-offers) or [Grouped Offers](https://docs.limio.com/components/component-library/standard-components/component-grouped-offers) to the body of the page. 5. 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: ``` https://www.yourdomain.com/checkout?purchase=/offers2/MonthlyPro ``` This skips the Limio pricing page entirely and lands the customer at checkout with the specified offer already in their basket. See [Purchase Links](https://docs.limio.com/product/checkout/how-to-configure-purchase-links) for the full syntax including multiple offers, promo codes, and label-based targeting. {% hint style="info" %} 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. {% endhint %} *** ### Where to go next * [Offers component](https://docs.limio.com/components/component-library/standard-components/component-offers) * [Grouped Offers component](https://docs.limio.com/components/component-library/standard-components/component-grouped-offers) * [Header with Floating Cart component](https://docs.limio.com/components/component-library/standard-components/component-header-with-floating-cart) * [Purchase Links](https://docs.limio.com/product/checkout/how-to-configure-purchase-links) * [Limio SDK — Basket helpers](https://docs.limio.com/developers/limio-sdk/basket) * [How to create offers and add-ons](https://docs.limio.com/product/pricing/how-to-create-offers-and-add-ons-to-attach-to-pages) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.limio.com/guides/feature-implementation-guides/guide-how-to-build-a-pricing-page.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.