# productBundleTemplate Displays information for a group of related media items. ## Overview Use the `productBundleTemplate` element to display detailed information about a product bundle, such as a page that describes a television series, including information about the actors, ratings, and series episodes. The top two-thirds of the screen displays general information about the product. The shelf at the bottom provides a row of related items, such as episodes of the show. A user can scroll down and access detailed information about the product, such as critical reviews, actor biographies, and information about any included extras. The default theme for a product bundle template is `dark` when you specify a background image; otherwise, the product bundle template defaults to the system preference. You can also change the look of a `productBundleTemplate` page by removing `heroImage` from the `stack` element and replacing it with an `img` element that covers the entire screen. The following figure shows the basic layout for a `productBundleTemplate` page.  ### Main Elements The following listing shows the main elements of the `productBundleTemplate` element in TVML format. ```xml … … !— Everything following is under the fold —> … ``` #### Element Descriptions - [background](/documentation/TVML/background): Images or audio to be presented in the background. - [banner](/documentation/TVML/banner): Element containing various elements that provide primary information about the product, such as a TV show title and episode title, description, and buttons for purchasing or previewing. - [buttonLockup](/documentation/TVML/buttonlockup): A type of button that can contain an image (the `badge` element) as well as text. - [description](/documentation/TVML/description): The text that describes the show. - [heroImg](/documentation/TVML/heroimg): An image of the show. - [productInfo](/documentation/TVML/productinfo): Technical information about the product bundle, such as a show’s runtime, language availability, and accessibility information. - [row](/documentation/TVML/row): A group of information elements. - [shelf](/documentation/TVML/shelf): An element containing row elements. Several shelves are used to display information like shows other users have watched and extra features provided by this product. - [stack](/documentation/TVML/stack): Basic information about the product, including the title, rating, and a description. - [subtitle](/documentation/TVML/subtitle): Text that provides additional information about its containing element. - [text](/documentation/TVML/text): The text used to describe the surrounding elements. - [title](/documentation/TVML/title): The title describing its containing element. ### Example The following listing shows the TVML for a `productBundleTemplate` example. ```xml 99% 1hr 54min Comedy 2015 Follow the adventures of a determined developer The story of a development team that loves to cook and makes an app for ordering soup. Follow their journey across the country to WWDC, and the meals they make along the way. $9.99

Average of 2,241 iTunes user ratings and reviews. Tomatometer

Reviews

Fresh

Rotten Brief review here Ravi Patel June, 8 2015

Actor Actor Actor

Apple

1:54

Widescreen

English (Dolby 5.1), Subtitles, CC

Cantonese (Subtitles)

SDH

Subtitles for the deaf and Hard of Hearing (SDH) refer to subtitles in the original language with the addition of relevant non-dialog information. ``` The following figures show the two pages created using the above example. The first figure shows what appears immediately onscreen, while the second figure shows what the user sees after navigating down the screen.   ## Topics ### Valid TVML Attributes [binding](/documentation/TVML/binding) Associates information in a data item with an element. [itemID](/documentation/TVML/itemid) Mark elements for reuse during DOM updates. [layoutDirection](/documentation/TVML/layoutdirection) Specifies the direction in which text is displayed. [prototype](/documentation/TVML/prototype) Associates a data item type with an element. [theme](/documentation/TVML/theme) Sets the color scheme for an element. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)