Next.js Shopify Starter

🚀 A modern, scalable Next.js e-commerce storefront built with Shopify's Storefront API, TypeScript, TailwindCSS, and TanStack Query.

📹 Video Tutorial

Watch the full walkthrough on YouTube: Next.js Shopify Storefront Tutorial

🛠 Features

• 🔐 Authentication - Secure customer login with Shopify Storefront API
• 🛍 Dynamic Product Fetching - Retrieve and display products, collections, and details dynamically
• 🛒 Cart Functionality - Add, remove, and update items in the cart
• ⚡ Optimized Performance - Efficient API caching and UI rendering with TanStack Query
• 🎨 Fully Responsive UI - Styled with TailwindCSS for a seamless shopping experience

🚀 Tech Stack

• Next.js (App Router)
• TypeScript
• TailwindCSS
• TanStack Query
• Shopify Storefront API

🛠 Setup & Installation

1. Clone the repository

   git clone https://github.com/chetanverma16/nextjs-shopify-starter.git
   cd nextjs-shopify-starter

2. Install dependencies

   npm install  # or yarn install

3. Create a .env.local file and add your Shopify API credentials:

   SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
   SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-access-token

4. Run the development server

   npm run dev  # or yarn dev

5. Open http://localhost:3000 in your browser.

🔗 Resources

• Agency: Webmakers Studio
• UI Components: Webmakers UI

👨💻 Connect with Me

• 🌐 Website
• 🐦 Twitter
• 📸 Instagram

⭐ Support & Contributions

Feel free to open an issue or submit a pull request if you find a bug or have suggestions for improvements. Don't forget to ⭐ the repo if you find it helpful!

📜 License

This project is open-source and available under the MIT License.