This project is a custom Shopify frontend built using Next.js and Shopify's GraphQL API. It provides a clean and minimalistic interface with a comprehensive set of e-commerce functionalities.
Our custom Shopify frontend includes a wide range of features to enhance the shopping experience:
- User authentication (login/sign-up)
- Product search and discovery
- Wishlist management
- Add to cart and product detail page
- Collection page to browse products
- Checkout process with cart management
- Legal pages with placeholder content
- Product ratings, counts, and brand details
To get started with this project, follow the steps below to set up your development environment.
Ensure you have the following installed:
- Node.js (recommended version 14 or later)
- npm or Yarn
- Clone the repository to your local machine:
git clone https://github.com/DevStackArchitect/shopify-custom-fe-nextjs
- Navigate to the project directory:
cd shopify-custom-fe-nextjs - Install the project dependencies:
npm install
- Copy the .env.example file to a new file named .env, and update it with your Shopify store's details:
cp .env.example .env
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_access_token_here NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your_store_domain_here
Replace your_access_token_here and your_store_domain_here with your Shopify Storefront Access Token and Shopify Store Domain, respectively.
- Start the development server:
npm run dev
- Open your browser and navigate to http://localhost:3000 to view the application.
We welcome contributions to improve this custom Shopify frontend! Please feel free to fork the repository, make your changes, and create a pull request to contribute.
This project is open source and available under the MIT License.
- Shopify GraphQL API
- Next.js Framework
- All contributors and supporters of this project
For questions or contributions, please email me at ashishsaiwal.dev@gmail.com.