In this section, we will demonstrate different configurations of product display on the shop page and the product detail page. The shop page offers two display options: list view (default, picture 43) and grid view (picture 44). Users can switch between these views using the controls in the shop page header (see picture 44).
In grid view, products are displayed side by side in a four-column layout, while in list view, each product is shown in a separate row. A notable difference between the two views is that products in grid view do not include adjacent “View” or “Add to Cart” buttons.
One main advantage of the list view is that products can be added directly to the cart from the shop page (a feature known as quick add), provided the product’s configuration allows it. Users can also specify the desired product quantity before adding it to the cart. Additionally, the product’s short description is displayed beneath its name in the list view, providing more information about the product.
The list view depends on the product configuration, as explained earlier, meaning a product can appear in one of two possible versions (see picture 43).
Picture 43. Product list view in SellStack Shop
Picture 44. Products grid view in SellStack Shop
We’ll now give an overview of the product detail page in SellStack. The left side of the screen holds product images. There can be one or more images that can be traversed with arrows or by clicking on the image thumbnails on the left. The right side of the screen displays the taxon breadcrumb, the product’s name, price, and short description. Other product details include information about categories, base and sale unit of measures, lot size, and item sales quantity in base UOM. These data are loaded from Dynamics 365. In the area between, there can be an “Add to cart” button with a quantity input field, lot attribute filters, or a message box, depending on the product’s state and configuration. The product’s (long) description is displayed under the product, followed by the lot numbers table (if configured so).
Based on this overview, we distinguish 3 different versions of the product detail page, as shown in the pictures below. Version 1 shows a default product’s page view with the addition of a lot numbers table - lots are set to be visible in Admin. There is an “Add to cart” button, meaning that the purchase is possible only at the product level. Lots are determined using the FIFO/FEFO/FAFO method. It is possible to have a Lot attribute filters in this view, like in picture 42, but the filters were not activated when taking this picture.
Picture 45. Product detail page (version 1) in SellStack Shop
Version 2 shows the same product but with a different lot allocation method - user-selected. When this method is selected, purchases are made on the lot level instead of on the product level. This gives customers bigger control over the items added to their cart. Check this version on picture 46, and compare it to picture 45.
Version 3 shows a different product with out-of-stock inventory. This product is still visible in the shop, but it cannot be added to the cart. Lot numbers are also not displayed since no lot number has any available inventory.
Picture 46. Product detail page (version 2) in SellStack Shop
Picture 47. Product detail page (version 3) in SellStack Shop
