Pricing Page Design for Service Businesses: Six Layouts That Work When Every Job Is Different

Key takeaways

• Pick the layout from how your jobs vary. Repeatable jobs suit a price list or packages. Jobs that vary suit a from-price, a range with the reasons behind it, or sample jobs. Only truly one-off work suits quote only.
• A price without its reasons is worse than no price. Whatever number you show, put the two or three things that move it right beside it.
• Show sample jobs when you cannot show a fixed price. Three real-looking cases with a price each tell a visitor more than one wide range.
• The quote form is part of the pricing page. Ask for the few details that decide the price, promise a reply time, and say what happens next.
• Keep every number honest. A "from" price that nobody receives, or a crossed-out old price that was never charged, can cross into misleading pricing under US Federal Trade Commission guidance.

The short answer

Build the page in this order: a headline that says what the prices cover, the layout that matches your work, what moves the price, sample jobs, what is and is not included, a few money questions, and one quote or booking form. Choose the layout with the table below. If unsure, use a from-price plus sample jobs, which suits most variable work.

Disclosure: we are a web design studio, and this is design reasoning, not a test of which layout brings more enquiries. We have no conversion data and claim none.

What the ranking pages cover, and what they leave out

On 1 November 2026 we searched Google (United States, English) for this topic. Most of the first page was about software: SaaS pricing roundups, plan card templates and galleries. We read one agency guide written for service firms, from Internet Solutions (marked updated 25 October 2026). It names six approaches: fixed price list, packages, starting-from price, price range, hourly or daily rate, and quote only. A second guide, from vvrapid, would not load, so we left it out.

What the field leaves out is how each approach looks on a page, how to choose between them, what the quote form should ask, and what a visitor sees on a phone. That is the gap here.

Why show any price at all

Nielsen Norman Group's article "B2B Usability" by Jakob Nielsen (published 31 May 2006) reports that when test users ranked 28 types of information on business sites, prices came out highest, 29% above product availability. It calls a total lack of pricing the most user-hostile element of most B2B sites, and says that when exact prices cannot be listed, a site can show price levels instead. The research is old and covered business-to-business sites, so treat it as a long-standing pattern, not a current benchmark.

Choose the layout from how your jobs vary

The six approaches follow the list in the Internet Solutions guide, with the layout notes added by us.

The six layouts, with what each looks like

1. Fixed price list

A plain table: service on the left, price on the right, one line of detail under each name. If there are more than about eight services, group them and give each group its own table. Rows stack easily on a phone.

2. Packages

Two to four cards. Each card runs in the same order: name, one line saying who it is for, the price, the main button, then a short list of what is included. Mark one as the usual choice only if it really is. On a phone, stack the cards with the recommended one first. Wide comparison tables are hard to read on a small screen, so turn each row into a small block.

3. From-price

Write the number with the word "from" and the condition on the same line: "From $[amount] for [the smallest normal job]". Directly below, list the two or three things that raise it. It suits work with a real floor, such as repairs or photography. The number must be one that real customers get. If most jobs cost three times the from-price, the page is misleading, and the next layout fits better.

4. Range with cost drivers

Show a low and a high figure and a short table of what places a job at each end.

The table stops visitors from reading only the low number.

5. Sample jobs

Three cards, each a typical job: a title, two lines of scope, the price paid or the price band, and how long it took. Pick small, middle and large. Only use samples from real work you can describe. Do not invent them.

6. Quote only, done properly

If you must hide prices, replace the blank with information. Say what the quote depends on, how fast you reply, what the quote includes and whether there is a charge for it. A page that just says "contact us for pricing" tells the visitor nothing. A page that says "Send us these four details and you will have a written quote within [your reply time]" gives them a reason to act. See our contact page design guide for the form side.

A page order that works for most service firms

1. A headline that names the prices, such as "Prices for home electrical work in [your area]".
2. The chosen layout, high on the page.
3. What moves the price, in three to five bullets.
4. Included and not included, as two short lists.
5. Sample jobs or one worked example.
6. Money questions: deposits, tax, call-out fees, cancellations.
7. The quote or booking form.
8. A review date, such as "Prices last reviewed [month year]". Internet Solutions suggests reviewing at least twice a year.

For button wording, see our call to action examples. For where this page sits in the site, see our services page design guide.

The quote form under the pricing page

Ask only for what changes the price.

Under the button, put one line: "We reply within [your reply time] with a written quote." Then keep to it. On Webflow, see our Webflow forms guide. Before building a calculator, see our web design cost calculator note: a table of typical jobs is often enough.

Price claims and the law

This is not legal advice. Read the sources for the rules that apply to you.

• Former prices. Under 16 CFR 233.1, a crossed-out "was" price must be one at which the service was openly offered to the public, regularly, for a reasonable period. A price invented to make a discount look bigger is the classic example of a misleading comparison (source: Cornell Law School, 16 CFR 233.1, checked 1 November 2026).
• Disclosures. The FTC's advertising guide for small business says qualifying terms must be clear and conspicuous, placed near the claim, and must not contradict it. Fine print far from the headline price often fails that test (source: FTC, Advertising FAQs: A Guide for Small Business, checked 1 November 2026). The page does not mention "from" prices by name. Applying it to them is our reading: keep the conditions that affect the price beside the number.
• Tax and fees. Show the amount a customer will really pay, or say clearly what is added. Rules differ by state and country.

If you use structured data on a pricing page, schema.org defines a price specification with a minimum price, a maximum price, a currency and a flag for whether tax is included (source: schema.org PriceSpecification, checked 1 November 2026). That lets a range be marked up as a range. Google decides whether any markup changes how a result looks, so do not build the page around it.

Keep quote only if, and when this does not apply

Keep quote only if the work is different every time or a wrong public number could bind you. Even then, add the reply time and the list of what you need.

This guide does not fit a software subscription with a monthly toggle. For that, see our five page structure for SaaS.

For trade examples, see our guides for cleaners, plumbers and builders. Law firms and therapists should check their regulator's advertising rules first, then read lawyer website design and therapist website design.

How we help at Amariq

We design pricing pages on Webflow, Framer, WordPress and Shopify, and also on Wix, Squarespace and custom builds. The work starts with a question: how much do your jobs vary? From the answer we choose a layout, write the cost-driver list with you, design the cards or tables for desktop and phone, and wire the quote form to your inbox or CRM.See web design and UI/UX and conversion improvements.

Frequently asked questions

Should a service business put prices on its website?

Usually yes, at least a starting point or the list of things that set the price. Nielsen Norman Group's older research found price information the most wanted item on business sites. If you cannot, explain how you quote and how fast.

How many packages should I show?

Three is the usual number, sometimes four. More makes the choice harder. If you have many services, group them and give each group its own small table.

What is the difference between a from-price and a range?

A from-price gives only the floor. A range gives the floor and the ceiling. Use a range when you can describe what separates a cheap job from a dear one.

Is it misleading to show a from-price?

It can be if almost nobody pays that amount. Use a number real customers get and put the conditions beside it. This is not legal advice, so read the FTC guidance linked above.

What should a quote form ask?

Only what changes the price: what is needed, the size or quantity, the place, the timing and contact details. Add optional photos, then state your reply time under the button.

Should I show a was and now price?

Only if the was price is real, meaning you openly offered the service at that price for a reasonable period. Otherwise leave it out.

How often should I update the pricing page?

At least twice a year, and whenever your costs change. Show the date of the last review so visitors know it is current. Keep the figures the same on the pricing page, the service pages, ads and quotes. Our homepage design guide and website redesign cost guide cover the pages around it.