Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js

In this video, we're going to build a simple Ecommerce website with Tailwind UI, Shopify, and Next.js.

We'll fetch products from Shopify using the Storefront GraphQL API, and build our front-end by assembling and customizing components from Tailwind UI.

Demo site: tailwindui-shopify.vercel.app/
Tailwind UI: tailwindui.com/
Storefront API: shopify.dev/api/storefront

0:00 – Intro
0:42 – Starting point
1:56 – Tailwind UI
2:29 – Homepage hero
3:56 – Products list
5:26 – Storefront API
8:01 – Fetching data in Next.js
8:33 – Fetch helper method
10:50 – Products query
12:52 – Displaying products
15:55 – Drink some water!
16:04 – Single product page
16:33 – Tailwind UI page example
19:07 – Single product query
23:29 – Displaying the product
25:38 – Related products query
27:31 – Displaying related products
28:21 – Checkout button
32:45 – Wrap up