Single-product landing page example: a portable blender for social ad traffic
A one-product store page for Whirlby, a fictional portable blender, made on the phone canvas for visitors arriving from a social ad. The price and Add to cart are in the first screen and in a bar that stays at the bottom; then come recipes, cleaning, the four colours, what is in the box, a two-for-$69 bundle and short answers.
- Page type
- Product page
- Canvas
- Phone · 390 px
- Sections
- 7
- Brand
- Whirlby (demo brand)
Download and usage details
- Files
- HTML + CSS · images included
- Usage
- Free to edit and use in personal and commercial projects. Attribution is optional. Do not resell or redistribute the templates themselves as templates.
- Forms, if included
- They look complete but do not send anything. Point the form at your own form service or email tool before you publish.
- Fonts
- Fonts load from Google Fonts
- Demo content
- Every brand is a fictional demo brand, and the copy was written for that demo. Replace product facts, offers and any testimonials with your own, and check every claim before you publish.
What we typed
A product landing page for the Whirlby Go portable blender, made for people arriving from a social media ad on their phone. It holds 450 ml, charges by USB-C, has a six-blade stainless steel base, and the cup doubles as a travel bottle with a sealed lid. It comes in four colours: sand, sage, coral and charcoal. Price: $39, or $69 for two. Ships in 2 business days within the US, free returns within 30 days, 1-year warranty. Show what you can make with it, how to clean it in one step, and what is in the box. Answer a few short questions about charging, what it can blend (not hot liquids or ice cubes) and returns. Main action: Add to cart, linking to the store's checkout. Do not invent reviews, ratings, sales numbers, battery-life claims or customer photos. In the footer, add one line: Whirlby is a demo brand created to show what Octet Prow can build. It is not a real company and nothing here is for sale.
Whirlby Blend Bright
- primary · #FF6B1A
- secondary · #12A150
- surface · #FFFBF7
- outline · #C9B4A7
- inverse · #1C1310
- Serif · Fraunces
- Sans · Nunito Sans
Generated once for the project from its brief. Every page in the project follows it.
How the page is put together
- OpeningSmoothies, made in your handCapacity and charging in one line, a photo, the price and Add to cart.
- 01Fruit in, smoothie outWhat you can make, as cards you swipe, and the two things it does not blend.
- 02One step, no scrubbingCleaning in three icons.
- 03Pick your GoThe four colours, as cards you swipe.
- 04Everything you need to startWhat is in the box, with a spec list.
- 05Two for $69The two-for-$69 bundle on its own card.
- 06Short answersCharging, what it blends, carrying, shipping and returns.
What we checked and changed
Our brief asked the page to show cleaning and what is in the box without saying what they were, so the model filled both in. We kept its generic cleaning steps (water, blend, rinse) but removed a detachable blade base. In the box we kept only the blender and the cup with its sealed lid, and removed a USB-C cable and a quick-start card. We also removed “blends fruit in about a minute”, frozen fruit in the recipes, a tip to cool drinks to room temperature first, and a charging answer saying any cable and plug would do. A second round put back an “and” the first edit had dropped from the opening line. The nine photos were generated in the editor; the one beside the box contents shows a charging cable, which the list no longer claims. We linked the wordmark to the top of the page; the Add to cart buttons have no link, because there is no store behind a demo brand.