User GuideWeb Pages

Web Pages

Sana Commerce 9.0
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 title and meta description should include keywords relevant to the content of a page. They are read by the search engines but are not shown on the page. Meta title and meta description are important factors for a successful search engine optimization of your webstore.

Meta description
Thumbnails Enable Thumbnails to show the product images thumbnails on the product list page or disable to hide product images thumbnails.
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)

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

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