Eclipse
Overview
Eclipse is an eCommerce template designed to make product browsing feel editorial while keeping checkout friction low. The focus is a modern shopping experience: strong photography, clear hierarchy, and conversion-first details.
Goal: turn browsing into buying with a smooth journey from collection → PDP → checkout.
Key pages
- Collection: filters, sort, and quick-look interactions
- Product detail: image gallery, feature bullets, sizing/help, and reviews
- Cart: clear totals, shipping hints, and upsell modules
- Checkout: simplified steps with trustworthy payment messaging
Interaction details
Motion is used to guide attention (not distract). Hover states, micro-animations, and responsive layout shifts help the user feel in control.
- Gallery with swipe support on mobile
- Sticky CTA for “Add to cart” on small screens
- Error states that explain what to fix and why
Rich content capability
The product story blocks are intentionally rich: headings for sections, unordered lists for feature specs, and links for trust signals (press, policies, FAQs). Example: Materials & care, shipping timelines, warranty info, and links like Size Guide or Returns Policy.
SEO & performance
- SEO: structured headings, metadata, and share-friendly previews
- Performance: optimized media placement and lightweight interactions
- Accessibility: keyboard navigation and contrast-safe UI
Artifacts: case study and live demo.