Shopify Headless Storefront

A modern headless commerce storefront built with React.js, Tailwind CSS, and Shopify's Storefront API. This project provides a fast, flexible, and customizable e-commerce solution that decouples the frontend from Shopify's backend.

Introduction

This project demonstrates how to build a headless Shopify storefront using modern web technologies. By leveraging Shopify's Storefront API, you can create a fully customized shopping experience while still utilizing Shopify's powerful e-commerce backend for product management, inventory, checkout, and order processing.

Features

• 🚀 Fast Performance: Built with React.js for optimal performance and user experience
• 🎨 Modern UI: Styled with Tailwind CSS for a clean, responsive design
• 🔌 Shopify Integration: Seamless integration with Shopify Storefront API
• 📱 Responsive Design: Mobile-first approach that works on all devices
• 🛒 Cart Management: Full shopping cart functionality
• 🔍 Product Search: Search and filter products efficiently
• 💳 Secure Checkout: Utilizes Shopify's secure checkout process
• ⚡ GraphQL: Efficient data fetching with Shopify's GraphQL API

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• A Shopify store with Storefront API access

Installation

1. Clone the repository:

git clone https://github.com/Lakshya52/shopify-headless-storefront.git
cd shopify-headless-storefront

2. Install dependencies:

npm install
# or
yarn install

3. Create a .env file in the root directory and add your Shopify credentials:

REACT_APP_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
REACT_APP_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token

4. Start the development server:

npm start
# or
yarn start

5. Open http://localhost:3000 to view it in your browser.

Build for Production

npm run build
# or
yarn build

Shopify API Integration

Setting Up Storefront API Access

1. Log in to your Shopify Admin panel
2. Navigate to Apps > Develop apps
3. Click Create an app
4. Configure Storefront API permissions:
   • unauthenticated_read_product_listings
   • unauthenticated_read_product_inventory
   • unauthenticated_read_checkouts
   • unauthenticated_write_checkouts
5. Install the app and copy your Storefront Access Token

API Configuration

The Shopify Storefront API client is configured in src/utils/shopify.js:

import Client from 'shopify-buy';

const client = Client.buildClient({
  domain: process.env.REACT_APP_SHOPIFY_STORE_DOMAIN,
  storefrontAccessToken: process.env.REACT_APP_SHOPIFY_STOREFRONT_ACCESS_TOKEN
});

export default client;

Project Structure

shopify-headless-storefront/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Cart/
│   │   │   ├── Cart.jsx
│   │   │   └── CartItem.jsx
│   │   ├── Product/
│   │   │   ├── ProductCard.jsx
│   │   │   ├── ProductList.jsx
│   │   │   └── ProductDetail.jsx
│   │   ├── Header/
│   │   │   └── Header.jsx
│   │   └── Footer/
│   │       └── Footer.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Products.jsx
│   │   └── Checkout.jsx
│   ├── utils/
│   │   ├── shopify.js
│   │   └── helpers.js
│   ├── hooks/
│   │   ├── useProducts.js
│   │   └── useCart.js
│   ├── App.js
│   ├── index.js
│   └── index.css
├── .env.example
├── package.json
├── tailwind.config.js
└── README.md

Sample GraphQL Query

Here's an example of fetching products using Shopify's Storefront API GraphQL:

query GetProducts($first: Int!) {
  products(first: $first) {
    edges {
      node {
        id
        title
        description
        handle
        images(first: 1) {
          edges {
            node {
              src
              altText
            }
          }
        }
        variants(first: 1) {
          edges {
            node {
              id
              title
              price {
                amount
                currencyCode
              }
              availableForSale
            }
          }
        }
      }
    }
  }
}

Using the Query in React

import { useEffect, useState } from 'react';
import client from '../utils/shopify';

function useProducts() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    client.product.fetchAll().then((products) => {
      setProducts(products);
      setLoading(false);
    });
  }, []);

  return { products, loading };
}

export default useProducts;

Contribution

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature-name)
3. Make your changes
4. Commit your changes (git commit -m 'Add some feature')
5. Push to the branch (git push origin feature/your-feature-name)
6. Open a Pull Request

Guidelines

• Follow the existing code style
• Write clear commit messages
• Add comments for complex logic
• Test your changes thoroughly
• Update documentation as needed

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ using React.js, Tailwind CSS, and Shopify Storefront API

For questions or support, please open an issue on GitHub.