User GuideWeb Pages

Web Pages

Sana Commerce 9.1
Your connector

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 is shown in the header of the product list page and in the footer.

The following content elements can be used:

  • Text
  • Image tiles
  • Child menu items
  • Product set
  • Full-page banner
  • Unique selling proposition (USP)

It is possible to assign customer segment to any content element. Customers' segmentation is a marketing strategy which involves dividing of a target market into subsets of customers that are similar in specific ways, for example customers from a certain country. Using customer segments you can build loyal relationships with customers by developing and offering them the products, content and services they want. By setting up a customer segment for the content element of the product list page, you can show a certain content only to the customers which are in the customer segment. All other customers will not see this content element. This way you can fill your web store with the customer-specific content.

For more information, see 'Customer Segments'.

The Text content element allows adding text and formatting it, links and images and embedding videos.

The Image tiles content element allows adding up to four image tiles. On the page the image tiles are shown in the row. For each image tile you can add an alternative text and link an internal page or external URL or you can create a new blank page that will be automatically linked to the image tile. Select the Open in new tab check box if you want the page linked to the image tile to be opened in a new tab when clicking on the image tile. You can also add a description to each image tile that is shown below the image in the webstore.

The Child menu item content element allows displaying the images which are linked to the child menu items in the menu tree. This content element is not configurable or editable, you can only add it or delete. If the Child menu item content element has been added, the images which are linked to the child menu items will be shown by three in a row on the product list page. A customer can click on the image to move to the linked page.

The Product set content element allows adding an existing product set to the product list page or creating 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. The products form the linked product set are shown by four in a row on the product list page.

The Full-page banner content element allows adding the banner image. It takes the entire width of the page. You can also add the title, sub title and button with the linked internal page or external URL that will be shown on the banner image.

The USP content element allows adding up to four image icons with text. It is usually used for advertising and marketing purposes to explain in just a few words what makes your webstore unique. On the page the icons with the text are shown in the row.

The number of content elements that can be added to the product list page is not limited. You can also change the order of the content elements by dragging and dropping them. The content elements are shown on a page in the order they are arranged.

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.

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.

User GuideWeb Pages