Guide for PrestaShop Headless NextJS Theme

PrestaShop Headless NextJS Theme is a comprehensive solution that offers faster loading, increased security, and improved performance.

The headless solution decouples frontend and backend of PrestaShop. So, it is easy to make changes to the frontend without impacting the backend or vice versa.

The theme is built using NextJS framework for the frontend and is integrated with PrestaShop via REST APIs.

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

For this theme to work with the Multi Vendor Marketplace, you need to install PrestaShop Advanced Multi-Vendor Marketplace.

• Allows you to create multiple frontends for different devices using the same backend.
• Uses RESt APIs to establish a seamless connection between the PrestaShop backend and the front end..
• Customize the front end of ecommerce websites without making changes in the backend.
• Easily integrates with third party applications via APIs.
• 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.
• Improves the performance of the website.
• Offer a personalized shopping experience to customers.

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

To create a unique PrestaShop marketplace ReactJS Theme, we employed REST API development to establish a seamless connection between the PrestaShop 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:

  PRESTASHOP_ENDPOINT=https://prestashop-url.com/
  NEXTAUTH_URL=http://localhost:3000/
  NO_SECRET="TEST_VOGUISH"
  NEXTAUTH_SECRET=TEST_VOGUISH
  MODE=PRODUCTION
  DEFAULT_STORE_CODE=default
  IMAGE_DOMAINS= prestashop-url.com (domain from where images will be load eg: prestashop-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 PrestaShop 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 PrestaShop 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 PrestaShop 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.

General Settings

Products per page: Set the number of products that will be fetched when a user scrolls down in the app.

Footer Copyright: Specify the custom text that will show in the footer position on store.

Logo alt msg: Set the text that will display on the front end if a logo does not get loaded.

Show CMS breadcrumbs: This option lets admin display CMS breadcrumbs on the storefront.

Show new product as feature: If enabled, then newly created product will display under Featured Products on the store.

Social Links

Under this tab, the admin needs to specify the URLs of social media sites that he wants to display on the front end.

Front End View

Feature Product Carousel

Under this tab, the admin can set title and description to be displayed for feature product carousel.

Front End View

Corner Offer Settings

Under Corner Offer, the admin can set the title and description that will display in corner offer section.

Explore Products Configuration

Under Explore products configuration, the admin can:

• Set the title and description to be displayed under Explore Products section.
• Enable the display of top selling, hot deal, and top rated products in Explore Products section.

Front End View

Recent Products

Under Recent Products, the admin can set the title and description that will display in recent products section.

Under Banners, the admin can add the banners he wants to showcase on the storefront.

Click on ‘Add new banner’ button to add a new banner.

Front End View

When a customer visits the store, he can view banners on the home page as shown in the below screenshot.

Basic info

Under Basic info, the admin can set title and description that will show under brand banner section.

Banner list

Under this tab, the admin can view a list of banners assigned to brand banner.

Front End View

Basic info

Set the title and description to be displayed under shop banner section.

Banner list

Under this tab, all the banners that are assigned to shop banner section are listed.

Front End View

These settings allow admin to modify home page as per requirement. Under Home Page Configuration, the admin can select the sections he wants to display on the website home page.

Front End View

Under Corner Offer, the admin can add and manage offer items that will display in Corner Offer section.

Click on ‘Add offer item’ button to add new offer item.

Front End View

Under Product blocks tab, the admin can add product blocks that he wants to display on front end.

Click on ‘Add new block’ button to add a product block.

Click on ‘Add new product’ button to add products in a block.

Front End View

Under this tab, the admin can add benefits that he wants to show under the benefits section on the website.

Click on the ‘Add’ button to add a benefit.

Front End View

Under Footer Link tab, the admin can add the links he wants to display in the footer position of the website.

Click on ‘Add footer link’ button to add a footer link.

Add parent menu

Add sub menu

Under Mega Menu, the admin can add categories that he wants to display on the website.

Click on ‘Add new category’ button for adding a new category.

This was all about PrestaShop Headless NextJS Theme module. I hope this document will help you in checking the functionality of the module in a better way.

Also, do let us know about your views in the comments.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

Also, please explore our Prestashop development services and vast range of quality Prestashop addons.