shopify-next-tailwind starter kit

This starter kit features Shopify, NextJS 13.4 and Tailwind CSS.

Overview

Tech Stack

• Shopify
• Next.js v13.4.x
• Tailwind CSS v3.x

Included Tooling

• Typescript - Type checking
• Storybook - Component library
• ESLint - Code linting
• Prettier - Code formatting

How to configure your Shopify store

This template requires a paid Shopify plan.

Note: This template will not work with a Shopify Starter plan as it does not allow installation of custom themes, which is required to run as a headless storefront.

Add Shopify domain to an environment variable

Create a PUBLIC_STORE_DOMAIN environment variable and use your Shopify domain as the the value (ie. [your-shopify-store-subdomain].myshopify.com).

Note: Do not include the https://.

Accessing the Shopify Storefront API

This template utilizes Shopify’s Storefront API to create unique customer experiences. The API offers a full range of commerce options making it possible for customers to control products, collections, menus, pages, cart, checkout, and more.

Shopify recommends the use of their Headless app in your Shopify store, see https://shopify.dev/docs/custom-storefronts/headless for more info.

Once installed, you’ll need to create a PUBLIC_STOREFRONT_API_TOKEN environment variable and use the public access token as the value.

Installation

You will need to use the environment variables defined in .env.example to run Next.js Commerce. A .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control your Shopify store.

This is a Next.js project bootstrapped with create-next-app.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

If you want to tag and create a release for your project during your development, you could find a GitHub Worflow template example in the GitHub Workflow folder inside the project.

CLI (Recommended)

npm create @this-dot/starter -- --kit shopify-next-tailwind

or

yarn create @this-dot/starter --kit shopify-next-tailwind

or

pnpm create @this-dot/starter --kit shopify-next-tailwind

• Follow the prompts to select the shopify-next-tailwind starter kit and name your new project.
• cd into your project directory and run pnpm i.
• Run pnpm run dev to start the development server.
• Open your browser to http://localhost:3000 to see the included template project code running.

Manual

git clone https://github.com/thisdot/starter.dev.git

• Copy and rename the starters/shopify-next-tailwind directory to the name of your new project.
• cd into your project directory and run pnpm i.
• Run pnpm run dev to start the development server.
• Open your browser to http://localhost:3000 to see the included template project code running.

Commands

• pnpm run start - Starts the development server.
• pnpm run dev - Equivalent to pnpm run start, but uses 127.0.0.1 instead of localhost when opening browser.
• pnpm run build - Builds a compiled production version of your app.
• pnpm run storybook - Starts the Storybook UI.
• pnpm run build-storybook - Builds storybook instance to storybook-static folder.
• pnpm run lint - Runs ESLint on the project.
• pnpm run format - Formats code for the entire project.
• pnpm run format.check - Checks all project code to conform to prettier rules.

Shopify Analytics

By default, Shopify Analytics is enabled. There are 2 main options you have to set them in the code from app/components/ShopifyAnalytics.tsx:

• currency - The currency used in the store. nd by default is set to USD.
• acceptedLanguages - The languages accepted by the store. By default is set to US.

Demo Implementation

Live Store