Home
eloi.

© 2026 Eloisa Jane Talingting. All rights reserved.

Projects/Headless Commerce: Reimagining the Nothing Experience
Headless Commerce: Reimagining the Nothing Experience
E-commerce - Headless Shopify

Headless Commerce: Reimagining the Nothing Experience

A headless Shopify storefront built with Next.js, focused on performance, usability, and a frictionless purchasing experience.

UI/UX Designer & Developer|Personal Project|May 2026
View on GitHub
Experience It Live

Tools Used

Framer MotionNext.jsShopify Storefront APITailwind CSSVercel

Modern e-commerce is evolving, but many storefronts still struggle to balance high-end brand aesthetics with seamless technical performance. For this project, I wanted to strip away any remaining friction and build a storefront for Nothing that feels as fast, fluid, and deliberate as the products themselves.

The Problem: Designing for Focus

While modern e-commerce platforms continue to improve, building a truly custom, performance-first experience often requires moving beyond standard templates. I wanted to create a shopping environment where the interface recedes, allowing the product to take center stage without the common interruptions of heavy page loads or rigid navigation.

The UX Philosophy: Frictionless Intent

I grounded every design decision in three core principles:

  • Product Context: You should never have to guess. I surfaced all decision-relevant information—variants, specs, and details—upfront, ensuring full clarity before you commit to a purchase.

  • Purchase Intent: The path to buy should be constant. By using a Sticky CTA, the button remains visible as you scroll, removing hesitation when you are ready to act.

  • Reduced Interaction Delays: Trust is earned through speed. I prioritized instant updates and fewer page loads to eliminate every unnecessary wait, ensuring speed at each micro-interaction.

The Technical Backbone

To achieve this, I decoupled the frontend from Shopify’s standard theme engine, building a custom interface that talks directly to the backend via GraphQL. I accelerated the development process by utilizing the Vercel Commerce boilerplate as a foundation, which allowed me to focus my energy on customizing the interaction layer rather than building the basic infrastructure from scratch. This approach gives me total control over the experience

Enhanced Cart Capabilities:

  • Sticky Cart: Keeps the purchase action fixed and accessible while you explore product details.

  • Slide-Over Cart: A drawer pattern powered by Framer Motion that prevents you from ever leaving the page.

  • Dynamic Cart Editing: You can change variants directly inside the drawer, keeping you in the flow without needing to navigate back to the product detail page just to select another variant.

Shopify Integration: While the frontend is fully custom, the operational integrity remains in Shopify Admin. Shopify handles the heavy lifting—inventory, pricing, and secure checkout.

Outcome

This project resulted in a storefront that prioritizes the user's intent. By removing unnecessary navigation and focusing on immediate, data-driven interactions, I built a system that turns browsing into a direct, high-performance shopping experience. It demonstrates that when you control the entire interface, you can make the path from discovery to purchase feel effortless.

Experience It Live
Next

More Projects

View all
Nova Echo AI Website Redesign

Nova Echo AI Website Redesign

From a BLOOM — A Concept Website for BINI

From a BLOOM — A Concept Website for BINI

View all projects