Home
Documentation
HCL Commerce is a high-availability, highly scalable and customizable e-commerce platform. Able to support hundreds of thousands of transactions per day, HCL Commerce allows you to do business with consumers (B2C) or directly with businesses (B2B). HCL Commerce uses cloud friendly technology to make deployment and operation both easy and efficient. It provides easy-to-use tools for business users to centrally manage a cross-channel strategy. Business users can create and manage precision marketing campaigns, promotions, catalog, and merchandising across all sales channels. Business users can also use AI enabled content management capabilities.
Samples
Topics in the Samples category highlight the various samples that are provided with HCL Commerce.
Store samples
HCL Commerce includes sample storefront designs that illustrate the use of the remote store model.
Next.js starter store
The Next.js store offers customizable features for storefronts using the Next.js framework. It uses the headless store data template and supports business-to-consumer (B2C) and business-to-business (B2B) use cases. The store includes pages for browsing, shopping, checkout, and account management, and uses Elasticsearch for search functions.
B2C Next.js starter store
The Ruby store (B2C) is built on the Next.js framework, ensuring seamless browsing, easy navigation, and secure transactions. Notably, this new storefront provides server-side rendered pages to assist with Search Engine Optimization (SEO) and page previews.
Progressive Web Application (PWA)
The Ruby now has Progressive Web Application (PWA) support enabled.
Custom store implementation for PWA
You can build a custom store for Progressive Web Application (PWA) with the required configuration.

Documentation
HCL Commerce is a high-availability, highly scalable and customizable e-commerce platform. Able to support hundreds of thousands of transactions per day, HCL Commerce allows you to do business with consumers (B2C) or directly with businesses (B2B). HCL Commerce uses cloud friendly technology to make deployment and operation both easy and efficient. It provides easy-to-use tools for business users to centrally manage a cross-channel strategy. Business users can create and manage precision marketing campaigns, promotions, catalog, and merchandising across all sales channels. Business users can also use AI enabled content management capabilities.
- Getting started
  HCL Commerce has different advantages for business users, administrators and developers. HCL Commerce targets each of these roles with a tailored set of offerings so that each of your users can get maximum benefit.
- Installing and deploying
  Learn how to install and deploy HCL Commerce development environments and HCL Commerce production environments.
- Migrating
  Before you migrate to HCL Commerce Version 9.1, review this information to help plan and execute your migration.
- Operating
  Topics in the Operating category highlight tasks that are typically performed by business users, customer support representatives, to complete their day-to-day tasks in the operation of the HCL Commerce site.
- Integrating
  Topics in the Integrating category highlight the tasks that are commonly performed for using HCL Commerce in combination with other products.
- Administering
  Topics in the Administering category highlight tasks that are typically performed by the Site Administrator, to support daily operations of the HCL Commerce site.
- Customizing
  The topics in the Customizing section describe tasks performed by an application developer to customize HCL Commerce.
- Tutorials
  HCL Commerce provides many tutorials to help you customize and understand your HCL Commerce instance and stores.
