Landing pages
Product launch landing page example with a pre-order offer
A launch page for a physical product has to justify a pre-order: why this one, what it costs and when it arrives. This example for an invented Gold Coast drink bottle answers with two feature rows, one offer card at a pre-order price and an FAQ on delivery, cancelling and care.
The home page at three widths
The same page on a desktop, a tablet and a phone, exactly as it renders. Scroll inside each frame to read it all; nothing here can be clicked or submitted.
Page by page
- Home /
- Hero (split), Features (zig-zag rows), Pricing (single offer), FAQ (centred), Newsletter (card), Call to action (band)
- Privacy policy /privacy
- Text (single column), 5 in a row
- Terms of use /terms
- Text (single column), 5 in a row
Sections in order
A split hero with a pre-orders open badge and a bottle in the sand, two zig-zag feature rows, the single offer card, a short FAQ, a newsletter card for launch updates and a closing band. The Ocean palette with Space Grotesk and full radius buttons gives a clean, beachy look.
Taking the pre-orders
On this landing page the Pre-order buttons lead to the updates sign up, which collects interest. To take payment, switch on the store on a paid plan and add the bottle as a product, so the button opens the cart and Stripe Checkout, with the colour as a variant.
What makes this website work
One offer card
The pricing section's single offer layout shows the bottle, $49 against the usual $64, and four included items, from colours to a lifetime warranty. One product does not need plan cards; it needs one clear offer.
The risk is removed
Cancel for a full refund before it ships appears in the offer card, the FAQ and the closing band. Pre-orders ask for trust, and a refund promise in three places is the answer.
Benefits shown, not listed
Two zig-zag rows, one on the insulation and one on the lid, each with a photo. For a physical product, seeing it in use beats a feature list, and two strong rows beat six weak ones.
Questions people ask
What should a product launch landing page include?
What the product is, what makes it different, the price and any launch offer, when it arrives, how to cancel or return, and one main action. This example covers each one and keeps the page to six sections so the offer is never far away.
Can I take pre-order payments on the page?
With the store switched on, a paid plan feature, add the product with its price and the pre-order button opens the cart and Stripe Checkout on your connected account. This example collects launch interest by email, which suits a product not yet in production.
How do I show a launch price against the usual price?
In the single offer card, write the launch price as the price and the usual price in the body, as here. In a store, set a compare-at price on the product and it shows struck through beside the price on every product card and page.
Where do launch update sign ups go?
Each email from the updates card goes to the site's message inbox as a newsletter entry, merged by address, with an export to CSV. Send the launch and shipping emails from your own email tool to that list when the date is confirmed.
Can I add a product video?
Add the video section with a YouTube or Vimeo link, shown big or beside a few sentences. The player loads only when pressed, so the page stays fast. Place it after the feature rows, where visitors who want more detail will look.
Build your own in about a minute
The button below opens the generator with this use case already described. Change the wording to match your own, generate, then edit anything you like.
Make one like thisOther website examples
Webinar landing page example that fills the seats
People register for a webinar when they know exactly when it is, what they will leave with and that a replay is coming if they miss it. This example for an invented session for small online shops states all three in the first screen and repeats the date in a bar that stays on phone screens.
Waitlist landing page example with an early access offer
A waitlist page has to make a product that does not exist yet feel worth an email address. This example for an invented bookkeeping app explains what it does in four short cards, offers the first 500 people a free quarter, and asks for one thing only, an email.
Free consultation landing page example for a professional
A free consultation is a hard sell when people suspect it is a sales pitch. This example for an invented Canberra financial planner removes that suspicion: it lists exactly what the 30 minutes cover, asks for only three numbers beforehand and answers the fee and commission question in the FAQ.
For everything this generator can do, see the website maker.
Sources
Written and checked by the OneCraft team. Last checked .