Magento 2 Multi Vendor NextJS Theme – User Documentation

Adobe Commerce Headless Multi Vendor Marketplace: Magento 2 Multi Vendor NextJS Theme is a cutting-edge eCommerce solution that leverages the power of headless architecture to deliver exceptional performance, security, and flexibility.

The custom theme is built using React NextJS for the front end and seamlessly integrated with Magento 2 through GraphQL APIs.

Magento 2 Headless Development services will allow you to gain access to the headless development architecture.

Note: This theme is compatible with the default Magento 2 as well as with the Multi Vendor Marketplace.

For this theme to work with the Multi Vendor Marketplace, you must first have installed below modules –

Magento 2 Multi Vendor Marketplace

Magento 2 Multi Vendor REST/GraphQL API

Check the video mentioned below to check the functionality of our Magento 2 Multi Vendor Headless Theme:

It offers a robust and feature-rich platform for online businesses looking to host multiple vendors.

• The theme is a headless theme.
• ISR(incremental site regeneration) is used for product pages.
• SSG(static site generation) is used for CMS and other static pages.
• Tailwind, and PostCSS were implemented for the theme.
• Increase the performance of the website.
• It Improves WebCore vitals.
• Low maintenance on Adbobe Commerce Version Update.
• The performance of the website increased.
• Nextjs provides SEO of your website.
• Easy integration of third party via APIs.
• GraphQL has been implemented for the extension.

To create a unique Magento 2 marketplace ReactJS Theme, we employed GraphQL storefront API development to establish a seamless connection between the Magento 2 backend and the frontend.

Apart from that, we have made use of the below frameworks to create this Multi Vendor Headless theme:

• Next.JS
• Typescript
• Tailwind CSS

You must allow Request Origin as well as Request headers to make it work with the theme. Please follow the below instructions.

# For Apache

Header set Access-Control-Allow-Origin "https://your-theme-url.com/"
Header set Access-Control-Allow-Headers "Accept, Content-Type, Authorization, Store"

# For Nginx

add_header 'Access-Control-Allow-Origin' 'https://your-theme-url.com/';
add_header 'Access-Control-Allow-Headers' 'Accept, Content-Type, Authorization, Store';

Headless Theme Installation

Prerequisites
Node >=16.0.0
NPM >=8.1.0 OR YARN >=1.22.0

Customers can install the theme via two methods: 

1. Vercel 
2. Manual Installation

1. Vercel

Vercel is the native Next.js platform, designed to enhance the Next.js experience. It is the best way to host the next js (framework). You can import the Git Repository from GitHub, GitLab or BitBucket. 

Login using Git, you can also log in with your email but need to link with Git. Now follow the steps mentioned below for logging in: 

1: Go to Vercel Dashboard and click on Add New. 

2: Select a Git provider to import an existing project from a Git Repository. 

3: Now click on the import option as mentioned below in the snapshot: 

4: Here you have to enter the environment variables with their values, which you will get after extracting the zip file in the .env.template. 

5: Once you click on deploy you will get the URL from Vercel also you can manage your domain from Vercel > Settings > Domain.

After clicking on Voguish Theme You can check the project Dashboard as mentioned below in the snapshot:

2. Manual Installation

• The Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has a NextJs folder, move the folder into the directory where you want to install it.
• Setup env – Duplicate env.template rename the duplicate to .env. Now update the values mentioned below in the env file:

  MAGENTO_ENDPOINT=https://magento-url.com/
  NEXTAUTH_URL=http://localhost:3000/
  NO_SECRET="TEST_VOGUISH"
  NEXTAUTH_SECRET=TEST_VOGUISH
  MODE=PRODUCTION
  DEFAULT_STORE_CODE=default
  IMAGE_DOMAINS= magento-url.com (domain from where images will be load eg: magento-url domain, cloudflare-domain)
  

