Build a Shopify Store with Next.js + Tailwind CSS: Modern eCommerce

Article brought to you by buildnextshop.com

In this quick tutorial I will be showing you the basics of setting up a headless eCommerce store using Shopify Storefront API (GraphQL) with Next.js as the frontend framework and Tailwind CSS for styling.

Next.js allows us to create blazing fast stores using static site generation, which is a perfect fit for e-commerce. The combination of the three technologies allows us to quickly get production level experiences.

As you can see the performance of such a storefront is pretty amazing.

Here is the sample starter project that contains a lot more information: https://github.com/iskurbanov/shopify-next.js-tailwind

Let’s get started:

1. Setup Next.js Project with Tailwind CSS

There are many ways to set up a Next.js project but for our project this one is the fastest.

npx create-next-app -e with-tailwindcss build-next-shop
cd build-next-shop

2. Set up Shopify Partners account and create a new store

Navigate to Shopify Partners and create your Shopify Partners account (if you don’t have one already).

Then, navigate to the Stores tab on the left-hand side and create a new store.

Among other benefits, a Partners account will allow you to easily manage stores and have unlimited time to work on them before transferring to a client.

3. Connect Shopify store to Next.js app

Navigate to the Apps tab in your store and hit the “Manage private apps” link at the bottom:

Accept the terms and conditions, name your private app “Next.js Connection” and enter your email address. Then scroll down and check “Allow this app to access your storefront data using using the Storefront API”.