Reading list Switch to dark mode

    Magento 2 Multi Vendor NextJS Theme – User Documentation

    Updated 28 February 2024

    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 –

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    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:

    luZYCRNUgEk

    Features

    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.

    Frameworks

    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

    Header Request

    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';

    Installation Procedure

    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. 

    1

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

    2

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

    3-8

    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. 

    4-7

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

    5-7

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

    6-8

    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.
    terminal

    Storefront View

    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.

    develop-voguish.vercel.app_asd

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

    develop-voguish.vercel.app_asd-1

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

    develop-voguish.vercel.app_asd-2

    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.

    develop-voguish.vercel.app_asd-3

    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.

    develop-voguish.vercel.app_catalog_category_jackets-womenasd

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

    develop-voguish.vercel.app_catalog_category_jackets-womenasd-1

    Product Page

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

    develop-voguish.vercel.app_catalog_product_stellar-solar-jacketasd-1

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

    develop-voguish.vercel.app_catalog_product_stellar-solar-jacketasd-2

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

    develop-voguish.vercel.app_catalog_product_stellar-solar-jacketasd-3

    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.

    page performance for Magento 2 Marketplace Theme

    Search option:

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

    develop-voguish.vercel.app_catalog_product_stellar-solar-jacketasd-4

    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.

    develop-voguish.vercel.app_catalog_product_stellar-solar-jacketasd-5

    Checkout page

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

    develop-voguish.vercel.app_checkoutasd

    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.

    Magento 2 Marketplace Theme login page

    Enter the given details to create a new customer account.

    Magento 2 Marketplace Theme sign up page

    Magento 2 Marketplace Headless Theme – Sell With Us

    Customize marketplace content features as per requirements.

    develop-voguish.vercel.app_marketplaceasd-1

    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.

    develop-voguish.vercel.app_marketplacesnapshots-4

    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.

    develop-voguish.vercel.app_customer_accountasd

    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.

    develop-voguish.vercel.app_wishlistasd

    Orders: View placed orders and their details as well.

    develop-voguish.vercel.app_sales_order_historyasd

    Order details are visible to the customers.

    develop-voguish.vercel.app_sales_order_000000198asd

    Profile: Edit the profile details.

    develop-voguish.vercel.app_sales_order_historyasd-1

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

    develop-voguish.vercel.app_sales_order_historyasd-2

    Apart from that, add a new address as required.

    develop-voguish.vercel.app_sales_order_historyasd-3

    Reset password: Customers can reset their password easily.

    develop-voguish.vercel.app_sales_order_000000198asd-1

    Admin Configuration

    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.

    192.168.15.132_m246p24_pub_admin_admin_system_config_edit_section_voguish_key_fa5ebc4846407833387752ec60fa0d6b2f87102324c7a5dcfe230a7c2e642914_snapshots-1

    Magento 2 Marketplace Headless Theme – Configuration

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

    Screenshot-from-2023-10-03-14-35-50

    Manage Banner

    Add and Edit the banners as shown in the below screenshots

    Screenshot-from-2023-10-03-14-35-58

    Brand Banners Configuration

    Add the Brand Banner description.

    brand banners configuration for Magento 2 Marketplace Theme

    Shop Banners configuration

    Add a title and description for the shop banners.

    shop banners configuration for Magento 2 Marketplace Theme

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

    Assign shop banners for Magento 2 Marketplace Theme

    Featured Products Configuration

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

    featured product configuration for Magento 2 Marketplace Theme

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

    Magento 2 Marketplace Theme featured products

    Corner Offers Configuration

    Enter the title and description for the corner offers configuration.

    corner offers configuration Magento 2 Marketplace Theme

    Home Page Configurator

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

    home page configurator Magento 2 Marketplace Theme

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

     store front view

    Manage Footer Links

    Admin can add and manage the footer links.

     Magento 2 Marketplace Theme footer

    Support

    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.

    Current Product Version - 4.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content