Documentation: Premium Magento Headless Theme - Fashion Edition

1. Prerequisites

Before installing the Premium Magento Headless Theme - Fashion Edition, ensure your system meets the following requirements:

• Node.js: v18.x or v20.x
• Package Manager: npm or yarn
• Magento: Magento 2.4.6+ or Mage-OS 1.0.x with GraphQL enabled

2. Magento Backend Setup

The theme requires a functioning Magento GraphQL endpoint. You do not need to install any custom Magento modules for the core functionality; our Next.js architecture perfectly parses standard Magento CMS blocks.

3. Demo Data Installation

To replicate the exact look of our demo, you must install the CMS blocks (Holographic tiles, banners, etc.) into your Magento database. We provide a robust PHP provisioning script to do this safely.

If you are using DDEV for local development, run the following command from the root of your frontend theme repository:

# 1. Copy the provision script to your Magento container
docker cp scripts/magento/provision-cms.php ddev-mageos-web:/var/www/html/pub/

# 2. Execute the script inside the container
docker exec -it ddev-mageos-web php /var/www/html/pub/provision-cms.php

# 3. Clean the Magento cache
docker exec -it ddev-mageos-web bin/magento cache:clean

Note: If you are not using DDEV, simply upload `provision-cms.php` to your Magento `pub/` directory and execute it via the PHP CLI.

4. Environment Variables

Configure the frontend to connect to your Magento backend. Rename `.env.example` to `.env.local` and set the following:

# .env.local
NEXT_PUBLIC_MAGENTO_GRAPHQL_URL="https://mageos.ddev.site/graphql"
NEXT_PUBLIC_MAGENTO_STORE_CODE="default"

5. Frontend Deployment

Once your environment variables are set, install dependencies and start the development server:

npm install
npm run dev

Deploying to Vercel

To deploy this high-performance Next.js 15 App Router theme to production on Vercel, run:

npx vercel

Ensure you configure your environment variables in the Vercel dashboard prior to building.