Apple TV Docs

Product Template

Use this template to display, for example, a page that describes a message, including information about the speaker(s), related videos, and similar messages. The page displays general information about the product in the top two-thirds of the screen with a row of related products directly below. A user can scroll down and access detailed information about the product, including comments, speaker biographies, and information about any included extras.

Tips & Tricks

  • Default theme: System preference (dark when a background image is specified)

Templates

Default

<document>
  <head>
    <style>
    .showTextOnHighlight {
      tv-text-highlight-style: show-on-highlight;
    }
    .badge {
      tv-tint-color: rgb(0, 0, 0);
    }
    .9ColumnGrid {
      tv-interitem-spacing: 51;
    }
    @media tv-template and (tv-theme:dark) {
        .badge {
          tv-tint-color: rgb(255, 255, 255);
        }
    }
    </style>
  </head>
  
  <productTemplate theme="dark">
    <banner>
      <infoList>
        <info>
          <header>
            <title>genre</title>
          </header>
          <text>Genre Name</text>
        </info>
        
        <info>
          <header>
            <title>director</title>
          </header>
          <text>Director Name</text>
        </info>
        
        <info>
          <header>
            <title>starring</title>
          </header>
          <text>Actor 1</text>
          <text>Actor 2</text>
          <text>Actor 3</text>
          <text>Actor 4</text>
          <text>Actor 5</text>
        </info>
      </infoList>
      
      <stack>
        <title>Product Title</title>
        <!-- In lieu of title an image can be used of size max dimensions of 846x130 -->
        <!-- <img src="" width="846.0" height="130.0" /> -->
        <row>
          <text><badge src="resource://tomato-fresh" style="margin:0 0 -3"/> 90%</text>
          <text>Text 1</text>
          <text>Text 2</text>
          <text>Text 3</text>
          <badge src="resource://mpaa-pg" class="badge" />
          <badge src="resource://cc" class="badge" />
        </row>
        
        <description handlesOverflow="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</description>
        <row>
          <buttonLockup>
            <badge src="resource://button-preview" />
            <title>Title 1</title>
          </buttonLockup>
          
          <buttonLockup>
            <badge src="resource://button-play" />
            <title>Title 2</title>
          </buttonLockup>
          
          <buttonLockup>
            <badge src="resource://button-add" />
            <title>Title 3</title>
          </buttonLockup>
        </row>
      </stack>
      <heroImg src="/resources/images/general/product.jpg" width="400" height="600" />
    </banner>
    
    <shelf class="9ColumnGrid">
      <header>
        <title>Shelf Header (148x226, 9 Column Grid, 51 spacing)</title>
      </header>
      
      <section>
        <lockup>
          <img src="/resources/images/lockups/movie_1.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 1</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_2.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 2</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_3.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 3</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_4.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 4</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_5.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 5</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_6.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 6</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_7.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 7</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_8.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 8</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_9.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 9</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_10.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 10</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_1.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 11</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_2.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 12</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_3.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 13</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_4.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 14</title>
        </lockup>
      </section>
    </shelf>
    
    <shelf>
      <header>
        <title>Reviews &amp; Ratings</title>
      </header>
      
      <section>
        <ratingCard>
          <title>4.1 / 5</title>
          <ratingBadge value="0.7"></ratingBadge>
          <description>Average of 2,241 iTunes user ratings and reviews.</description>
        </ratingCard>
        
        <ratingCard>
          <title><badge src="resource://tomato-splat-m" /> 41%</title>
          <text>Tomatometer</text>
          <infoTable>
            <info>
              <header>
                <title>175</title>
              </header>
              <text>Reviews</text>
            </info>
            
            <info>
              <header>
                <title>88</title>
              </header>
              <text>Fresh</text>
            </info>
            
            <info>
              <header>
                <title>87</title>
              </header>
              <text>Rotten</text>
            </info>
            
            <info>
              <header>
                <title>6</title>
              </header>
              <text>Average</text>
            </info>
          </infoTable>
        </ratingCard>
        
        <reviewCard>
          <badge src="resource://tomato-fresh-m" />
          <title>Publisher</title>
          <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</description>
          <text>Stephanie Vidal Dec, 24 2015</text>
        </reviewCard>
        
        <reviewCard>
          <badge src="resource://tomato-splat-m" />
          <title>Publisher</title>
          <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</description>
          <text>Euna Kwon Dec, 5 2015</text>
        </reviewCard>
        
        <reviewCard>
          <badge src="resource://tomato-certified-m" />
          <title>Publisher</title>
          <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</description>
          <text>Paul Cashman <date>Dec, 10 2015</date></text>
        </reviewCard>
      </section>
    </shelf>
    
    <shelf>
      <header>
        <title>Shelf Header</title>
      </header>
      
      <section>
        <monogramLockup>
          <monogram src="/resources/images/lockups/square_1.jpg" />
          <title>Adam Gooseff</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram src="/resources/images/lockups/square_2.jpg" />
          <title>Ailish Kimber</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Allen" lastName="Buchinski" />
          <title>Allen Buchinski</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Dave" lastName="Elfving" />
          <title>Dave Elfving</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Ethan" lastName="Izzarelli" />
          <title>Ethan Izzarelli</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Euna" lastName="Kwon" />
          <title>Euna Kwon</title>
          <subtitle>Director</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Fritz" lastName="Ogden" />
          <title>Fritz Ogden</title>
          <subtitle>Director</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Gilbert" lastName="Solano" />
          <title>Gilbert Solano</title>
          <subtitle>Director</subtitle>
        </monogramLockup>
      </section>
    </shelf>

    <separator />

    <productInfo>
      <infoTable>
        <header>
          <title>Header</title>
        </header>

        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>

        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <footer>
          <text>Footer Text</text>
        </footer>
      </infoTable>
      
      <infoTable>
        <header>
          <title>Header</title>
        </header>
        <info>
          <header>
            <title>Primary&#xD;Additional</title>
          </header>
          <description handlesOverflow="true">English (Dolby 5.1), Subtitles, CC&#xD;Arabic (Subtitles)&#xD;Cantonese (Subtitles)&#xD;Croatian (Subtitles)&#xD;Czech (Subtitles)&#xD;Danish (Subtitles)&#xD;Dutch (Subtitles)&#xD;Finnish (Subtitles)&#xD;French (Subtitles)&#xD;Arabic (Subtitles)&#xD;Cantonese (Subtitles)&#xD;Croatian (Subtitles)&#xD;Czech (Subtitles)&#xD;Danish (Subtitles)&#xD;Dutch (Subtitles)&#xD;Finnish (Subtitles)&#xD;French (Subtitles)
          </description>
        </info>
      </infoTable>
      
      <infoTable style="tv-line-spacing:10;">
        <header>
          <title>Header</title>
        </header>
        <info>
          <header>
            <textBadge>SDH</textBadge>
          </header>
          <text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</text>
        </info>
        
        <info>
          <header>
            <textBadge>AD</textBadge>
          </header>
          <text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</text>
        </info>
      </infoTable>
      
    </productInfo>
  </productTemplate>