- Samples
  Topics in the Samples category highlight the various samples that are provided with HCL Commerce.
  - Store samples
    HCL Commerce includes sample storefront designs that illustrate the use of the remote store model.
    - Aurora starter store
      The Aurora starter store showcases the latest in storefront features, and models best practices in store development, demonstrating a wide scope of retail scenarios. Simplify your responsive B2C or B2B web store implementation and reduce your time-to-market by using the Aurora starter store as your development base.
    - Extended sites starter store
      Use an extended sites starter store to get started on setting up an extended sites solution that will allow your selling organization to provide unique storefronts for different enterprise customers or showcase a number of branded storefronts.
    - Reference React stores
      The Store SDK includes a reference B2C (Emerald) store application and a reference B2B (Sapphire) store application. Use these Reference Store applications to develop and deploy your own React Store applications.
    - Next.js starter store
      The Next.js store offers customizable features for storefronts using the Next.js framework. It uses the headless store data template and supports business-to-consumer (B2C) and business-to-business (B2B) use cases. The store includes pages for browsing, shopping, checkout, and account management, and uses Elasticsearch for search functions.
      - B2C Next.js starter store
        The Ruby store (B2C) is built on the Next.js framework, ensuring seamless browsing, easy navigation, and secure transactions. Notably, this new storefront provides server-side rendered pages to assist with Search Engine Optimization (SEO) and page previews.
        Registration page (B2C) of the Next.js store
        Progressive Web Application (PWA)
        The Ruby now has Progressive Web Application (PWA) support enabled.
        Installing a PWA
        This topic explains how to install a Progressive Web Application (PWA).
        Service worker caching for PWA
        The service worker uses Serwist to implement different caching strategies based on resource types.
        Custom store implementation for PWA
        You can build a custom store for Progressive Web Application (PWA) with the required configuration.
      - Multiple Extended Site (eSite) access
        The Next.js store supports multiple eSite access with a single deployment.
      - Store Locator
        The Store Locator feature allows the shopper to easily locate a physical store of their choice by using online maps. This feature is especially designed to enable them to physically pick up the products bought online, from a store of their choice.
      - Multiple Payment
        Shoppers buying products in Next.js stores can pay a part of the total cart value by using various payment options such as cash on delivery or credit cards with the introduction of the multiple payment option.
      - Primary address
        The primary address is the default address in your Next.js store account. It is stored in your profile for easy access during checkout and order management. This address is used for billing, shipping, and communication purposes.
      - Multiple shipment
        Shoppers purchasing products via react-based stores could only place an order for a single shipping address can now choose a multiple shipment option when placing an order. This document provides information on the multiple shipment facility provided to shoppers for the Next.js stores.
      - Buy Online Pickup In Store (BOPIS)
        The BOPIS feature allows the user to pick up the products purchased online from a physical store of their choice, without any pickup charges.
      - Multiple languages
        The Next.js store applications (Ruby and Ruby B2B) support multiple languages.
      - Multiple language and currency support
        The HCL Commerce Next.js store applications (Ruby and RubyB2B) support multiple languages and currencies. Users can view content and pricing in their preferred language and currency.
      - Product compare feature
        The product compare feature allows you to compare items from the Product Listing Page (PLP) in tabular form on a dedicated screen.
      - Kit details page (B2C and B2B)
        A kit is a collection of items that are sold together as one catalog entry. The default layout for the page displays the kit name, image, price, short description, long description, descriptive attributes, and more. Users can check inventory availability for the kit and add the kit to their cart or current order.
      - Bundle details page (B2C and B2B)
        The Bundle page displays various combinations of items (bundles) in tabular form, which allows you to select attributes for products and their variants. The default layout for the page displays the bundle name, image, price, short description, long description, descriptive attributes, and more. Users can check inventory availability for the components in the bundle and add the bundle to their cart or current order.
      - Checkout
        The checkout page displays the shipping and payment details for the items in the shopping cart.
      - Quick Order for Next.js store (B2C and B2B)
        You can place orders within the Next.js store using the quick order functionality without navigating through product details and listing pages. This feature enables you to add multiple items to the shopping cart and proceed with the purchase.
      - Guest shopping
        Guest shopping allows users to browse and purchase from the Next.js store without creating an account. This feature enhances the user experience in both B2C (Business-to-Consumer) and B2B (Business-to-Business) models by offering a flexible purchasing process.
      - Volume pricing
        Volume pricing is a pricing structure in which the cost per product varies based on the quantity added to the cart, as configured in the Management Center.
      - Coupon wallet
        A coupon wallet is a storage for the coupons a shopper receives.
      - Enable the schema org metadata
        Schema org metadata is added to the Next.js store pages for better search engine optimization (SEO). Schema org is a collaborative community activity that creates, maintains, and promotes schemas for structured data on the internet, web pages, email messages, and beyond.
      - Enable the Open Graph tags
        Open Graph tags function is available to the Next.js store pages for better search engine optimization (SEO).
      - In-progress orders and saved carts
        In-progress orders allow users to save their shopping carts for later checkout. This feature enables users to add items, make modifications, and complete the purchase at their convenience without losing their selections. This functionality is available for both B2C and B2B Next.js stores. To use this feature on Next.js stores, the user must navigate to Account Settings and click In-Progress Orders.
      - Video support
        On Product Detail Pages (PDP), videos appear alongside product images, providing an interactive shopping experience. Customers can click the video icon to play the video and use the built-in video player to watch product demonstrations, unboxings, or usage examples, helping them make informed purchase decisions.
      - B2B Next.js starter store
        The Next.js store application is enabled for B2B e-commerce. The sample B2B storefront is called Ruby B2B. The B2B Next.js store features include B2B features, in addition to all of the available features in the B2C storefront, with the exception of guest-user shopping flows.
      - Privacy policies for the Next.js store
        Privacy policies describe the supplementary pages required to maintain compliance and transparency regarding data collection and usage.
  - Access control policy samples
    The following access control policy samples show you how some basic access control policies can be used in the development environment, so that you can quickly test new resources. They are not designed to be used as-is on an HCL Commerce production environment, as they do not provide adequate resource protection.
