Products in the shop
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, Product list view in SellStack Shop image) and grid view (Products grid view in SellStack Shop image). Users can switch between these views using the controls in the shop page header (see Products grid view in SellStack Shop image).
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 Product list view in SellStack Shop image).
Product list view in SellStack Shop
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 per 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 as well.
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 Product detail page (version 2) in SellStack Shop image and compare it to Product detail page (version 1) in SellStack Shop image. 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. We have removed this version in the new application version. Out-of-stock products are no longer visible in the shop.
Product detail page (version 2) in SellStack Shop
Product detail page (version 3) in SellStack Shop
In the new application version we have introduced price range display for products whose lot numbers have custom prices. In case any of product's lot numbers has a custom price different from the product's base price, then a price range is displayed on all places the product is displayed in the Shop. The price range displays minimum and maximum prices considering base product price and all custom lot prices.
Product price range display in SellStack Shop
Last updated