--- title: "Build your own e-commerce site with the new Shopify Storefront API Cart feature, Nuxt, and serverless functions" description: "Learn how you can create your own online a headless shopping experience using the new Shopify Storefront API Cart feature, Nuxt, and Netlify serverless functions." source: "https://www.netlify.com/blog/2021/07/21/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1/" last_updated: "2026-07-14T18:17:16.000Z" --- When building an e-commerce site, [Shopify](https://www.shopify.com) is one of the most popular options for people to manage their inventory. Recently, they announced an enhancement to their [Storefront API](https://shopify.dev/custom-storefronts/cart): the ability to manage a cart! And while this may seem a fairly standard feature for e-commerce stores, this was previously something that was only manageable via its [Admin API](https://shopify.dev/api/admin). This enhancement makes building [headless Shopify e-commerce sites](https://www.shopify.com/enterprise/headless-commerce) — where the frontend experience is decoupled from Shopify’s backend — even easier for developers. [Deploy an E-commerce Site to Netlify for Free](https://www.netlify.com/for/ecommerce/) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bencodezen/shopify-nuxt-kit) With the release of this new API, it was only natural that I try to integrate it with the amazing [Nuxt](https://nuxtjs.org/) framework! ![Screenshot of Shopify + Nuxt Kit](/v3/img/blog/shopify-nuxt-kit-blog-post-part-1.png) ## **Shopify + Nuxt Kit Demo & Source Code** If you just want to jump right into the demo and poke around, here’s the link and repo: - 🔗: [Shopify Nuxt Kit Website](https://shopify-nuxt-kit.netlify.app/ "https://shopify-nuxt-kit.netlify.app/") - 💻: [Shopify Nuxt Kit Repo](https://www.github.com/bencodezen/shopify-nuxt-kit) ## **Headless commerce features of the Shopify + Nuxt kit** As far as what this kit includes, there are two major aspects that the kit focuses on: products and the cart. For products, this kit implements the following features: A user can: - see all available products and their respective variants - filter the products by their tag(s) - see a specific product’s details For the shopping cart, this kit implements the following features: A user can: - add one or more items to the cart (which is limited by the inventory of the item) - remove an item from the cart - see the number of items in the cart - see a dedicated row for each item variant with details (such as quantity) - display the item cost based on quantity - display subtotal, tax, and total amounts - see the same cart when they leave and return to the site ## How did you implement it? Great question. As hinted in the title, this is a multi-part series which will help walk you through the kit and my rationale for how it was implemented. So be on the lookout for more to come soon! In the meantime, if you’re curious how you can implement Shopify’s new Storefront Cart functionality in other frameworks, be sure to check my team’s other posts: - [Shopify Storefront API + Eleventy](https://ntl.fyi/3kKAMGT) - [Shopify Storefront API + Gridsome](https://ntl.fyi/3BoRkdx) - [Shopify Storefront API + Next.js](https://www.netlify.com/blog/2021/07/21/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1/) - [Shopify Storefront API + Angular](https://www.netlify.com/blog/2021/08/25/e-commerce-with-angular-shopify-and-netlify-serverless-functions/) - [Shopify Storefront API + Astro](https://www.netlify.com/blog/2021/07/23/build-a-modern-shopping-site-with-astro-and-serverless-functions/) [Deploy an E-commerce Site to Netlify for Free](https://www.netlify.com/for/ecommerce/) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Building a Headless Shopify E-commerce Site with Nuxt and The Storefront API \(Part 1\)&url=https://www.netlify.com/blog/2021/07/21/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F07%2F21%2Fbuilding-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/07/21/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1/) - [Bluesky](https://bsky.app/intent/compose?text=Building a Headless Shopify E-commerce Site with Nuxt and The Storefront API \(Part 1\)+https://www.netlify.com/blog/2021/07/21/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1/) * * * ### Tags - [Shopify](/blog/tags/shopify/) - [E-commerce](/blog/tags/e-commerce/) - [Nuxt](/blog/tags/nuxt/) - [Serverless](/blog/tags/serverless/) - [Functions](/blog/tags/functions/) - [Vue](/blog/tags/vue/) - [Headless](/blog/tags/headless/) ## Keep reading ![](/_astro/7ae8c54dbb1879e55d316e6435292b920c322fbe-1200x630_Z12Re04.webp) Tools & Services July 28, 2022 [ ### Building a Headless Shopify E-commerce Site with Nuxt and The Storefront API (Part 2) ](/blog/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-2) - ![Profile picture of Ben Hong](/_astro/9d8ffdfbbafb67a111dae8c166ab28fcf2f5d2a1-460x460_5YpV0.webp) Ben Hong ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials July 19, 2021 [ ### A Template for Building Shopify Stores with the Storefront API and Gridsome ](/blog/2021/07/19/shopify-announces-enhanced-storefront-apis-a-first-look-with-gridsome-and-netlify/) - ![Profile picture of Ekene Eze](/_astro/c97b196f1227b05d92404625ecc4779ce8a60661-1000x1000_Z1bjliB.webp) Ekene Eze ## Recent posts News & Announcements July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)