Ecommerce landing page prompt

A product page has one decision on it, and the visitor usually arrived from an ad that already made the promise. Repeating the promise above the product costs the page its only action. The gallery and the buying panel go in the first screen.

The constraint that follows is the one thing this page type has to do that no other page in this set does: the price and the button are never off screen. A sticky bar takes over at 640px of scroll and holds both until the reader leaves.

Short verdict: ratio 1.333 from a 12px root, a 4px grid, #15603F under white text at 7.56:1, and three curves with exactly one overshoot. The Thanor library ships designs specified to that level.

One product, one decision#

A catalogue page sells browsing. A product landing page sells one thing, and every element either advances that purchase or competes with it. Four decisions carry most of the result.

• The buying panel is a fixed sequence. Product name, price, variant swatches, quantity, button, then three short lines: delivery cost, returns window, review count. That order, every time, because a reader who has to hunt for the returns policy reads the hunt as an answer.
• Variants are swatches with visible names, 44px minimum, sold out options struck through rather than removed. A dropdown hides how many options exist and hides the fact that one of them is gone.
• The gallery includes one image that establishes scale: the product held, worn, or beside something whose size is already known. Returns caused by a misjudged size are a photography problem before they are a policy problem.
• One image shows the thing in use, unstyled. A page of studio shots on seamless white reads as a stock listing rather than a product somebody owns.

Then the three trust lines, which belong under the button rather than in the footer. Delivery cost as a figure, not fast shipping. The returns window in days. The review count with the average beside it. All three are part of the purchase, so they sit where the purchase happens.

The specifics below the purchase are objections in disguise, and each gets an image. Three of them, no more, each answering a question a buyer actually asked: will it fit, will it last, what is it made of.

A fourth from twelve#

Ratio 1.333, the perfect fourth, from a 12px root. The gap between body and price is the one that matters: 16px copy against a 28px figure reads as a price stated plainly, where 48px reads as a page shouting about money.

Prices in tabular figures, so the panel and the bar hold the same width when the variant changes.

Spacing runs 4, 8, 12, 16, 20, 28, 40, 56, 80. Section padding 80px on desktop, 56px on tablet, 36px on a phone. Gallery gutter 8px, tight on purpose so four images read as one object. Buying panel padding 28px, sticky bar height 64px, touch targets 44px.

The buy colour appears on the button and nowhere else on the page. A green badge elsewhere makes the reader's eye check two places before acting.

Three curves, and the only overshoot#

Three curves, and one of them is the only spring in any of these ten specifications.

--ease-swap:   cubic-bezier(0.45, 0, 0.55, 1);      /* 180ms */
--ease-cart:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* 260ms */
--ease-sticky: cubic-bezier(0.28, 0.94, 0.4, 1);      /* 300ms */

--ease-swap at 180ms is a symmetrical sine, and it handles the variant image change: a cross fade only, no slide, no scale. Any horizontal movement there reads as a carousel and makes the reader think they have lost their place in the gallery.

--ease-cart at 260ms is the overshoot, and it runs on one element: the cart count, scaling 1 to 1.12 and back when an item is added. A spring is the right grammar for a confirmation and the wrong grammar for everything else, which is why it appears exactly once.

--ease-sticky at 300ms slides the bar up from the bottom edge past 640px of scroll, and back down when the buying panel returns to view. Three things hold still: the gallery, the price, and the button.

• No entrance animation on the gallery. An image that fades in is an image the buyer waits for.
• No counting animation on the price, and no strike through animation on a discount.
• No autoplaying carousel. The gallery advances on a tap or an arrow, never on a timer, because a buyer comparing two images needs both to stay put.

Eight blocks, starting with the purchase#

Eight blocks, and the first one is the whole page in miniature.

1. The buy block. Gallery left at 58%, panel right at 42%, sticky panel on desktop. On a phone the gallery is a swipeable strip and the panel follows it, never above it.
2. One claim line. Step 6, twelve words, the single reason this exists.
3. Three specifics. Each an image and 50 words, each answering fit, durability or material.
4. Scale. One photograph establishing size against something known.
5. Reviews. The count, the average, the distribution across five rows, and three full reviews including one that is critical.
6. Shipping and returns. In full, as a table: destination, cost, days.
7. Questions. Six, the ones support answers weekly.
8. The second buy. Name, price, button, nothing else.

Block 5 is where a page either earns trust or spends it. A distribution with nothing below four stars reads as a filtered list, and one critical review with a sensible reply does more for the average than twenty more five star lines. The professional look is largely a matter of showing the unflattering data.

Block 8 repeats the purchase rather than restating the pitch. By that depth the reader has decided, and what they need is the button, not the claim line a second time. That is the same logic that puts one ask at the end of a landing page sequence.

Block 1 has one rule on a phone that desktop mock ups hide. The gallery is a swipeable strip and the panel sits under it, never above it, and the first thing below the strip is the price rather than a row of thumbnails. A buyer who has to scroll past nine thumbnails to reach a figure has been given a reason to leave.

The verdict on a product page brief#

Purchase first, labelled swatches, a scale image, three trust lines under the button, a sticky bar after 640px, and one critical review left in. Those six decisions do more for conversion than any headline variant, and none of them is visible in a page built from an adjective. Thanor sells them as values.

The brief to paste#

Build a single product landing page.

TYPE: ratio 1.333 from a 12px root: 12, 16, 21, 28, 38, 51, 67. Body
16/26. Price 28/34. Product name 38/44. Claim line 67/70. Tabular figures
on every price.

SPACE: 4, 8, 12, 16, 20, 28, 40, 56, 80. Section padding 80 / 56 / 36.
Gallery gutter 8px. Panel padding 28px. Sticky bar 64px. Touch targets
44px minimum.

COLOUR: page #FFFFFF, surface #F3F1EE, ink #17150F, muted #6C675E, buy
#15603F under white text, used on the button and nowhere else.

PANEL ORDER: product name, price, variant swatches with visible names and
sold out struck through, quantity, button, then three lines giving
delivery cost as a figure, returns window in days, review count with
average.

MOTION: variant image cross fade cubic-bezier(0.45, 0, 0.55, 1) 180ms, no
slide. Cart count scale 1 to 1.12 cubic-bezier(0.34, 1.56, 0.64, 1) 260ms,
the only overshoot on the page. Sticky bar cubic-bezier(0.28, 0.94, 0.4, 1)
300ms after 640px. Gallery, price and button never animate. No autoplay
carousel.

BLOCKS: buy block, gallery 58% and panel 42% / one claim line / three
specifics with images answering fit, durability, material / one scale
photograph / reviews with count, average, five row distribution and one
critical review / shipping and returns as a table of destination, cost,
days / six questions / second buy with name, price, button.

Change the product and the palette, keep the panel order. Browse the Thanor library for designs where the sticky bar and the swatches are already drawn.