Creating a PDP Template

You need to select a template to view the SKU as a PDP. Hence, it is important to first create a template. You can either start with a blank template and add elements needed to customize the PDP or you can choose from an existing set of predefined structures available for various Hierarchy in PCC. For example, the Catalog being built contains products belonging to the ‘Machinery’ industry. Since, PCC has some sample structures available for this industry, you can choose the preexisting structure and customize it as needed as this will save a lot of effort involved in designing a structure from scratch. However, you can choose to use a blank template if the preexisting structures are not relevant or meet the criteria needed for the PDP to be designed.

Once a template is created, you can view, edit, create a copy of an existing template as well as delete the template from the PDP Template page.

Let us understand how to create a new PDP template using a blank template as well as using the pre-existing structures.

To create a new PDP template:

1. Click the menu icon on the upper-left corner and the following menu is displayed.

2. Click Catalog > PDP Templates as shown below.

The following screen appears.

3. Click Create New PDP Template. The following screen appears.

A list of predefined structures as well as a blank template is available for selection. There are 5 steps to create a new PDP template.

Case 1: Let us assume that the SKUs present in a catalog belong to the Fashion & Clothing industry.  PCC has a list of predefined structures available for various industries. Since there are few templates already available for the Fashion & Clothing industry, it is best to use the existing structure rather than creating it from scratch as it saves a lot of effort involved in building the template and you can further customize the template as needed. Let us select a preexisting structure and customize the template as needed.

Step 1: Select a template

A list of pre-existing templates is displayed as shown below.

The left side of the screen displays a list of templates available in PCC for various industries. Let us click Fashion & Clothing as per the example mentioned above and the following is displayed.

There are 3 predefined templates available for this industry. You can choose which template to proceed by selecting the respective template.

You can also hover the mouse on the Template Preview icon available on each structure to get an idea on the layout of the template provided with sample data as shown below.

3. Select the template. Let us select the 2^nd template Fashion & Clothing Template 2 and then click Next.

The following screen appears.

Step 2: Select Catalog & Hierarchy

1. The Selected Template is displayed as chosen in the first step. Now, you need to select the catalog and hierarchy as mentioned.

2. Select the Catalog and Hierarchy as applicable and then click Next and the preexisting structure present in the template selected is displayed. You need to select the catalog and hierarchy and the template being created can be used to view the SKUs for the selected catalog only. The hierarchy is also essential as a catalog can have multiple Hierarchy and if a Node structure needs to be displayed in the PDP, the hierarchy is important as the node structure can vary across Hierarchy.

Step 3: Organize PDP Structure

Here, the basic layout is already present and all the elements that could be relevant for SKUs belonging to the Fashion & Clothing industry are displayed. A brief description on the various components available on this screen is listed here.

You can add components as needed depending on the information that would be required to view SKUs using the template being created. Additionally, you can also remove any of the pre-existing components added as part of the template and add other components by dragging and dropping them in the structure from the available list.

To remove any component, click the component and the following options are displayed.

Click the Delete icon and that component will be removed as shown below.

Similarly, you can perform other actions on the components by clicking them:

• Click the Create a Copy  icon to create a duplicate of the component already present in the structure. Let us add another button after Item# 2 as shown below. This is useful to create a duplicate of an existing component instead of actually adding it from the list.

• Click the Drag   icon to drag and place the component at a different position in the structure as shown below.

• Click the   icon to view the parent of the component, so when you click on the grid view it shows you how this is structured. For example, a header component as highlighted in the image is selected and then you select the icon, it will show the parent component which is a column as highlighted in blue color.

Make the necessary changes in the structure if required and then click Next.

The following screen appears.

Step 4: Map PCC Entities to Template

Here, an icon is displayed next to each PCC entity added as part of the structure indicating whether the component is already mapped or needs to be mapped. The green icon indicates that the values for these PCC entities will be automatically fetched based on the SKU selected while viewing the PDP using this template whereas the purple icon indicates that these entities are not mapped and should be mapped by selecting the relevant value from the catalog.