• Run the following command via the terminal:

  npm install OR yarn install
  

  npm run build OR yarn build
  

  npm run start OR yarn start
  

  In case you want to change the value of any of the messages then open the locale folder go to message.po file inside en. Enter the value in msgstr in respective to the msgid. Then run the command of build and start.
•  It will serve on a 3000 port to your server for eg: http://localhost:3000/. 
• You can access Magento 2 Headless Multi Vendor Marketplace Theme by using your-serverip:3000 and also you can ask your server team to map your 3000 port to any dedicated domain.

The Magento 2 Multi Vendor NextJS Theme looks as shown in the below snapshots.

The view of the customer public page on the website.

Home Page

A well-organized home page with a navigation menu, categorized pages, featured products, a special offer section, banner with a call-to-action button.

Organize and display a collection of products or services for users to browse and potentially purchase using the catalog.

Add featured products on the home page and make it more enhancing and visually appealing for visitors.

Category Page

Display a collection of products that belong to a specific category with layered navigation, making it easier for visitors to find and filter products in which they are interested.

Catalog Listing

Users can easily categorize the products by using various filter options on the top right-hand side. Users can sort products by using any option shown in the below screenshots.

The users can also change the currency as required for the products being displayed.

Product Page

Create fascinating product pages by adding descriptions, respective related products, and enabling product reviews.

Also, the visitors can find the related products added to the product.

The reviews section is also provided as shown in the below snapshots.

Page Performance

A good user experience is measured by various metrics such as page load time, session duration, bounce rate, conversion rate, and overall usability.

Vougish themes enhance user satisfaction, increase engagement, improve search engine rankings, and ultimately achieve their business goals.

Search option:

Using the search option on the right side of the menu, visitors can find products quickly and easily.

Cart page

A shopping cart icon or symbol at the right top of the website’s layout indicates to customers that they can view their cart at any time.

Also, provide a prominent “Checkout” button that initiates the process of completing the purchase.

Checkout page

Here, the users can find a smooth and efficient checkout page with shipping address, shipping method, billing address, payment, and review order.

Login/Sign Up Page

If you’ve already an account on the Magento 2 Multi Vendor Headless Theme then enter the below details to log in to your account.

To register yourself to Vougish click on the sign up option as shown in the below screenshots.

Enter the given details to create a new customer account.

Customize marketplace content features as per requirements.

To become a seller/vendor, click on the button Open your shop.

Choose the YES option, to register as a seller/vendor and enter the following information.

Customer Profile Page

After logging into the website, customer can find their profile account panel options, and also edit and manage the applicable data as required.

Wishlist: The customers can view the products added to the wishlist, delete them from the wishlist, or add them to the cart from the wishlist.

Orders: View placed orders and their details as well.

Order details are visible to the customers.

Profile: Edit the profile details.

Address: Customers can view their saved address, and edit or delete the same.

Apart from that, add a new address as required.

Reset password: Customers can reset their password easily.

Admin can navigate Store > Voguish Configuration to enter the title and description of explore products and recently viewed products and the URL of social platforms.

Manage and edit the benefits section configuration. Please refer to the below image for a better understanding.

Admin can manage the Voguish theme configuration in the Voguish section.

Manage Banner

Add and Edit the banners as shown in the below screenshots

Brand Banners Configuration

Add the Brand Banner description.

Shop Banners configuration

Add a title and description for the shop banners.

Choose banners that you want to show on the home page in shop banners configuration > assign shop banners.

Featured Products Configuration

Then, enter the title and description for the featured product configuration.

Click on the Assign Featured Products to choose the products want to display on the home page as featured products.

Corner Offers Configuration

Enter the title and description for the corner offers configuration.

Home Page Configurator

Admin can edit home page as per requirements. Select the section which you want to display on your website homepage.

The storefront view of the homepage looks as shown in the below screenshots.

Manage Footer Links

Admin can add and manage the footer links.

That’s all for the Magento 2 Multi Vendor NextJS Theme. In case you need any further information, then feel free to create a ticket here https://webkul.uvdesk.com.