Installation

Getting Started

ℹ️

Prerequisites: Before you begin, ensure that you have a Code Editor (such as VS Code), the latest version of Node.js, and a package manager (PNPM) installed on your computer. If you do not have these installed, please install them.

pnpm Installation (Recommended)

npm install pnpm@latest -g

ℹ️

NOTE: If you are not familiar with coding, version control (GitHub), or hosting, please contact our support team at support@jstemplate.net. We will assist you.

1. Download the Theme

Download the theme from CodeCanyon (opens in a new tab) or, if you purchased it from jstemplate.net (opens in a new tab), check your confirmation email for the download link.
Extract the zip file to your computer.
The code/Metashop folder contains the frontend code in apps/site.

ℹ️

Prerequisites: Make sure your WordPress is installed with the recommended plugins below. We will need the WordPress API endpoint.

Open the code in your code editor and terminal.
Run the following command:

pnpm install

Configure the Environment Variables

Create a .env.local file in the apps/site directory.
Copy the contents of .env.example into .env.local.
Replace the values with your own.

# API Config
API_URL="Your_Backend_API_URL"
NEXT_PUBLIC_SITE_URL="Your_Frontend_URL"
 
# Next Auth Config
NEXTAUTH_URL="Your_Frontend_URL"
NEXTAUTH_SECRET="Your_Next_Auth_Secret"
 
# WooCommerce Config
WOOCOMMERCE_CONSUMER_KEY="Your_WooCommerce_Consumer_Key"
WOOCOMMERCE_CONSUMER_SECRET="Your_WooCommerce_Consumer_Secret"

ℹ️

Note:

For Next Auth Config:

NEXTAUTH_SECRET: You can quickly create a good value on the command line via this openssl command.
```
 openssl rand -base64 32
```
For WooCommerce Config follow: WooCommerce Rest API Key (opens in a new tab)

Ensure that you have included all key-value pairs in the .env.local file located in the apps/site directory.

Required WordPress Plugins:

Start The Application

To start the application in development mode, run the following command from the project root:

pnpm -F site dev

It will start on your localhost port http://localhost:3000

Build The Production

To build for production, run the following command:

pnpm -F site build

Thank you for choosing Metashop for Headless WooCommerce Store! If you have any questions or issues, please reach out to our support team at support@jstemplate.net

Introduction Products Category