- Compliance
  The following section describes how you can leverage HCL Commerce features and functionality to help your site be compliant with different privacy and security standards.
- Securing
  These topics describe the security features of HCL Commerce and how to configure these features.
- Performance
  Topics in the Performance section describe the means by which to plan, implement, test, and re-visit the optimization of HCL Commerce site performance.
- Troubleshooting
  Topics in the Troubleshooting section highlight common issues that are encountered with HCL Commerce, and how they can be addressed or mitigated.
- Reference
  Topics in the Reference section contain all of the HCL Commerce reference documentation.

HCL Commerce Version 9.1.18.0 or later

Custom store implementation for PWA

You can build a custom store for Progressive Web Application (PWA) with the required configuration.

The following files are required for configuration:

Custom store's manifest.json
All static assets referenced in manifest.json

Sample manifest

The following is a sample Ruby manifest.json file, located in the Public/Ruby folder of the Next.js store git bundle.

{
    "id": "Ruby",
    "version": "1.0.0",
    "short_name": "Ruby",
    "name": "Ruby",
    "description": "Ruby NextJs PWA Store",
    "icons": [
        {
        "src": "/Ruby/favicon-16x16.png",
        "sizes": "16x16",
        "type": "image/png"
        },
        {
        "src": "/Ruby/favicon-32x32.png",
        "sizes": "32x32",
        "type": "image/png"
        },
        {
        "src": "/Ruby/apple-touch-icon.png",
        "sizes": "180x180",
        "type": "image/png"
        },
        {
        "src": "/Ruby/favicon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        },
        {
        "src": "/Ruby/favicon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
        },
        {
        "src": "/Ruby/favicon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
        },
        {
        "src": "/Ruby/favicon.svg",
        "type": "image/svg",
        "sizes": "any"
        }
    ],
    "screenshots": [
        {
        "src": "screenshot-desktop.png",
        "sizes": "2500x1424",
        "type": "image/png",
        "form_factor": "wide",
        "label": "Home screen of RubyB2B App"
        },
        {
        "src": "screenshot-mobile.png",
        "sizes": "782x1456",
        "type": "image/png",
        "form_factor": "narrow",
        "label": "Home screen of RubyB2B App"
        }
    ],
    "start_url": "/ruby/",
    "display": "standalone",
    "theme_color": "#ffffff",
    "background_color": "#ffffff"
}

Copy the created static files to the web server in the corresponding deployment folder.
For example: /SETUP/app/CustomStore

Browser compatibility

Support for the PWA installation prompts varies by browser and platform. For more information, see browser support.