Back to Top

User Guide for CS-Cart Headless Theme

Updated 15 January 2025

CS-Cart Headless theme provides the CS-Cart store with a headless architecture and improves its overall performance and efficiency.

It is built using a Headless eCommerce approach, using Next.js (which is based on React) for the front end. Also, It links up with CS-Cart via REST APIs.

CS-Cart Headless Development allows to separate the front end and back end of the CS-Cart eCommerce platform. So, They are independent and can be changed without impacting each other.

Note: This theme is compatible with default CS-Cart and is well integrated with CS-Cart Multi Vendor as well.

Features

  • ISR, or incremental site regeneration, is utilized for product pages.
  • SSG, which stands for static site generation, is applied to CMS and other static content.
  • The theme incorporates Tailwind and PostCSS for styling.
  • The website’s performance gets enhanced.
  • WebCore vitals gets improved.
  • CS-Cart version updates require minimal maintenance.
  • Overall website performance receives a boost.
  • Next.js enhances your website’s SEO capabilities.
  • Third-party integrations are simplified through APIs.
  • The combination of these technologies provides a more efficient web experience.
  • The headless architecture uses REST API.

Installation

Prerequisites

Find the Best CS-Cart
Development Company
Find out More
  • Node >= 16.0.0
  • NPM >= 8.1.0 OR  YARN >= 1.22.0

Manual Installation

1) Unzip the respective extension zip and then move NextJs folder into directory where you want to install it.

2) Setup the env

  •  Duplicate .env.template rename duplicate to .env.
  •  Update the values mentioned in .env  file.

NO_SECRET: Set to NO_SECRET for development mode.

MODE: Set to PRODUCTION for production environment.

NEXTAUTH_SECRET: Your NextAuth.js secret for signing session tokens.

API_VERSION: The version of the API you wish to use.

NEXTAUTH_URL: The base auth URL for your NextAuth.js application.

BASE_URL: The base URL for your application.

CSCART_ENDPOINTEndpoint_URL for CS-Cart API.

CSCART_COMPANYIDCompany_ID for CS-Cart operations.

CSCLIENT_TOKENAuthorization token for CS-Cart client API.

IMAGE_DOMAINS: Allowed image domains (e.g., flagcdn.com,other_domains).

FAVICON_ICON: Path to the fallback favicon icon (e.g., /favicon/apple-icon-144x144.png).

3) Run Following Command via terminal:

npm install OR yarn install
npm run build OR yarn build
npm run start OR yarn start

4) It will be served on 3000 port to your server for eg: localhost:3000.

Using Vercel

1) Unzip the respective extension zip and then upload NextJs folder to your Github private repository.

2) Go to Vercel (create account/login).

3) Select Add New Project.

4) Select your Repository under Import Git Repository.

5) Add Project Name.

6) Then select the Environment Variables and add the ENV variables mentioned in .env.template.

For Apache

Header set Access-Control-Allow-Origin:

  • https://your-website.com/

Header set Access-Control-Allow-Headers:

  • Accept, Content-Type

For Nginx

Header set Access-Control-Allow-Origin:

  • https://your-website.com/

Header set Access-Control-Allow-Headers:

  • Accept, Content-Type

Note: To allow all origins you can just pass _ for eg: Header set Access-Control-Allow-Origin “_” OR add_header

CS-Cart Headless Theme – Admin Configuration

Admin will go to the Dashboard and then navigate to Headless dropdown menu. From here, they can access the Headless settings. It is displayed as per below image,

cs-cart headless theme settings menu

Lets check below the types of configurations available for the admin,

Headless Banner Type

Under this section, admin can set the Banners as per their requirement. Now, the full list of created Banner types will be listed on this page.

headless banner type

They get the option for various banner types such as which can be added by admin,

  • Banner
  • Carousel
  • Corner Offers
  • Recently Viewed Products

Headless Banner

In this type, admin can add banners with images and set their names as well. Here, the banners which they create under this section will be listed as below,

headless banner with image

Headless Benefits

The Headless benefits section allows the admin to create and list benefits on the storefront as per choice.

They can add images to it with Local, Server or URL and also set the status as Active or Disabled whenever required.

headless benefits

Headless Homepage

The Headless homepage section is used by admin to add various blocks on the homepage. Here, they can add Featured Products or Explore Products through it and display them over the storefront.

headless homepage

Headless Notifications

The admin can set notifications based on Product, Category and Other types from the headless notification section. Also, its configuration is displayed as below,

headless notifications

Headless Footers

Footer of the storefront is editable for the admin. Here, they can add various footers. Also, they can set the Title, Position and Choose Page or Category.

T

Headless AR

Products can be displayed in Augmented Reality on the storefront using the CS-Cart Headless theme. Here, Admin can add products and add their respective files in .glb and .usdz format.

add Augmented reality product

Clear Cache

The Clear Cache button allows the admin to clear the cache in this headless theme.

headless clear cache

Now, let’s take a look at the Headless theme storefront below,

Seller End Workflow

CS-Cart Headless theme is compatible with CS-Cart Multi Vendor. Therefore, sellers can also register on the platform and start selling.

To register as a Seller, a user will navigate to Home>All Sellers and then tap on Become a Seller button. So, It is displayed as per the image below,

become a seller

Once the user taps on the Become a Seller button, then, a registration page pops up in which they have to enter the following details,

  • Company: Enter the company name
  • Email: Enter the Email Address
vendor registration popup

Fill the details and then tap on Submit button to register as a seller.

Storefront

An effectively structured home page with a navigation menu, categorized sections, featured products, a dedicated area for special offers, and a banner featuring a call-to-action button.

headless theme storefront

Search Option

Visitors can swiftly and effortlessly locate products by utilizing the search feature located on the right side of the menu.

search option

Category Page

Showcase a chosen range of products in a specific category. Use layered navigation to help visitors easily find and filter the items they are interested in.

category page

Catalog Listing

Customers can sort products by utilizing the different filter options located in the top right corner. They can arrange the products based on any of the choices displayed in the screenshots below.

catalog listing

Product Page

Make your product pages stand out by including engaging descriptions, showcasing related items, and allowing customer reviews.

product page

Also, Customers can check the Related Products as well from the below section,

related products

Cart Page

A shopping cart icon located at the top right corner of the website. It lets customers view and check their cart whenever they want.

Additionally, it includes a Checkout button that redirects the customers to the checkout page.

shopping cart

Checkout Page

Users can easily access a streamlined and effective checkout page. Further, it includes options for shipping address, shipping method, billing address, payment, and order review.

checkout page

Login Page

Now, from this page Customers can Login through their Email and Password from the Login Page.

login page

Support

So, that is all for the CS-Cart Headless Theme. Also, If you require any further assistance, Please don’t hesitate to reach out to us through [email protected] or raise a ticket.

Current Product Version - 1.0.0

Supported Framework Version - CS-Cart 4.18

. . .

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