Product List Overview

The Product list overview content element is used to show the list of products that belong to a product set on the product list and search results pages in the Sana webstore. Products on the product list and search results pages can be presented in two modes: list or grid. Using the Sort by field, a customer can sort the products on the product list and search results pages. Data which should be used for sorting can be configured in the search settings in Sana Admin.

In the product list overview, a customer can see core product details, for example, product name and its number, stock, product price, unit of measure, and product specifications. Also, a customer can specify the product quantity, compare products, and add products to the shopping cart.

Also, using the tools available on the Product list overview content element, you can completely modify the look and feel of your product list overview. Using the Product line feature on the Product list overview content element, you can define how the product data should be shown in the list and grid modes in the webstore. You can add any available content element to the product lines to make each product line more informative or make the product list overview look more impressive.

Content Tab

The table below provides the description of the settings in the general area of the Product list overview content element on the Content tab.

Field	Description
Sort drop-down and view mode selector alignment	Configure where to place the Sort by field and List & Grid view mode switch on the product list and search results pages. The available options are: Left Center Right Justify
Paging alignment	Specify where the paging will be shown on the product list page. The available options: Left Center Right

Advanced Tab

On the Advanced tab of each Product list overview content element, you can configure height, width, and spacing settings. These settings are the same for all content elements.

For more information about advanced settings, see Content Elements.

Product Line

In the Product line area of the Product list overview content element, you can modify the product lines the way you need.

The product lines can be styled differently for the List view and Grid view. In the Product line area, you can add and remove various content elements as well as use the content management system of Sana with the page layouts, row and column settings to create high quality and impressive design for the product lines.

Product line holds several standard content elements that can be placed anywhere in the product list overview. The standard content elements are present in the Product list overview content element by default. You can add, move, edit and remove any standard content elements in the Product line area and you can also add any other available content elements to style the product lines.

Using the Revert to default button, you can revert any changes you have made to the product lines and start from scratch.

If you want to re-use the modified product line template later, you can save it as preset. To do this, click edit row and select Save row as preset. It is also possible to select several rows and save them as preset. To use presets open the necessary page and click content presets. You can choose one of the presets already available by default or you can choose the custom presets which you saved before.

Product Line Content Elements

Here is the list of content elements which are used for the product lines and are available in the template by default:

• Product line title

• Product line item number

• Product line stock indicator

• Product line price

• Product line price per base UOM

• Product line price extra fields

• Product line discounts

• Product line order box

• Product line specifications

• Product line product comparison

• Product line thumbnail

There are some content elements that are used only for the product lines, but they are not available in the template by default. You can add them if you need to. These content elements are:

• Product line add to list

• Product line bill of materials (BOM) link

• Product line min, max & quantity step information

• Product line UOM & tax indicator

• Product line UOM base quantity

• Product line product ratings & reviews score

Besides the above-mentioned content elements, you can also use any other content elements available in Sana to enrich the product lines. For example, you can add text, paragraph, images, button, etc.

Product Line Title

The Product line title content element is used to show the name of a product in the product list overview. The product name is retrieved from your ERP system.

Product Line Item Number

The Product line item number content element is used to show the ID of a product in the product list overview.

Product Line Stock Indicator

The Product line stock indicator content element is used to show stock in the product list overview.

In Sana Admin you can change stock presentation to whatever you want. Moreover, you can show and hide stock in your webstore. Whether a product is in stock, out of stock or it has a low stock is determined by stock levels in Sana Admin.

Product Line Specifications

The Product line specifications content element is used to show product specifications in the product list overview.

Product specifications are characteristics which can add more information to a product and help further refine your catalog. Any product field from your ERP system can be used for product specifications.

Product specifications are shown in the webstore only if they are configured in the ERP system and are made visible in Sana Admin.

On the Content tab of the Product line specifications content element, you can show and hide product specification names using the Show specification names option. If this option is disabled, only the product specification values will be shown in the product list overview.

Product Line Thumbnail

The Product line thumbnail content element is used to show product thumbnails in the product list overview.

On the Content tab of the Product line thumbnail content element, you can set the size of a product thumbnail using the Image size setting. The available options are:

• Small

• Medium

Product Line Product Comparison

The Product line product comparison content element is used to show the Compare product checkbox in the product list overview.

This way customers can add a product to the product comparison. When customers select products for comparison using the Compare product checkbox on the product list page, a small window will appear in the left bottom corner of the webstore. Customers can see there the list of products they selected for comparison.

Product Line Price and Product Line Discounts

The Product line price and Product line discounts content elements are used to show product price and discounts in the product list overview.

Product Line UOM Base Quantity and Product Line Price per Base UOM

The Product line UOM base quantity and Product line price per base UOM content elements are used to show the quantity and price per base unit of measure in the product list overview in addition to showing the item price for other units of measure. The Product line UOM base quantity and Product line price per base UOM content elements can be also useful if you sell products in bulk.

The Product line UOM base quantity and Product line price per base UOM are mostly the informative content elements. For example, you can show to a customer that 10 pieces of some product in one box are sold at a certain price. You can set a reduced price for a box with 10 pieces. In this way, buying a box will be cheaper, than buying each piece separately. This information can help a customer make a better purchasing decision.

