Product Description Pages

Product description pages display information about a specific product and allow the user to add it to the cart. In the case of variant products, no variant or other options will be auto-selected unless the description page was accessed by clicking a specific variant from the results of a search query. The displayed information about the product includes the following.

  • Images: Clicking an image will full screen it. Click the thumbnail for another image to load it in main image area
  • Product Title
  • Product Code: Will change to the appropriate variant code if a variant is selected.
  • Long Description: Note that descriptions currently do not support HTML markup.
  • Price: Or, the price range for variant products when a variant not selected. The item’s designated sale price will be used if that data is available, otherwise the generic price will be displayed.
  • Availability: In stock quantity for the current location (if offline) and all other locations (if online). If a variant product has no variant option selected, then a message is shown prompting the user to select a variant before the availability can be displayed.

At the bottom of the product description page, some Suggested Items are shown. These are generated from Kibo and Certona's personalized recommendation system, as opposed to static product recommendations.

As on the Store page, the cart view can be toggled on or off. The layout of the product details changes to accommodate the cart view.

The product description page with the cart toggled on:

The product page with an empty cart on the right

The product description page with the cart toggled off:

The product page without the cart panel

When selecting variant properties, the user can click a property dropdown and a popup will appear that displays each option and their current availabilities. The availabilities shown will be based on all current property selections, and if the user changes their selections then that may cause the availability to change as well.

Pop-up prompting the user to select a base block speed from three different options

After all options are selected, the generic product information will be replaced with specific variant details such as the appropriate code and availability.

Example of the product page with product options selected and ready to add to the cart