Web Pages

Product List Pages

Choosing the best way to display products in the webstore is a really important step, since the way you display your products can attract attention of the customers and make them interested in what you are selling.

Sana Commerce provides a product list page template that is used to display your webstore catalog in a number of ways - choose a list view or grid view, configure filtering of products, for example by color, size or brand, show or hide product images thumbnails, allow customers buy multiple items just from one page by enabling order list mode, sort products, for example by title or price.

Create a product list page

To create a product list page in Sana Admin click: Web pages > Product list pages.

Here you can create product list pages, edit or delete, translate into any available language, copy to another webstore in case of a multi-store solution, view a product list page in a webstore and set a product list page as a home page.

When a page is filled in with content you can preview it to see how it will look in the webstore before saving it.

In Sana Admin you can search for a product list page by title and URL. You can also sort the product list pages by title and URL.

The tables below provide the description of the product list page fields.

Basics

Field	Description
Title	Enter the title of the product list page.
URL	Enter the product list page URL. You should specify the part of the product list page URL which will be used after your webstore address. Examples: nowonsale nowonsale/winter_collection URL is a required field only for the product list page in the default language (English). For the product list pages in other languages the URL field is optional. If you do not specify it, the URL of the default language (English) will be used.
Page title	Enter the title of the product list page. If Page title is specified, it will override the one specified in the Title field and will be shown at the top of the product list page in the webstore. In the webstore navigation the product list page title that is specified in the Title field is always used.
Description	Add product list description. Use HTML editor to format the text and apply styles, insert links and add images. On the product list page the content from the Description field is shown under the page title.
Product set	Add an existing product set to the product list page or create a new one. To add an existing product set you can search it by title. If you create a new product set it will be automatically linked to the product list page. In the webstore on the product list page, products are presented in the list view and grid view.

Advanced

Field	Description
Meta title	Add meta title and meta description to the product list page. Meta title is shown in the Web browser on a tab of the opened page. If the Meta title field is empty, the title of the opened page and the name of the webstore set in the Sana Admin settings will be shown on the tab of the Web browser. If you enter a meta title, you can also use the [SHOPNAME] replacement tag. This tag will be automatically replaced with the webstore name set in the Sana Admin settings. Meta description describes your page to search engines. It should provide concise explanation of the web page contents. Meta description is used on search engine result pages to display short description for a given page. Meta title and meta description are important factors for a successful search engine optimization of your webstore.
Meta description
Thumbnails	Use Thumbnails to show/hide product image thumbnails on the product list page. You can either inherit the default setting which is used for all product list pages or redefine it for any product list page.
Faceted filters	Use either default faceted filters configured in the search settings or configure the page specific filters to be shown on the product list page. Using the page specific faceted filters you can set up filtering for each product list page individually. If you set up page specific faceted filters use the Followed by robots setting to allow or forbid search engine crawlers to follow the facet items on the product list page.
Header	In the Header and Footer fields you can add some extra content that will be shown in the header of the product list page and in the footer. Use content elements to add the necessary content.
Footer
Page layout	Use Page layout to redefine the product list page layout set on the customer level. Under the Design menu item you can define page layouts per customer group that will be used for all product list pages. But you can also redefine page layout per individual product list page. For more information about page layouts that can be set on the customer level, see 'Design'.
Background color	Using this field you can change the background color of the product list page area under the main menu, where you can see the title of the product list page and breadcrumb. You can either inherit the default setting which is used for all product list pages or redefine it for any product list page.
Background image	Using this field you can add the background image to the product list page area under the main menu, where you can see the title of the product list page and breadcrumb. You can either inherit the default setting which is used for all product list pages or redefine it for any product list page.
List & Grid view mode switch	Products on the product list page can be presented in two modes: list or grid. Using these options you can give a choice to a customer which mode to use or you can disable it and select the mode which should be used by default. You can either inherit the default settings which are used for all product list pages or redefine it for any product list page.
View mode selected by default
Default sort by	A customer can sort the products on the product list pages. Data which should be used for sorting can be configured in the search settings in Sana Admin. Using this option you can select which data should be used for sorting by default, for example product titles, prices or item numbers. You can either inherit the default setting which is used for all product list pages or redefine it for any product list page.
Default paging type	Using this option you can select the type of paging which should be on the product list page. On a page a customer can see 10 products. To load more products a customer can use paging. Paging can be presented as links with the page numbers, a button to show next 10 products, or products can be automatically loaded when a customer scrolls down. You can either inherit the default setting which is used for all product list pages or redefine it for any product list page.

 

Page layouts

Sana provides two page layouts for product list pages - B2B and B2C. Each product list page layout has a predefined set of features.

To set up page layouts for the product list pages per customer type, in Sana Admin click: Setup > Design > Page layouts

For more information, see "Design".

B2B customers usually order a lot of products at once. Therefore, when you select the product list page layout "List B2B", customers can add several products to the shopping cart at once from a single page. To add several products to the shopping cart from a single product list page, customers need to specify quantity for all products they want to buy and click "Add to cart". The "Add to cart" button is located at the top and at the bottom of the product list.

To simplify the process of adding products to the shopping cart from the product list page and make it more convenient for your customers, you can make the "Add to cart" button float, when a customer scrolls the page.

In Sana Admin click: Setup > Web pages > Product list pages. Enable the option Floating "Add to cart" button for B2B page layout.

 

The floating "Add to cart" button works only for the B2B page layout and shows up on the product list page only when a customer selects at least one product or product variant and scrolls down the page. It has different presentation for the desktop and mobile layouts.

Below see how the "Add to cart" button is presented in the Sana web store in different layouts (desktop and mobile) in case the Floating "Add to cart" button for B2B page layout option is enabled and disabled.

"Add to cart" button with fixed position

Floating "Add to cart" button (Desktop layout)

Floating "Add to cart" button (Mobile layout)

Translate a product list page

Under the Product list pages menu item you can select a language and translate any product list page to the selected language, if your webstore is multi-lingual. Two columns Title will be shown, when the language is selected. The first column stores the product list pages in the default language (English), while the second column holds the translated product list pages into the selected language. If in the second column you see a greyed out link Translate, this means that there is no translation for the related product list page.

You can also translate any existing product list page from its content management page. Locate the product list page you want to translate and click Edit. On the product list page select a language into which you want to translate its content.

When you translate the product list page content it is presented in two columns. The first column holds the product list page content in the default language (English) and it is not editable, while in the second column you can provide translation to the product list title, URL, page title, description, meta title and meta description, header and footer.