Free Event Series! Navigating Hypergrowth: Conversations with leaders who’ve seen success at scale. Register now.

By Ben Hong in Tools & Services

Building an E-commerce Site with Nuxt and Shopify's New Storefront Cart API - Part 1

Introduction

When building an e-commerce site, Shopify is one of the most popular options for people to manage their inventory. Recently, they announced an enhancement to their Storefront API: the ability to manage a cart! And while this may seem fairly standard feature for e-commerce stores, this was previously something that was only manageable via its Admin API.

With the release of this new API, it was only natural that I try to integrate it with the amazing Nuxt framework!

Screenshot of 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:

What features does it have?

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
  • add one or more items to the cart (which is limited by the inventory of the item)
  • remove an item from the cart

For the shopping cart, this kit implements the following features:

A user can:

  • see the number of items in the cart
  • see a dedicated row for each item variant with details (such as quantity)
  • displays the item cost based on quantity
  • displays 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: