Product List Overview

The Product list overview content element is used to show the list of products which 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, 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.

Product List Overview: 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

Product List Overview: Advanced Tab

On the Advanced tab of the Product list overview content element, you can configure height, width and spacing settings.

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 which 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 on the product list page. 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 on the product list page.

Product Line Stock Indicator

The Product line stock indicator content element is used to add stock to the product list overview on the product list page.

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 add product specifications to the product list overview on the product list page.

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 Price and Product Line Discounts

The Product line price and Product line discounts content elements are used to add product price and discounts to the product list overview on the product list page.

To set up prices and discounts presentation in your webstore, in Sana Admin click: Setup > Products > Price.

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 on the product list page 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 you need to:

1. Enable the options Units of measure and Unit of measure selection in Sana Admin: Setup > Products > Units of measure, and correctly configure the units of measure for a product in the ERP system.

2. Enable the Price per base unit of measure setting in Sana Admin: Setup > Products > Price.

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 page.

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

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 of the Product line order box content element, you can define the position of the units of measure or hide units of measure on the product list page using the Position of unit measure setting. The following options are available:

• Top

• Right

• Bottom

• Left

• Do not show

Product Line Product Comparison

The Product line product comparison content element is used to add the Compare product checkbox to the product list overview on the product list page and in this way allow a customer to add a product to the product comparison. When a customer selects 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 Thumbnail

The Product line thumbnail content element is used to add product thumbnails to the product list overview on the product list page.

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 following options are available:

• Small

• Medium

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 on the product list page.

When the customer clicks on this button, the Add to list pop-up window opens where the customer 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 following options are available:

• Show icon only

• Show text only

• Show text right of icon

• Show text left of icon

• Show text below icon

• Show text over 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 on the product list page. 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. The quantity settings configured in the ERP system for a product are used and validated on the product pages, product list pages and in the shopping cart in your Sana webstore.

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 add a text to the product list overview on the product list page 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 page in the Sana webstore, 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.

Also, in Sana Admin under: Setup > Products > Units of measure, a webshop administrator can define quantity rounding for products per unit of measure.

If product quantities are not set in your ERP system, quantity rounding from Sana Admin will be used. The Product line min, max & quantity step information content element also works for quantity rounding.

Product Line UOM & Tax Indicator

The Product line UOM & tax indicator content element is used to add two separate texts to the product list overview on the product list page. One text informs a customer 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 add the rating of a product and the number of approved reviews to the product list overview on the product list page.

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.

In the webstore customers can see the average rating of a product and the approved reviews on the product pages and product list pages.

To see ratings and reviews, they should be enabled in Sana Admin. To enable ratings & reviews, in Sana Admin click: Setup > Marketing.

Product Line Content Elements: Advanced Settings

On the Advanced tab of each Product line 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.

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 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.