Product Details Templates


Product Details Templates allows designing the product details page in a very flexible, yet easy way by dragging and dropping various elements to the design panel. Users will be able to see the templates designed in the catalog when they click on products 'View Details' link. Templates may contain information about products, product attributes, Facebook widgets etc.

How to set up

Product Details Templates administration can be accessed by selecting the Product Details Templates link under the UI Design section of the Setup. From there user can add, delete, edit or copy templates.


Figure A - Product Details Templates

Adding new template is possible by clicking the Add New button. A new product details template can be defined in two steps. In the first step, the user should name the new template. In the second step user can define the template by dragging variable elements onto the panel. On the right-hand side of the screen there are 4 groups of elements:

  • Attributes in the entire system
  • Properties of the product
  • Static HTML elements
  • Widgets

Product weight is added as a new product property. Admin is able to set label, rank and styles as for all other product properties. Label of this property will depend of the value of application parameter, Unit of Measurement: under Application parameter>General. Value of product property will be one of following: Product Weight in GRAMS, Product Weight in KGS, Product Weight in LBS.


Figure B - Add new Template

If user wants to edit element that is found in the panel, he can enter details for that element by clicking the icon

On the first tab Details, user can define properties specific to elements ( for example - element DIV has only one detail, rank, which defines the order within the parent element). On the second tab Styles the user can define the style for that element.

In the catalog, only attributes that exist in a product will be displayed for the user, while attributes that don't belong to that product will be ignored. All other elements will be shown to the client. Static elements are listed in the table below.

DivUse it as a container for other static and non static elements
Literal Use it when you want to display any HTML
ListContainer for elements which will be displayed as unordered list
Tab containerUse it when you want to separate data in more tabs
TabUse it to display data into a tab panel. Use it together with tab container

Display type allows selecting the way the attribute will be displayed.


Figure C - Attribute Display Type

After user has finished designing the template, he needs to associate at least one product or category with this template in order to display it in the catalogue. See Products to Product Details Templates Mappings for more information

You are here: SAP Sales Cloud CPQ Online HelpAdmin Page HelpUI DesignProduct Details Templates