Map all the PCC entities and then click Next. The following screen appears.

Step 5: Confirm

Here, a preview of the structure finalized is displayed. By default, sample data is used in the template preview. However, an option to select SKU data is also provided and then save the template.

1. Type the Template Name to save the template and add a Template Description as needed.

You can also choose if the template being created can be modified or not. By default, Yes is selected which means that the template can be modified, that is, you can edit the template in future once it is created. However, if you click No, the Edit option for the template will be disabled and it cannot be modified.

2. Click Submit and the new template is created successfully and added to the Product Detail Page Templates page as shown below.

Components in the PDP Structure

There are multiple blocks and components available to design a PDP from scratch or even if a pre-existing structure is selected, you can tweak the structure as needed. On an ecommerce site, a web page is displayed for a specific product which displays information about that product through images, description and various attributes which are specific to that product. A single text / image / link / map and so on are referred to as components whereas the block is a group of components and can be easily reused inside templates. For example, if you add components such as a single image, along with multiple text boxes, buttons and so on that all exist within the canvas where the PDP is being designed, it will be referred to as a block.

Here, you can design the PDP and include the various components that should be displayed when a SKU is selected for viewing using PDP. The following figure displays the screen where all the customization / designing the structure of the PDP is done.

Let us understand the various blocks and components available to design the PDP structure.

Blocks

This is a group of components which can be used inside templates to design the structure of the template as shown below.

Following are the various components available:

PCC Components

You can add various PCC entities as part of the template such as Taxonomy nodes, taxonomy Metadata, Digital Assets, SKU Attribute names and values, related SKUs and so on. Depending on the component added in the template, the respective details will be displayed in the PDP. This helps to add all the PCC entities easily in the PDP depending on what needs to be viewed for a specific SKU.

To add the PCC components, click the Open Blocks icon and then click PCC Components as shown below.

The following table lists the various PCC entities that can be added in the PDP while designing the structure.

Digital Assets

If the PCC entity selected is a digital asset, you can choose which assets should be displayed based on the entity to which these assets are linked.

The following table lists the various digital asset related components available and the types of entities to which assets are linked.

Basics

This section includes all the basic components that can be added while designing the structure such as columns, text, images, link, video and so on.

To add the basic components, click the Open Blocks icon and then click Basic as shown below.

Some of the commonly used Basic components that can be added to the PDP while designing the structure are as follows:

• 1 Column – To add a cell, that is, a single column within which you can add other components

• 2 Columns – To add 2 cells, that is, two columns within which you can add other components

• Text – To add a static text to be displayed in the PDP. You can format the text using the font related properties such as you can make the text bold or italicize the text and so on.

• Link – To add links in the PDP and you need to mention the page to be linked.

• Text Section – To add a text section which consists of a header and a paragraph to add the required text. You can add the required information here as well as format the text using the font related properties such as you can make the text bold or italicize the text and so on.

Layout

This section includes all the layout related components that can be added while designing the structure such as columns, rows, containers and so on. Based on the layout component selected, you can add placeholders for text, images and so on.

To add the layout components, click the Open Blocks icon and then click Layout as shown below.

Some of the commonly used Layout components that can be added in the PDP while designing the structure are as follows:

• Container – To add a container which is like a box that can contain other elements or components such as rows, columns, texts, images and so on.

• Row – To add a row which allows you to enclose texts, images and other components. The elements added will fit horizontally according to the width of the page being designed

Note: A row should be placed within the container.

• Column – To add a column which allows you to enclose texts, images and other components. The elements added will fit vertically according to the width of the page being designed

Note: A column should be placed within the container.

Forms

This section includes all the form related components that can be added while designing the structure such as buttons, labels, checkboxes and so on. While designing a PDP page, you might want to add buttons or checkboxes that display relevant information when clicked by a user or add an HTML form which contains different kinds of information such as username, email ID and so on. This can be achieved by adding those form elements in the PDP.

