All pages
Powered by GitBook
1 of 21

Template items

Introduction

Template items are the elements that your Category list template and Product template consists of. As opposed to landing page elements (images, headlines, text etc.) these elements are generic and will change depending on what Category list og Product you are looking at.

Product template page in the Webshop
Template items a product template page can consist of

Category specific

Find below a desciption of the 3 elements that only works with a Category list template

Category list

The Category list will present the categories with category picture and name of the category OR the name translated if such exists, as setup in PIM.

Category list on Webshop
Category list in Umbraco
Navigating to category in PIM
Category translation in PIM

Category navigation

Category navigation will dispay the categories as a list. The name of each category will come from the label name in PIM or from the specific translation if such exist.

Category Navigation on Webshop
Category navigation in Umbraco
Navigating to category in PIM
Translation of category in PIM

Product listing

Product listing will display the available products in the hierarchy below the category chosen on the webshop.

Product listing containing all products in the 4 available categories
Product listing containing only the chosen category since no sub-categories exist
Product listing in Umbraco

Product specific

Find below a description of the elements that only works with the Product template.

Recommended products

Recommended products are products that your customers bought together, so if a printer is on occasion bought with a specific toner, this toner will appear as recommended product when the next customer looks at the same printer. This happens "behind the scenes" through a worker that is setup and can be seen here in Chainbox.io:

Microservice "bought together with"

Content relations

Content relations will link to any content related through Brand, Category, Product or tags.

Content relations as displayed on Webshop
Content relations enabling and placement in Umbraco

Below are examples of relation through Brand, and through Category.

Content is a video
Content is related to the Brand HP
Product is related to Brand HP
Content is a video
Content is related to a specific Category
Product is related to same category

Product documents

Product documents, typically PDF's are uploaded in the Product Information Management (PIM) system same way as product pictures.

Upload document to product in PIM - step 1
Upload document to product in PIM - step 2

There are two ways of having the documents presented on the webshop

Showing documents with Product documents

Choosing this template will show only the documents

Product document template in Umbraco
Result on webshop

Showing documents with Product information template

When adding the element "Product information" template it includes 3 types of information:

  • Information (long description field in PIM)

  • Specifications

  • Documents

Showing product document with Product information template in Umbraco
Result on webshop

Product Images

Product Image will display the main and secundary images connected to the product in the Product Information Management (PIM) system.

Product Image dispayed on the Webshop
Product Image enabling and placement in Umbraco
Navigating to product Image in PIM
Product image in PIM

Product information

Product information will present 3 types of information if available;

  • Information

  • Documents

  • Specifications

It will also enable the "More information" link. If pressed the page will scroll down to "Information".

Product Information shown on the Webshop
Product Information enabling and placement in Umbraco
Navigating to Information in PIM
Product Information with translations in PIM
Navigate to document in PIM
Product document uploaded in PIM
The specification must be listed here to show on the webshop
Specification from PIM

Product purchase

Product purchase will add the necessary fields for buying on the webshop, including price with and without VAT (if enabled in the initial setup of the shop) stock-information, and delivery-information if existing in the Product Information Management (PIM) system.

The product Purchase element activated on the webshop
The element and placement from Umbraco

Addons

Addons are one or more products defined in PIM, prompting the customer to consider buying those too when presented with them in the product detail page.

Navigating to Addons in PIM
PIM field for Addons

For more information on the Addons functionality, see below pagelink:

Attributes with Umbraco functionality

Product specs

Product specifications are chosen fields from the Product Information Management system (PIM) that are listed as Product specifications in Umbraco. Only a field that has a value will be displayed as a specification on the webshop.

Product specification fields listed in Umbraco
Adding or editing a specification field in Umbraco

Specifications in PIM usually come from the set "Specifications" but there is no restriction when it comes to choosing other fields too.

Navigating to product specifications in PIM
Specification-fields

Showing specifications with Product specs

Using the Product specs template, the specifications will be listed on their own as shown below

Showing specifications with Product specs template in Umbraco
Result on webshop

Showing specifications with Product information

When adding the element "Product information" template it includes 3 types of information:

  • Information (long description field in PIM)

  • Specifications

  • Documents

Showing specifications with Product information template in Umbraco
Result on webshop

Related products

Related products are defined on the product-page in the Product Information Management (PIM) system, on the product in question. Multiple items can be listed here.

Related products showing on webshop
Related product field in Umbraco decides if and where this info should appear
Navigating to the corresponding field in PIM
List all related products in this field i PIM

Generic

The following Template item elements can be added both to the Category list template and the Product template.

Header

A Header will in a Category list template display the name of the category, and in a Product template, the name of the product

Header in Category list template

Header of Category list displayed on webshop
Header of Category list enabled and placed in Umbraco

The category name is displayed. If a translation exists then that will be displayed instead.

Navigating to category name in PIM
Detailted view of category name and fields of name-translations

Header in Product template

Product name displayed on webshop
Product name enabling and placement in Umbraco

The Product name is displayed. If a translation exists then that will be displayed instead.

Navigation to Product name in PIM
Detailed view of product name and fields of name translations

Image

Image on category list template

Attach an image to the template, and choose what image-field in PIM that should feed this. Remember to ensure that all categories affected by this template has content in the chosen PIM-field

Image on Category list template on webshop
Image is linked to a particular PIM-field on category
Content of the field on category in PIM

Image on product template

Attach an image to the template, and choose what image-field in PIM should feed this, on each product that uses this template. Please note, the field "Image" you see below, is not a default field, but one created for this particular example.

Image on Product template on webshop
Image is linked to a particular PIM-field on each product
Content of the filed on product in PIM

Popular products

To decide what products are popular there is a worker setup that behind the scenes keeps an eye on how many times a product is sold (sold count as opposed to qty sold), within the latest 3 months.

The calculated popularity is not visible on the product in PIM and can therefor not visually be verified.

This popularity field in PIM can be manually overwritten by entering a numeric value, that will influence result in lists and sorting by popularity. If you wish to lower the popularity rate on a specific product, enter a low value, or enter a high value for products you wish to appear as top of popular product. Products with a manually entered value will then not be influenced by the calculation of the worker.

This manual overwrite is performed in PIM on product details, field "Popularity".

The worker that keeps track of popular products
Navigating to PIM field Popularity
PIM field popularity

The popular products present on the product-page as a slider, will be the bestselling products within the same category as the product-page we are on, based on sale within the latest 3 months.

Popular products template in Umbraco
Resulting in a productslider in the webshop

Text

Text on Category list template

Attach text to the template and choose what text-field in PIM should feed the content. Remember to ensure that all categories affected by this template has content in the chosen PIM-field.

Text as displayed on webshop
Text linked til specific field in PIM
Content in linked PIM-field

Text on product template

Attach text to the template and choose what text-field in PIM should feed the content.

Text as displayed on webshop
Text linked to specific field in PIM
Content in linked PIM-field

Video

This template can be added both to the Category list template or the Product template. In the example below, it is added to product template.

When adding the Video template to a page, you choose what field in Product Information Management system (PIM) this field should correspond with, and who the provider is:

Adding Video template in Umbraco
Navigating to corresponding field in PIM
Field "Video-url" as shown in PIM with content
Result on webshop

Please note! The field "Video-url" in PIM is not a default field, so needs to be created first.

Example of video-url field created in Attributes in PIM