Setting up a new product template

The product template in the standard webshop is defined by a systemdefault template that is not visible and therefore cannot be altered

Default product template on Webshop

System default product template with no options to edit and no other options in the template drop-down list

Create a new product template

Click the 3 dots and choose "ProductTemplate". Give it a good name that refers to what products this template is for, and click "Save and publish"

Important! Name and save the template before adding content

Add Template Items to your new product template

Your new product template is now ready for you to add content into. For this example, we re-create the default template to show you what basic items the default product temple consist of, as inspiration to develop further, but more examples will follow.

Set up rows, columns and content

Choose the rows with the number of columns in as you wish. Click in each and choose relevant Template Items

Adding content to new product template - step 1

Adding content to new product tempate - step 2

Adding content to new product template - step 3

Adding content to new product template - step 4

As shown in step 4, the template now contains a headline, product image to the left, and the purchase-option to the right. Below Content relations, and a list of most bought popular products

To find information on functionality of each template item, please check below link:

Product specific

Select and use your new product template

The new template itself will not drive any change to the webshop, before it is chosen as Default template as shown below, and then click "Save and publish".

Comparing the default product template with our newly created template

Product template with system default

New "Accessory product template"

As you may notice in the above, there are some slight differences in the space between the rows/columns, change those under settings, as you would with any other content on a landingpage.

Adding space to columns/rows

Other template examples for inspiration:

Control what products should use which product templates

Your new product template can be used as a default all over the shop, or you could create multiple templates and control which ones should have what template. If you have product-ranges that are different in nature, this could be very relevant. To do this we need a field on your Product Management System (PIM), in which we state what template to use, directly on the product.

For this example we have created a template for Accessory, and one for Laserprinters

Creating a product template-field in PIM

Go to your Product Information Management (PIM) system and choose "Define", "Attributes" and click "Create attribute"

Creating a new attribute-field "product-template" - step 1

Creating a new attribute-field "product-template" - step 2

Fill out the fields and click "Save". See explanation of field-functionalities further down.

Creating a new attribute-field "product-template" - step 3

Label

Name the filed so the function of the field is clear, we suggest Product template

Code

Code must be defined as "product-template". Any other code will cause this function to fail

Sortorder

Optional, will influence the listing in PIM, but will not affect the Webshop

Datatype

Choose "ENUM"

Set

Choose "Webshop Configuration". This determins under what section you will find the field under PIM Products

Enum options

Enter the naming of your product templates, exactly as named in Umbraco and press enter after each name.

ERP mappings

Must remain disabled, since the field does not come from the ERP-system

Adding the field to specific products

If we don't want our new product template to be the default all over the shop, we can add it only to specific products that would benefit from an alternative layout when presented on the shop.

Navigate to your product of choice and press the product ID to see details. Choose tab "All attributes" and either search the field name in "Filter attributes" or navigate to "Webshop Configuration" and field "Product template". Click the edit-icon on the right side of the field

Click into the "Find value field" to see the dropdown menu with available templates and choose - click "Done". The Product template field is now populated and can be edited any time. Due to the overall setting of Product template being set to system default, only this particular product will be displayed with the new layout.