To add the form related elements, click the Open Blocks icon and then click Forms as shown below.

Depending on the type of elements needed in the PDP, you can drag and drop them to the interface and design the structure as needed.

Components

This section includes all additional components that can be added while designing the structure such as alerts, dropdown, collapse option and so on.

To add the components, click the Open Blocks icon and then click Components as shown below.

Depending on the type of elements needed in the PDP, you can drag and drop them to the interface and design the structure as needed.

Typography

This section includes header and paragraph elements that can be added while designing the structure..

To add the typography, click the Open Blocks icon and then click Typography as shown below.

The following table lists the various Typography that can be added to the PDP while designing the structure.

Extra

This section includes any extra elements such as sliders, tooltips and so on that can be added while designing the structure.

To add the extra elements, click the Open Blocks icon and then click Extra as shown below.

Depending on the type of elements needed in the PDP, you can drag and drop them to the interface and design the structure as needed.

Layer Manager

This section displays details of the various components that have been added to create a template. For example, if you have added a container which consists of various components such as headers, text, buttons, paragraphs which have been used to design the structure of a template, the layer manager will show the complete hierarchy of how these components exist in the template.

To open the layer manager, click the Open Layer Manager icon as shown below.

As shown above, a complete hierarchy of the various elements used in the template is displayed. You can select any of the elements in the layer manager and the respective element will be highlighted indicating where it is being used in the template as shown below.

Click the icon to drag and place the elements as needed in the hierarchy. Also, you can click the icon to hide any of the elements and it will not be shown in the structure. Click the same icon to make it visible in the structure again.

Settings

This section displays the basic settings of the component that has been added while designing the structure. Details such as size of the component, the unique Id assigned to that component and so on is displayed depending on the type of component added.

To view the settings, select the component for which you need to make any changes and then click the Settings icon as shown below.

Thus, you can make the changes as needed in the basic settings of the components added while designing the structure or even in case of pre-existing templates being used.

Style Manager

You can change the properties (mainly related to CSS) of the components added in the PDP structure. This option enables you to change the various properties depending on the type of component selected such as you can change the dimension, that is, the width, height etc. of the cells, edit the font of the text being used in the components, change the alignment of the elements and so on.

To make changes in the component properties, select the component for which you need to make the changes and the Open Style Manager   icon is automatically selected as shown below.

Based on the changes made, the component will be updated in the structure. For example, if you change the dimension, that is, height of the image box added to 200 pixels, it will be updated as shown below.

Similarly, you can make the changes as needed in the properties of the components added while designing the structure or even in case of pre-existing templates being used.

Additional Properties

In addition to the components that can be added and managed using various settings, you can also perform multiple operations on the components added which are as follows:

• View Components ( ) – Click this icon to highlight and view the various components added while designing the structure as shown below.

• Preview ( ) – Click this icon to view a preview of the template designed before finalizing the template as shown below.

Click the to go back to the original view.

• Fullscreen ( ) – Click this icon to view the template in full screen as shown below.

Press Esc to exit the full screen mode.

• View Code ( ) – Click this icon to view the code used in the template created. It will display the HTML and CSS codes used based on the components added as shown below.

• Undo and Redo (   ) – Click these icons to revert the changes made or to redo the changes as needed and the last change made in the template will be updated accordingly.

• Import Template ( ) – Click this icon to paste the HTML / CSS of the element that you need to import in the template as shown below.

• Delete ( ) – Click this icon to clean the canvas, that is, to remove all the components added in the template.

You can also get an idea of how the template would look on different devices by selecting the icons available in the PDP structure page itself. By default, the desktop view is selected. You can choose from the tablet or mobile view. Let us select the mobile view and the template will be restructured as shown below.

Thus, you can select the view and design the template accordingly depending on the customer’s requirement.