Ecommerce Design

E-commerce UX patterns including product pages, cart design, checkout flows, and conversion optimization.

dragoon0x 7e2622a 1.1 KB Updated

File contents

Ecommerce Design

Product Page

  • Hero image: large, zoomable, multiple angles.
  • Price: prominent, with sale price formatting (strikethrough original).
  • Add to cart: primary CTA, always visible (sticky on mobile).
  • Variants: visual selectors (color swatches, size buttons).
  • Reviews: star rating + count near title, full reviews below.
  • Trust signals: shipping info, return policy, secure payment.

Cart

  • Thumbnail + name + quantity + price per item.
  • Editable quantity. One-click remove.
  • Subtotal + estimated shipping + tax breakdown.
  • "Continue Shopping" + "Checkout" buttons.
  • Cart accessible from anywhere (header icon with count).

Checkout

  1. Information (email, shipping address)
  2. Shipping method selection
  3. Payment
  4. Review + Place Order
  • Guest checkout always available. Don't force account creation.
  • Auto-fill support. Minimal fields.
  • Trust badges near payment form.
  • Order confirmation page + email.

dragoon0x/everything-design-taste/tree/main/skills/ecommerce-design commit 7e2622aede

Frequently asked questions

npx skillmds@latest add dragoon0x/ecommerce-design