</document>

Background Image

<document>
  <head>
    <style>
    .showTextOnHighlight {
      tv-text-highlight-style: show-on-highlight;
    }
    .badge {
      tv-tint-color: rgb(0,0,0);
    }
    .9ColumnGrid {
      tv-interitem-spacing: 51;
    }
    @media tv-template and (tv-theme:dark) {
      .badge {
        tv-tint-color: rgb(255, 255, 255);
      }
    }
    </style>
  </head>
  
  <productTemplate theme="light">
    <background>
      <img srcset="/resources/images/background/bg_product_uber2.jpg (layout-direction:ltr), /resources/images/background/bg_product_uber2_rtl.jpg (layout-direction:rtl)" />
    </background>
    
    <banner>
      <infoList>
        <info>
          <header>
            <title>genre</title>
          </header>
          <text>Genre Name</text>
        </info>
        
        <info>
          <header>
            <title>director</title>
          </header>
          <text>Director Name</text>
        </info>
        
        <info>
          <header>
            <title>starring</title>
          </header>
          <text>Actor 1</text>
          <text>Actor 2</text>
          <text>Actor 3</text>
          <text>Actor 4</text>
          <text>Actor 5</text>
        </info>
      </infoList>
      
      <stack>
        <title>Product Title</title>
        <!-- In lieu of title an image can be used of size max dimensions of 846x130 -->
        <!-- <img src="" width="846.0" height="130.0" /> -->
        <row>
          <text><badge src="resource://tomato-fresh" style="margin:0 0 -3"/> 90%</text>
          <text>Text 1</text>
          <text>Text 2</text>
          <text>Text 3</text>
          <badge src="resource://mpaa-pg" class="badge" />
          <badge src="resource://cc" class="badge" />
        </row>
        
        
        <description handlesOverflow="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</description>
        <row>
          <buttonLockup>
            <badge src="resource://button-preview" />
            <title>Title 1</title>
          </buttonLockup>
          <buttonLockup>
            <badge src="resource://button-play" />
            <title>Title 2</title>
          </buttonLockup>
          
          <buttonLockup>
            <badge src="resource://button-add" />
            <title>Title 3</title>
          </buttonLockup>
        </row>
      </stack>
    </banner>
    
    <shelf class="9ColumnGrid">
      <header>
        <title>Shelf Header (148x226, 9 Column Grid, 51 spacing)</title>
      </header>
      
      <section>
        <lockup>
          <img src="/resources/images/lockups/movie_1.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 1</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_2.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 2</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_3.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 3</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_4.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 4</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_5.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 5</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_6.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 6</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_7.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 7</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_8.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 8</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_9.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 9</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_10.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 10</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_1.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 11</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_2.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 12</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_3.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 13</title>
        </lockup>
        
        <lockup>
          <img src="/resources/images/lockups/movie_4.lcr" width="148" height="226" />
          <title class="showTextOnHighlight">Title 14</title>
        </lockup>
      </section>
    </shelf>
    
    <shelf>
      <header>
        <title>Reviews &amp; Ratings</title>
      </header>
      
      <section>
        <ratingCard>
          <title>4.1 / 5</title>
          <ratingBadge value="0.7"></ratingBadge>
          <description>Average of 2,241 iTunes user ratings and reviews.</description>
        </ratingCard>
        
        <ratingCard>
          <title><badge src="resource://tomato-splat-m" /> 41%</title>
          <text>Tomatometer</text>
          <infoTable>
            <info>
              <header>
                <title>175</title>
              </header>
              <text>Reviews</text>
            </info>
            
            <info>
              <header>
                <title>88</title>
              </header>
              <text>Fresh</text>
            </info>
            
            <info>
              <header>
                <title>87</title>
              </header>
              <text>Rotten</text>
            </info>
            
            <info>
              <header>
                <title>6</title>
              </header>
              <text>Average</text>
            </info>
          </infoTable>
        </ratingCard>
        
        <reviewCard>
          <badge src="resource://tomato-fresh-m" />
          <title>Publisher</title>
          <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</description>
          <text>Stephanie Vidal Dec, 24 2015</text>
        </reviewCard>
        
        <reviewCard>
          <badge src="resource://tomato-splat-m" />
          <title>Publisher</title>
          <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</description>
          <text>Euna Kwon Dec, 5 2015</text>
        </reviewCard>
        
        <reviewCard>
          <badge src="resource://tomato-certified-m" />
          <title>Publisher</title>
          <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</description>
          <text>Paul Cashman <date>Dec, 10 2015</date></text>
        </reviewCard>
      </section>
    </shelf>
    
    <shelf>
      <header>
        <title>Shelf Header</title>
      </header>
      
      <section>
        <monogramLockup>
          <monogram src="/resources/images/lockups/square_1.jpg" />
          <title>Adam Gooseff</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram src="/resources/images/lockups/square_2.jpg" />
          <title>Ailish Kimber</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Allen" lastName="Buchinski" />
          <title>Allen Buchinski</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Dave" lastName="Elfving" />
          <title>Dave Elfving</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Ethan" lastName="Izzarelli" />
          <title>Ethan Izzarelli</title>
          <subtitle>Actor</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Euna" lastName="Kwon" />
          <title>Euna Kwon</title>
          <subtitle>Director</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Fritz" lastName="Ogden" />
          <title>Fritz Ogden</title>
          <subtitle>Director</subtitle>
        </monogramLockup>
        
        <monogramLockup>
          <monogram firstName="Gilbert" lastName="Solano" />
          <title>Gilbert Solano</title>
          <subtitle>Director</subtitle>
        </monogramLockup>
      </section>
    </shelf>

    <separator />

    <productInfo>
      <infoTable>
        <header>
          <title>Header</title>
        </header>

        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>

        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <info>
          <header>
            <title>Header</title>
          </header>
          <text>Text</text>
        </info>
        
        <footer>
          <text>Footer Text</text>
        </footer>
      </infoTable>
      
      <infoTable>
        <header>
          <title>Header</title>
        </header>
        <info>
          <header>
            <title>Primary&#xD;Additional</title>
          </header>
          <description handlesOverflow="true">English (Dolby 5.1), Subtitles, CC&#xD;Arabic (Subtitles)&#xD;Cantonese (Subtitles)&#xD;Croatian (Subtitles)&#xD;Czech (Subtitles)&#xD;Danish (Subtitles)&#xD;Dutch (Subtitles)&#xD;Finnish (Subtitles)&#xD;French (Subtitles)&#xD;Arabic (Subtitles)&#xD;Cantonese (Subtitles)&#xD;Croatian (Subtitles)&#xD;Czech (Subtitles)&#xD;Danish (Subtitles)&#xD;Dutch (Subtitles)&#xD;Finnish (Subtitles)&#xD;French (Subtitles)
          </description>
        </info>
      </infoTable>
      
      <infoTable style="tv-line-spacing:10;">
        <header>
          <title>Header</title>
        </header>
        <info>
          <header>
            <textBadge>SDH</textBadge>
          </header>
          <text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</text>
        </info>
        
        <info>
          <header>
            <textBadge>AD</textBadge>
          </header>
          <text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</text>
        </info>
      </infoTable>
      
    </productInfo>
  </productTemplate>
</document>