---
title: catalogTemplate
framework: tvml
role: collectionGroup
path: tvml/catalogtemplate
---

# catalogTemplate

Displays groups of items along one side of a page and images of a group’s contents on the other side.

## Overview

Overview Use the catalogTemplate element to display information about groups of like products; for example, a movie catalog that provides categories for dramas, comedies, and all movies. Each group of products is contained in its own section and displayed along the left side of the screen. Images depicting the products contained within a selected group are displayed in the related content area on the right side of the screen. The following figure shows the basic layout for a catalogTemplate page. The theme for the catalog template defaults to the system preference.

Main Elements The following listing shows the main elements of the catalogTemplate element in TVML format. <catalogTemplate>    <banner>       <title>…</title>    </banner>    <list>       <section>          <listItemLockup>             …          </listItemLockup>       </section>       <section>          <header>             …          </header>          <listItemLockup>             …          </listItemLockup>       </section>    </list> </catalogTemplate> Element Descriptions Example The following listing shows the TVML for a catalogTemplate example. The example displays a title along the top of the screen. Two items representing movie categories, All Movies and Comedies, are listed along the left side of the screen. Movie posters are presented on the right in a grid format according to which movie category the user selects. <document>    <catalogTemplate>       <banner>          <title>Movies</title>       </banner>       <list>          <section>             <listItemLockup>                <title>All Movies</title>                <decorationLabel>6</decorationLabel>                <relatedContent>                   <grid>                      <section>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />                            <title>Movie 1</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />                            <title>Movie 2</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />                            <title>Movie 3</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />                            <title>Movie 4</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />                            <title>Movie 5</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />                            <title>Movie 6</title>                         </lockup>                      </section>                   </grid>                </relatedContent>             </listItemLockup>             <listItemLockup>                <title>Comedies</title>                <decorationLabel>4</decorationLabel>                <relatedContent>                   <grid>                      <section>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />                            <title>Movie 2</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />                            <title>Movie 1</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />                            <title>Movie 4</title>                         </lockup>                         <lockup>                            <img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />                            <title>Movie 3</title>                         </lockup>                      </section>                   </grid>                </relatedContent>             </listItemLockup>          </section>       </list>    </catalogTemplate> </document> The following figure shows the output for the above example:

## Topics

### Valid TVML Attributes

- [autoHighlight](tvml/autohighlight.md)
- [binding](tvml/binding.md)
- [layoutDirection](tvml/layoutdirection.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Full-Page Templates

- [alertTemplate](tvml/alerttemplate.md)
- [compilationTemplate](tvml/compilationtemplate.md)
- [descriptiveAlertTemplate](tvml/descriptivealerttemplate.md)
- [divTemplate](tvml/divtemplate.md)
- [formTemplate](tvml/formtemplate.md)
- [listTemplate](tvml/listtemplate.md)
- [loadingTemplate](tvml/loadingtemplate.md)
- [mainTemplate](tvml/maintemplate.md)
- [menuBarTemplate](tvml/menubartemplate.md)
- [oneupTemplate](tvml/oneuptemplate.md)
- [paradeTemplate](tvml/paradetemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)
- [searchTemplate](tvml/searchtemplate.md)