Ecommerce Storefront Design
Use this skill for consumer storefronts, DTC brand sites, category pages, product detail pages, and shopping flows.
Goal: make products easy to discover, compare, trust, and buy. Prioritize imagery, price clarity, shipping confidence, and friction-free selection.
Surface priorities
- Product image first
- Product name second
- Price and promotion third
- Variant or availability fourth
- Trust and shipping signals close to the CTA
Page patterns
Storefront homepage
- Hero with one campaign or collection focus
- Featured categories or collections
- Merchandising blocks with real product imagery
- Social proof, shipping promise, or returns confidence
- Secondary category exploration
Product listing page
- Clear category title and item count
- Sticky filters and sorting
- Product grid tuned for image quality and scan speed
- Quick compare or quick add only if it reduces friction
Product detail page
- Large image gallery
- Price, promo, rating, and stock context
- Variant selector and quantity controls
- Primary CTA with shipping or delivery expectation nearby
- Specs, care, FAQ, and returns below the fold
Core rules
- Use real product photography with consistent crop logic.
- Keep price, discount, and original price unmistakable.
- Do not hide shipping, return, or stock signals until checkout.
- Filter language must match how shoppers think, not internal taxonomy.
- Keep promotional badges limited and meaningful.
- Sticky add-to-cart is useful on long product pages.
Conversion rules
- The page should have one dominant buying action.
- Variant selection errors must be specific and local.
- Cart and checkout entry points should stay visible without being noisy.
- Support comparison when product choice is complex; do not overwhelm simple products with enterprise controls.
Reject these failures
- Product cards overloaded with too many badges
- Hidden prices behind hover
- Generic lifestyle imagery with weak product visibility
- Popups that interrupt the first interaction
- Checkout-style urgency language on every surface
Final checks
- Can a shopper understand what is being sold in one glance?
- Are price, stock, shipping, and CTA visible at the moment of decision?
- Does the layout help comparison without making the page feel crowded?
1---2name: ecommerce-storefront-design3description: Use when the task is to design an ecommerce storefront, 电商首页, product listing page, product detail page, shopping flow, or brand shop. Focus on product discovery, merchandising hierarchy, trust, pricing clarity, and conversion flow.4---56# Ecommerce Storefront Design78Use this skill for consumer storefronts, DTC brand sites, category pages, product detail pages, and shopping flows.910Goal: make products easy to discover, compare, trust, and buy. Prioritize imagery, price clarity, shipping confidence, and friction-free selection.1112## Surface priorities1314- Product image first15- Product name second16- Price and promotion third17- Variant or availability fourth18- Trust and shipping signals close to the CTA1920## Page patterns2122### Storefront homepage23241. Hero with one campaign or collection focus252. Featured categories or collections263. Merchandising blocks with real product imagery274. Social proof, shipping promise, or returns confidence285. Secondary category exploration2930### Product listing page31321. Clear category title and item count332. Sticky filters and sorting343. Product grid tuned for image quality and scan speed354. Quick compare or quick add only if it reduces friction3637### Product detail page38391. Large image gallery402. Price, promo, rating, and stock context413. Variant selector and quantity controls424. Primary CTA with shipping or delivery expectation nearby435. Specs, care, FAQ, and returns below the fold4445## Core rules4647- Use real product photography with consistent crop logic.48- Keep price, discount, and original price unmistakable.49- Do not hide shipping, return, or stock signals until checkout.50- Filter language must match how shoppers think, not internal taxonomy.51- Keep promotional badges limited and meaningful.52- Sticky add-to-cart is useful on long product pages.5354## Conversion rules5556- The page should have one dominant buying action.57- Variant selection errors must be specific and local.58- Cart and checkout entry points should stay visible without being noisy.59- Support comparison when product choice is complex; do not overwhelm simple products with enterprise controls.6061## Reject these failures6263- Product cards overloaded with too many badges64- Hidden prices behind hover65- Generic lifestyle imagery with weak product visibility66- Popups that interrupt the first interaction67- Checkout-style urgency language on every surface6869## Final checks7071- Can a shopper understand what is being sold in one glance?72- Are price, stock, shipping, and CTA visible at the moment of decision?73- Does the layout help comparison without making the page feel crowded?
mr-q526