To use the Product line UOM base quantity and Product line price per base UOM content elements on the product list page in the Sana webstore, follow the steps listed below.

Step 1: In Sana Admin click: Setup > Products > Units of measure. Enable the Units of measure option.

Step 2: In Sana Admin: Setup > Products > Price. Enable the Price per base unit of measure option.

Step 3: In your ERP system configure the units of measure for a product.

For more information, see Price Settings.

Product Line Price Extra Fields

The Product line price extra fields content element is used to show the additional product price, discount, tax, service charge, etc. in the product list overview. The additional information about the product, like extra price, discount, tax, etc. can be retrieved from your ERP system and shown in the product list overview in the following format: text + value. For example, Sugar tax: € 2,95.

Up to three lines of additional product information can be added using the Product line price extra fields content element. For example:

Discount 1: 5%
Discount 2: 10%
Tax: € 3,25

Product Line Order Box

The Product line order box content element is used on the Product list page in several scenarios.

1. You can add the Add to cart button to the product list overview.

2. You can add the Select variants button to the product list overview.

3. You can add the product quantity selector and unit of measure, or if a product has multiple units of measure, then you can add the product quantity selector and the units of measure selector.

On the Content tab, using the Position of unit measure setting, you can define the position of the units of measure or hide units of measure on the product list page. The available options are:

• Top

• Right

• Bottom

• Left

• Do not show

Using the Product with variants view mode setting, you can specify how the product variants will be displayed in a pop-up.

• Variant matrix: If there are 2 product variant components, for example, color and size, they will be displayed in matrix. If there are more than 2 product variant components, clicking on the Select variants button, customers will be redirected to the product details page where they can select the desired product variant.
  
  The matrix layout is not the ideal way to display product variants, especially if you have a large number of them. It may not be the most efficient in terms of design and performance, as it requests prices and stock information for all variants at once. If your product includes many variants, it's better to use a Variant dropdowns presentation.

• Variant dropdowns: Product variants are displayed using dropdowns in a pop-up. The number of product variant components is not limited.
  
  When you select the Variant dropdowns option, only the selected product variant’s price and stock are displayed - rather than showing information for all product variants at once. This approach is an effective way to present product variants, particularly beneficial for merchants with a large number of variants. It positively impacts performance and helps reduce potential slowdowns.

Product Line Add to List

The Product line add to list content element is used to add the Add to list button to the product list overview.

When customers click on this button, the Add to list pop-up window opens where customers can add a product to one or multiple lists.

On the Content tab of the Product line add to list content element, you can choose the necessary layout for the Add to list button.

The available options are:

• Show icon only

• Show text only

• Show text right of icon

• Show text left of icon

• Show text below icon

• Show text above icon

Product Line Bill of Materials (BOM) Link

In your ERP system you can create such type of a product which is called a bill of materials (BOM). It refers to the complex component structure, basically this is a list of materials or components which is used to build the final product and from which this product consists of.

The Product line bill of materials (BOM) link content element is used to show a link that opens an overlay with the bill of material components.

In the Sana webstore a customer will see a link View package contents in the product list overview. Clicking on this link opens the list of BOM components.

Product Line Min, Max & Quantity Step Information

In the ERP system, you can define the default quantity of a product, minimum and maximum, and the quantity step. Your customers will not be able to buy less or more than it is set for a product in your ERP system. When customers try to buy less or more units of the product, they will see a validation message.

The Product line min, max & quantity step information content element is used to show a text in the product list overview which explains to customers what product quantity they can purchase.

The Product line min, max & quantity step information content element is shown on the product list overview, only if quantity settings are configured for a product in the ERP system. Take into account that quantity settings can differ depending on the ERP system you use.

The Product line min, max & quantity step information content element also works for quantity rounding. In Sana Admin a webshop administrator can define quantity rounding for products per unit of measure. For more information, see Units of Measure.

Product Line UOM & Tax Indicator

The Product line UOM & tax indicator content element is used to show two separate texts in the product list overview. One text informs customers for which unit of measure the price is calculated, and another text shows whether tax is included in the price or excluded. These texts are usually shown near the product price.

Product Line Product Ratings & Reviews Score

The Product line product ratings & reviews score content element is used to show the rating of a product and the number of approved reviews in the product list overview.

To see ratings and reviews, they should be enabled in Sana Admin. Ratings & reviews allow customers to easily submit reviews of the products in the webstore. Product reviews are comments submitted by customers or webstore visitors directly on the product pages.

Change the Product Line Default Texts

You can easily change the standard product line texts available in the product list overview in the English language or any other installed webstore language. You can do this either in the Page elements & messages or using In-site editor.

Translate the Product Line Content

Sana Commerce Cloud is a multi-lingual e-commerce solution. By default, a Sana webstore is available in English, but we also deliver the language packs which can be installed with a single button click from Sana Apps.

The Sana language packs contain the default webstore interface texts, error and validation messages and system e-mails in the language of your choice. The language packs also allow you to translate your webstore content to different languages.

To translate the product line content, open the Product list system page or, if you want to create translation for a specific page, open the necessary product list page and select the language you need in the header. Then, open the Product list overview content element. You can translate any product line content to the selected language.