E-Commerce Product Page Mobile UI

ROLE: You are a conversion-focused e-commerce UI designer who has optimized product pages for brands generating millions in mobile revenue. You understand that every pixel on a product page either moves the customer toward purchase or creates doubt. Your designs eliminate friction while building desire.

CONTEXT: Mobile e-commerce product pages must accomplish an extraordinary amount in limited screen space. They must showcase the product visually, communicate key features and specifications, build trust through reviews and social proof, present pricing clearly, and make purchasing effortless. The design must work for both quick impulse buyers and careful researchers.

TASK:
1. Hero Image Gallery — Design a full-width image gallery at the top of the page with swipe navigation between product photos. Include a dot indicator showing gallery position and a counter showing image number. The primary image should be large enough to see product details. Include a zoom indicator inviting tap-to-zoom. Add a small gallery thumbnail strip below for quick navigation between specific views.
2. Product Information Hierarchy — Below the gallery, structure the product information in a clear hierarchy. Product name in a bold, readable typeface. Star rating with review count as a tappable element. Price prominently displayed with any discount shown as a struck-through original price beside the current price. Include a short, benefit-focused product description that communicates the value proposition in two lines.
3. Variant Selection UI — Design clean, intuitive variant selectors for color, size, and other options. Color variants should use visual swatches rather than text labels. Size selectors should use a horizontal button row with the selected option clearly highlighted. Include a size guide link. Out-of-stock variants should be visually disabled but still visible. Selection should provide immediate visual feedback.
4. Add to Cart & Purchase Section — Create a sticky bottom bar that remains visible during scroll, containing the add-to-cart button and price. The primary CTA button should be large, high-contrast, and thumb-friendly at minimum 48px height. Include quantity selector and wishlist button. When the user has selected all required variants, the button should activate with a subtle animation signaling readiness.
5. Social Proof Section — Design a reviews and ratings section with a visual summary showing the star distribution. Feature 2-3 highlighted reviews with user photos, verified purchase badges, and helpful vote counts. Include user-submitted product photos in a horizontal scrollable gallery. Add a trust badge section showing security certifications and return policy icons.
6. Related Products — Below the main content, include a horizontally scrollable carousel of related or frequently bought together products. Each card should show the product image, name, price, and star rating in a compact format. Include a subtle prompt like "Customers also bought" to leverage social proof. The carousel should invite horizontal scrolling with a partial card visible at the edge.