HCL Commerce Version 9.1.16.0 or later

Product listing page

Buy Online, Pick Up In-Store (BOPIS) is a convenient shopping option that allows customers to check product availability at nearby stores. The product listing page displays each product's stock availability at the selected and all the nearby stores.

Procedure

  1. Select the product category from the Next.js store. All the products in the selected category are listed on the landing page.
  2. You see the Add to Cart button for one of the following scenarios:
    • Single defining attribute
    • Single SKU
    • Category level SKU
    • Product type is Kit (Package)
    Note: When you login to the B2B store, instead of Add to Cart you see Add to Order button.
  3. Clicking on the Add to Cart button from the product listing page adds the product to cart for delivery by default.
  4. If more than one product defining attribute is available, you see the Choose Options button. After clicking the Choose Options button, you are directed to the product display page. From the product display page you can select different attributes for different items and then add them to the cart to proceed further with the Pickup or Delivery options.
  5. In case you have already selected the store, it is displayed with the number of units available for Pickup and Delivery.
  6. If the store is not selected, from the Pickup option, you can click the Select a store button to select a store from the list of stores where the selected product is available.
  7. A Pickup drawer is shown on the right side of the screen.
    • If you have not selected a store, click the Find Nearest Store button. All the nearby stores are listed with the distance and inventory count details.
      • If there are no stores available nearby, No Results Found Near You message is displayed on the screen.
    • To search for the store, enter the name of the city, state, or ZIP code in the Search Store text box. Select the store from the search results. The newly selected store becomes the default store.
      • Clear Search Results will clear all the listed stores from the Pickup drawer.
    • You can enable the toggle button in front of the Show in-stock locations. The page lists all the stores where the product is in-stock.
    • Show Info dropdown displays the details of the stores such as Address, Phone Number, and Working Store Hours.
    • Click Set As My Store button, the selected store is displayed at the top on Pickup drawer (highlighted as grey color) with the Current Selected Store label.
  8. You can see the pickup and delivery details for each product variable on the product listing page.
  9. After adding products to the cart, click Checkout. You can Sign In and Check out, or Check Out as a Guest.
  10. Click the product image to view the product display page.
  11. If the guest shopping option is disabled from the Management Center, instead of add to cart, it shows Please Sign-in to Shop option. See Enabling guest shopping for the Next.js store to enable the guest user to shop.

What to do next

You can click the product image on the product listing page and it directs you to the product display page. See Product display page for more information.