About This Project
On many EC sites, every press of the "Add to Cart" button reloads the entire page, and the user waits a few seconds each time. Those interruptions break the rhythm of shopping and become a reason to leave. From the store's side, the problem shows up in the numbers: products get viewed but not added to the cart, or added but never purchased.
In this project, we used the Storefront API provided by Shopify (a platform that serves as the foundation of an EC site; the API is the gateway that lets an external site call Shopify's features) to build an "Ajax cart" — a cart where every action completes without leaving the page. Add a product and the cart icon count goes up on the spot, while a cart panel slides in from the side of the screen. The page reloads that used to happen on every action are removed from the flow entirely.
The structure is simple: the front end, built with Next.js (a framework that serves as the foundation for building websites), asks the API to "add this item," then reflects the answer in just the part of the screen that changed. Since the full page is never re-fetched, the perceived wait is close to zero — and that "everything responds instantly" feeling translates directly into shoppers staying in the flow.
Learn More
Three articles cover the Ajax cart in detail. If this is new to you, reading them in order works best.
What is an Ajax Cart?
Start with the basics: what an Ajax cart is, how it differs from a traditional cart, and why it matters.
Cart UX Improvement Points
The effects of an Ajax cart and the small touches users appreciate, including mobile considerations.
How the Shopify Cart API Works
Queries to the Storefront API, state management, optimistic UI updates — how it all fits together behind the scenes.
Architecture
Click
The whole page is fetched again, and the user waits
In the traditional approach, every click rebuilds the entire page, so a wait occurs each time.
Click
Instant reflection — the page stays put
In the new approach, only the necessary data travels to and from the API, and only the changed parts of the screen are redrawn. The page itself stays, so shopping is never interrupted.
Key Results
- Waiting eliminated: The page reloads that accompanied every cart action are gone; operations feel instantaneous
- Higher add-to-cart rate: With adding made effortless, users put second and third items in the cart more often
- Better purchase experience: An uninterrupted shopping flow feeds directly into satisfaction and completion rates
Technologies Used
- Shopify Storefront API (GraphQL)
- Next.js (App Router)
- React Context / Zustand
- TypeScript