---
title: stackTemplate
framework: tvml
role: collectionGroup
path: tvml/stacktemplate
---

# stackTemplate

Displays groups of products.

## Overview

Overview Use the stackTemplate element to display, for example, displaying different genres of movies. Each group of products is displayed directly underneath the previous group. Products can be displayed in different ways using carousel, grid, and shelf elements. The following figure shows the basic layout for a stackTemplate page. The theme for the stack template defaults to the system preference.

Main Elements The following listing shows the main elements of the stackTemplate element in TVML format. <stackTemplate>     <banner>         …     </banner>     <collectionList>         <shelf>             <section>                 <lockup>…</lockup>             </section>         </shelf>     </collectionList> </stackTemplate> note: The shelf element can be replaced with a grid or carousel element to change the way products are displayed. Element Descriptions Example The following listing shows the TVML for a stackTemplate example: <document>     <stackTemplate>         <banner>             <title>Available Action Movies</title>         </banner>         <collectionList>             <shelf>                 <section>                     <lockup>                         <img src="path to images on your server/Car_Movie_250x375_A.png" width="182" height="274" />                         <title>Movie 1</title>                     </lockup>                     <lockup>                         <img src="path to images on your server/Car_Movie_250x375_B.png" width="182" height="274" />                         <title>Movie 2</title>                     </lockup>                     <lockup>                         <img src="path to images on your server/Car_Movie_250x375_C.png" width="182" height="274" />                         <title>Movie 3</title>                     </lockup>                 </section>             </shelf>             <shelf>                 <section>                     <lockup>                         <img src="path to images on your servers/Space_Movie/Space_Movie_250x375_B.png" width="182" height="274"></img>                         <title>Movie 4</title>                     </lockup>                     <lockup>                         <img src="path to images on your server/Space_Movie/Space_Movie_250x375_A.png" width="182" height="274"></img>                         <title>Movie 5</title>                     </lockup>                     <lockup>                         <img src="path to images on your server/Space_Movie/Space_Movie_250x375_C.png" width="182" height="274"></img>                         <title>Movie 6</title>                     </lockup>                 </section>             </shelf>         </collectionList>     </stackTemplate> </document> The following figure shows the output for the above example:

You can also customize the stack template’s background content. To do so, embed a mediaContent element in a background element, as shown in this example: <background>     <mediaContent playbackMode="always">         <img src="path to images on your server/Car_Movie.png"/>     </mediaContent> </background> When you add a video in the background, playback starts 5 seconds after the page is loaded. The video does not repeat.

## Topics

### Valid TVML Attributes

- [binding](tvml/binding.md)
- [itemID](tvml/itemid.md)
- [layoutDirection](tvml/layoutdirection.md)
- [needsMoreThreshold](tvml/needsmorethreshold.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Full-Page Templates

- [alertTemplate](tvml/alerttemplate.md)
- [catalogTemplate](tvml/catalogtemplate.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)