🛍 Next Shopify Storefront

A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.

Experience

When I started this project, I had no idea how complex building a storefront could be. But step by step, I figured it out.

I designed and built everything from scratch—structuring data, styling components, making sure everything loads fast. I used GraphQL Zeus to talk to Shopify’s GraphQL API, Shopify Hydrogen to power the storefront, and Next.js for performance.

Tailwind CSS and Headless UI made styling smooth. TypeScript kept everything safe and predictable. React Use Hooks sped up development. I even built Shopify Utilities to make selecting product variants easier.

Then came SEO, best practices, and refining the user experience. Swiper made touch interactions feel natural. ESlint and Prettier kept the code clean.

It was a process of learning, breaking things, fixing them, and refining. And in the end, it wasn’t just about building a store—it was about building something that works beautifully.

If you like this project, hit the STAR button to bookmark it ⭐️

Demonstration

You can visit here to see the demo: https://next-shopify-storefront.vercel.app/

Installation

Clone the source code into your computer.

git clone https://github.com/VienDinhCom/next-shopify-storefront.git

This project was developed with Node 18 and NPM 10.

To set up a compatible environment, please download Volta and run volta setup.

Then, install the project's dependencies.

npm install

Usage

First, you need to set the below environment variables in the .env file or your deployment platforms.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

You can follow the Shopify Storefront GraphQL API documentation to get Storefront API information.

Develop

Develop the project in development mode.

npm run dev

Build

Build the project in production mode.

npm run build

Start

Start the project in production mode.

npm run start

Lint

Analyze the code to find problems with eslint and prettier.

npm run lint

Automatically fix problems.

npm run fix

Visual Studio Code Extensions

To speed up your productivity, you can install these extensions:

• Eslint
• Prettier
• Visual Studio IntelliCode
• Tailwind CSS IntelliSense
• PostCSS Language Support

Tutorials

• How Do I Organize a Sustainable Next.js Project?
• How Do I Handle Typesafe Modular Data Fetching in Next.js?
• How Do I Interact Safely with GraphQL API in Next.js?
• How Do I Implement Dynamic Variant Selector for Shopify in Next.js?

Related Projects

• Shopify Data Faker • A Shopify development tool for generating dummy store data.
• Bootstrap Shopify Theme • A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
• Next Shopify Storefront (v2) • A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.
• Next Shopify Storefront (v1) • A Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.