Top Shelf Images

The top shelf of the Apple TV Home screen is a great opportunity for added visibility when the user has placed your app in the top row of the Home screen. When your app is in focus, you can showcase engaging imagery that encourages people to dive into your app for more.

Static Image

At a minimum, every app must supply a single, static top shelf image that can be displayed when your app is in the top row of the Home screen and in focus.

Example of static top shelf image

Image size (@1x) Image size (@2x)
2320px × 720px (2320pt × 720pt @1x) 4640px × 1440px (2320pt × 720pt @2x)

Provide a visually rich static image. Your app’s static top shelf image is used when dynamic content isn’t provided or is unavailable. Use it as an opportunity to highlight your brand.

Don’t imply interactivity in a static image. The static top shelf image isn’t focusable, so it shouldn't include elements that make it appear interactive.

Dynamic Content

Use dynamic top shelf imagery to highlight and provide quick access to important content in your app. You can supply single-layer or multilayer images for dynamic top shelf imagery. To learn how to create multilayer images, see Layered Images.

Help the user jump right to key content. Top shelf provides a path to content that people care about most. Let users click a focused image to open your app and go immediately to the related content, or let them use the Play button on the remote to immediately start media playback or enter gameplay.

Showcase compelling dynamic content. The imagery you show in the top shelf should draw people in and make them crave more. Although your app can stick with the required static image, consider implementing more captivating, dynamic top shelf imagery, such as the newest or highest rated content, to provide a more engaging experience.

Personalize favorite content. People are familiar with apps they put in the top shelf of the Apple TV Home screen and use them often. You can personalize the experience by showing targeted recommendations in the top shelf, allowing users to resume media playback or jump back into active gameplay.

Don’t show advertisements or prices. When users put your app at the top of the Home screen, you’ve already sold them on it. Don’t bombard them with ads that push them away and encourage your app to get demoted. Showing purchasable content in the top shelf is fine, but focus on new and exciting content, and never display prices.

Dynamic Content Layouts

Dynamic top shelf imagery can appear as a row of focusable content or as scrolling banners. These layout styles provide a range of flexible formatting options for presenting your content. Regardless of layout style, show content that people care about the most and that they can get to quickly.

For downloadable top shelf image templates that can help you position your content, see Resources.

Sectioned Content Row

This layout style shows a single labeled row of sectioned content. It’s commonly used to highlight recently viewed content, new content, or favorites. Content in the row is focusable, letting the user scroll through it at the desired speed. A label appears when an individual piece of content comes into focus, and small movements on the remote’s touch surface bring the focused image to life. A sectioned content row can be configured to show multiple labels, if desired.

Sectioneed Content Row layout on the Apple TV Main Menu

Provide enough content to constitute a complete row. At a minimum, load enough images in a sectioned content row to span the full width of the screen. In addition, include at least one label for greater platform consistency and to provide additional context.

You can supply images of varying aspect ratios for a sectioned content row. The following sizes are supported:

Poster (2:3)

Content Layout 2x3 Grid

Aspect Image size (@1x) Image size (@2x)
Actual size 404px × 608px (404pt × 608pt @1x) 808px × 1216px (404pt × 608pt @2x)
Focused/Safe zone size 380px × 570px (380pt × 570pt @1x) 760px × 1140px (380pt × 570pt @2x)
Unfocused size 333px × 570px (333pt × 570pt @1x) 666px × 1140px (333pt × 570pt @2x)
Square (1:1)

Content Layout 1x1 Grid

Aspect Image size (@1x) Image size (@2x)
Actual size 608px × 608px (608pt × 608pt @1x) 1216px × 1216px (608pt × 608pt @2x)
Focused/Safe zone size 570px × 570px (570pt × 570pt @1x) 1140px × 1140px (570pt × 570pt @2x)
Unfocused size 500px × 500px (500pt × 500pt @1x) 1000px × 1000px (500pt × 500pt @2x)
HDTV (16:9)

Content Layout 16x9 Grid

Aspect Image size (@1x) Image size (@2x)
Actual size 908px × 512px (908pt × 512pt @1x) 1816px × 1024px (908pt × 512pt @2x)
Focused/Safe zone size 852px × 479px (852pt × 479pt @1x) 1704px × 958px (852pt × 479pt @2x)
Unfocused size 782px × 440px (782pt × 440pt @1x) 1564px × 880px (782pt × 440pt @2x)

Be aware of additional scaling when combining image sizes. If your top shelf design includes a mixture of image sizes, keep in mind that images will automatically scale up to match the height of the tallest image if necessary. For example, an HDTV image scales to 500 pixels high if included in a row with a poster or square image.

Scrolling Inset Banner

This layout shows a series of large images, each of which spans almost the entire width of the screen. Apple TV automatically scrolls through these banners from left to right on a preset timer until one is brought into focus. The sequence circles back to the beginning once the final image is reached.

When a banner is in focus, a small, circular gesture on the remote’s touch surface enacts the system focus effect, animating the item, applying lighting effects, and, if the banner contains multiple layers, producing a 3D effect. Swiping on the touch surface pans to the next or previous banner in the sequence. Use this style to showcase rich, captivating content, such as a popular new movie.

Example of a Scrolling Inset Banner layout

Provide three to eight images. A minimum of three images is recommended for a scrolling banner to feel effective. More than eight images makes it harder to manually navigate to a specific image.

If you need text, add it to your image. This layout style doesn’t show labels under content, so any text must be part of the image itself. In layered images, consider elevating text by placing it on a dedicated layer above the others. Add the text to the accessibility label of the image too, so VoiceOver can read it to the visually impaired. To learn about VoiceOver, see tvOS Accessibility and UIKit Accessibility.

The following size is supported for a scrolling inset banner image:

Extra Wide

Content Layout Extra Wide Grid

Aspect Image size (@1x) Image size (@2x)
Actual size 1940px × 692px (1940pt × 692pt @1x) 3880px × 1384px (1940pt × 692pt @2x)
Focused/Safe zone size 1740px × 620px (1740pt × 620pt @1x) 3480px × 1240px (1740pt × 620pt @2x)
Unfocused size 1740px × 560px (1740pt × 560pt @1x) 3480px × 1120px (1740pt × 560pt @2x)