UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Ecommerce Product Decision Flow

Ecommerce pages should help users understand the product, compare differences, confirm trust, and purchase.

ecommerceproductdecision-flow

Design Principle

Purchase decisions need images, price, specs, stock, reviews, delivery, and return information together.

Principle Purchase decisions need images, price, specs, stock, reviews, delivery, and return information together.

Design action Product pages show real product image, title, price, variants, stock/delivery, and primary purchase action above the fold; trust cues sit near decision points.

Examples Positive example: Product detail, category pages, carts, and subscription plans. Counterexample: Images do not show the real product.

Apply when Product detail, category pages, carts, and subscription plans. Users need comparison and checkout.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Product pages show real product image, title, price, variants, stock/delivery, and primary purchase action above the fold; trust cues sit near decision points.

Apply When

  • Product detail, category pages, carts, and subscription plans.
  • Users need comparison and checkout.

Avoid

  • Images do not show the real product.
  • Purchase button sits far from price and variant choices.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026