Setting up a new category list template

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

If you wish to defer from the default template and build your own this is done as follows:

Create a new Category Template

Click the 3 dots and choose "Do something else". Click "Create"

Choose "ProductTemplate", give it a name and click "Save and publish"

Important! Name and save the template BEFORE adding content

Add Template Items to your new Category template

Your new Category list 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 Category list consists 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

As shown in step 4, the template now contains a headline (name of the category) in the top, and a divided row with Category navigation to the left, and product-listing to the right.

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

Select and use your new Category 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 category list with our newly created list

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 rows/columns through "Add spacing" or choosing a different value under "Grid column spacing".

Other template examples for inspiration:

Control what categories should use which Category template

Your new category list template could be your new default for what-ever category you navigate to OR, you could control that certain levels of your category-tree/a specific category, should have one template and other levels another template! To do this we need a field in your Product Management System (PIM), in which we state the name of template to use.

With a 3 level category structure for this example, we have created 3 Category-list templates each with different designs

Creating a category template-field in PIM

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

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

Label

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

Code

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

Sortorder

Optional, will influence listing in PIM

Datatype

Choose "ENUM"

Set

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

Enum options

Enter the naming of all your category 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 Categories in PIM

Navigate to your category of choice and click "Edit", find your "Category template" filed under the section "All attributes", "Webshop Configuration", click the edit-icon

Choose the template from the dropdown menu you wish to be used for this category and click "Done".

Your choice will now be visible as shown below, and can be edited at any time. Continue with all the categories you wish to attach a specific template to. In Umbraco you will continue to have your Default template defined as "System default". This will mean that any categories that does not have a special template assigned to them in PIM, will use the default template.