Headless Shopify Storefront with Next.js, Cart, Filters and SetsHeadless Shopify Storefront with Next.js, Cart, Filters and Sets
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Built a headless Shopify storefront straight from the Storefront API. Next.js handles the routing and rendering, the API feeds in 23 products from Shopify's sample catalog, photos and prices included.
Color swatches swap the product shot and the price on click. Filters sit in the URL, so a filtered collection page is a shareable link. There's a set builder: pick three pieces, 15% off.
The cart is real. Add items, change quantities, close the tab, come back a month later. Still there (30-day cookie). Checkout is a mock, no payment.
Also wrote three Liquid sections for Dawn and ran them through theme-check. Zero issues.
100 on accessibility, best practices and SEO on Lighthouse desktop.
Post image
Rasaq's avatar
Impressive build. The shareable filters and persistent cart show great attention to the shopping experience.
Maxime's avatar
Thanks. The filters live in the URL, so if you narrow down to size M in blue you can share that exact link and the other person lands on the same filtered view. Cart sticks around for 30 days through a cookie so people don't lose their picks when they close the tab. Curious what kind of shopping flows you've been working on?
Mariana's avatar
The set builder is the part I'd want to see tested. Bundles usually convert better when the discount and the progress (1 of 3 picked) stay visible on the PDP, not only in the cart. Is the 15% shown while people are still picking pieces?
Maxime's avatar
Good call. Right now the counter (1 of 3 picked) shows while you're picking so you see where you stand. But the discount amount only appears once you've picked the third piece, and the product page doesn't say anything about it. If I were to push it further I'd put a small...
Rukhsar's avatar
Putting the filters in the URL is the detail I like most. A filtered page becomes a shareable link for free. The 30-day cart cookie is smart too. Buyers come back and their picks are still there. A 100 on Lighthouse on top of all that is a strong build.
Maxime's avatar
Thanks, Rukhsar. The URL filters were the simplest part of the build to get right, since a refresh or a shared link lands on the exact same view, and there's no extra state to keep in sync. Small correction on Lighthouse though: the 100s are accessibility, best practices and SEO on desktop. Performance sits in the high 90s.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started