MetaShop- Headless WooCommerce React Theme

Metashop - Headless WooCommerce Theme

Metashop is a headless WooCommerce theme powered by Next.js, TypeScript, Tailwind CSS, WordPress, and the WooCommerce REST API.

You can quickly start a scalable, lightning-fast loading eCommerce website.

👉 Nextjs as Frontend

Next.js and Tailwind CSS are used as the frontend and connected to the frontend via the REST API.

👉 WordPress as Backend

WordPress and WooCommerce are used as the backend and connected to the API via the REST API. You can manage products, contents, orders, blogs, and SEO from WordPress.

Project Structure

The project is structured based on the monorepo Turborepo, and it includes the following packages:

• apps/site: This package contains the main site built with Next.js. You will deploy the site package.
• packages/checkout-flow: This package is used for the Checkout page UI.
• packages/cocart-utils: This package is used for interacting with the Cocart API. For more details, visit the Cocart API documentation.
• packages/commerce-ui: This package is used for UI Design.
• packages/eslint-config-custom: This package contains eslint configurations, including eslint-config-next and eslint-config-prettier.
• packages/tsconfig: This package includes tsconfig.json files used throughout the monorepo.

Download and Get Started

• Purchase the WooCommerce Headless theme and download the file from your account. If you encounter any problems while downloading, please send us an email.
• Once downloaded, continue with the below documentation.

Prerequisites

• Please msake sure you have installed WordPress in a sub domain like api.your-domain.com and WooCommerce, Cocart, Yoast plugins are installed.

• Please make sure that you have the latest version of pnpm installed on your computer. You can install the latest version of pnpm by running the following command in your terminal:

1npm install pnpm@latest -g

Installation

Installing the project is easy and straightforward. If you're using pnpm, run the following command in your terminal from the project root:

1pnpm install

That's it! The package will now be installed and ready for use in your project. You can then import the package and use its components in your code. Please make sure that you have the latest version of pnpm, npm or yarn installed in your system."

Build

Please add all the environment variables from the example env file at apps/site

To build all apps and packages, run the following command:

#from root
pnpm run build

Develop

To develop all apps and packages, run the following command:

cd my-project
pnpm run dev

Useful Links

• Contact Us
• All Products