9 App Store Screenshot Layouts That Convert in 2026

The 9 App Store screenshot layouts worth knowing in 2026 are: text-top device-bottom (the default safe choice), text-top device-tilted (for energetic, lifestyle apps), social-proof (when you have ratings to show), device-hero (when the UI sells the app on its own), feature-grid (for utility and productivity apps), lifestyle-hero (for context-led apps), before-after (for transformation outcomes), screen-hero (when the screen carries the story), and stats-hero (for data-led apps). Each layout solves a different message-shape problem. Picking the wrong layout is the most common reason a polished screenshot set still converts poorly.

TL;DR:

• The 9 layouts are a vocabulary, not a checklist. Each fits a different message shape, not a different brand.
• Pick by what frame 1 needs to communicate, not by what looks best on your laptop.
• Frame 1 carries the most weight. The first three portrait screenshots appear directly in App Store search results before users open your product page. If frame 1 doesn't communicate value at thumbnail size, you lose the user before they ever reach your listing.
• Apple's "show the app in use" rule (Review Guideline 2.3.3) caps how much non-UI content any layout can include [1]. Apple doesn't specify a numeric ratio, but the industry rule of thumb is roughly 60% in-app UI across the full set, so layouts that surround the device with marketing art need extra care.
• Each layout is implemented in Try AppScreenshotStudio today for free, so you can preview a layout against your real screens before committing.

This is the pillar for App Store screenshot layouts. For visual fundamentals (color, typography, hierarchy), see our App Store screenshot design guide. For the specific traps to avoid in any layout, see 5 mistakes killing screenshot conversions.

Why does layout choice matter for conversion?

Three constraints make App Store screenshot layout a high-impact decision.

Frame 1 lands in search results. Before users tap your listing, the App Store shows the first three portrait screenshots directly in search results. Users scan multiple listings at once and pick which to open. If your frame 1 layout doesn't communicate value at thumbnail size, the user moves on without ever reaching your product page. Frame 1 is the only screenshot every search-result viewer is guaranteed to see; the further you go down the set, the smaller the audience for that frame becomes.

Layout sets the message shape. A "device-hero" layout (full-bleed device, minimal text) communicates "the UI is the product." A "lifestyle-hero" layout (people, environment, smaller device) communicates "this fits in your life." Both can be perfectly executed; pick the one that matches your app's actual sales pitch. Mismatched layout-to-message kills conversion even when the visual design is polished.

The "show the app in use" rule constrains lifestyle-heavy layouts. App Store Review Guideline 2.3.3 [1] requires that screenshots show the app in actual use, not "merely the title art, login page, or splash screen." Apple does not specify a numeric ratio in the guideline itself, but the practical industry interpretation is that roughly 60% of frames across the full set should feature real in-app UI. Layouts that surround the device with marketing art (lifestyle-hero, before-after, stats-hero with full-frame stats) eat into that ratio fast. A set with five lifestyle-hero frames at the top often gets flagged on first review.

Frame 1 is where the layout decision pays off or fails. Apple's Product Page Optimization feature [2] supports running up to 3 screenshot or icon treatments concurrently against your default page, which is the right way to settle which layout actually converts for your audience.

What are the 9 App Store screenshot layouts?

These nine cover the practical range of compositions. Each is implemented in our screenshot builder; we use the same names internally and in this guide. The summaries below are reference-depth. Each layout has its own page with when-to-use, what-to-avoid, and category fit at full depth.

1. Text-top, device-bottom (the default)

Headline at the top, device frame below. Single screen mockup, no perspective, vertical orientation. The default for productivity, finance, education, and any app where the headline carries the value prop while the screen serves as proof. Full breakdown: /styles/text-top-device-bottom. For finance specifically (where frame 1 wants device-hero instead and text-top-device-bottom belongs in slots 2 and 3), see the finance frame 1 trust-first hook guide.

2. Text-top, device-tilted

Headline at the top, device tilted at 5 to 15 degrees below. Adds energy without sacrificing readability. Suits lifestyle, fitness, social, and casual game apps where the brand has a young or energetic tone. Full breakdown: /styles/text-top-device-tilted.

3. Social-proof

Two device frames, or one device with floating badges placed inside the screenshot frame (5-star rating, "Featured by Apple", "100K+ users"). Earns its slot when the social proof is real and verifiable, and lands hardest at frame 3 before the scroll drop-off. Full breakdown: /styles/social-proof.

4. Device-hero

Full-bleed device frame, large screen content visible, headline kept minimal or moved to a corner. Lets the UI itself do the talking, so it converts hardest for apps with visually distinctive interfaces (photo, drawing, design, AR, games with strong art direction). Full breakdown: /styles/device-hero.

5. Feature-grid

Headline plus a 2×2 or 2×3 grid of icon-and-label tiles, no device. Built for utility apps, all-in-one tools, productivity suites, and B2B apps where the buyer scans for a specific feature they need. Icons must be recognizable shorthand (lock = security, cloud = sync) — arbitrary decoration tanks the format. Best as card 4 or later in the set, not as a hook. Try a feature-grid card.

6. Lifestyle-hero

Person, hand, or environment in the foreground with the app screen visible on a held device. Communicates "this fits in your real life", which is why cooking, fitness, parenting, travel, and dating apps lean on it most. Full breakdown: /styles/lifestyle-hero. For the vertical playbook on which fitness sub-category fits lifestyle-hero (versus device-hero), see the fitness frame 1 hook patterns guide.

7. Before-after

Split frame: "before" state on the left, "after" state on the right. Used for apps that visibly transform something — photo editors, savings dashboards, weight trackers, education apps with measurable progress. Apple's 60/40 rule applies hard here. Full breakdown: /styles/before-after.

8. Screen-hero

Top-clipped device (top 30% bleeds off-canvas, the screen content itself fills the upper card) plus a centered headline beneath. Reverses the default — the visual leads, the headline supports — and lets one killer screen anchor the card. Best for games, AR, video apps, and immersive experiences with striking screen content. Also strongest as the lead card of a panoramic pair (Wallapop +26% pattern, where cards 1 and 2 share a gradient or device continuation). Try a screen-hero card.

9. Stats-hero

Large numbers or data visualization fill the frame; the device may be smaller or absent. Built around credible, specific proof points like "Saved users $4.2B" or "Tracked 50M workouts". Reserve for one or two strategic frames to stay 60/40 compliant. Full breakdown: /styles/stats-hero.

Beyond the core 9: niche layouts the builder also ships

The 9 above cover the practical range for most apps. The builder ships five additional layouts for specific jobs:

• review-clip — rating-statement headline + 5-star rating + short testimonial + bottom-clipped device. Use only when you have a real notable rating ("Rated 4.8") or editorial recognition ("Editor's Choice") to lead with.
• photo-device-hero — full-bleed photo background + flat device + headline overlay at top. The mood-led hook that still shows app UI. Dating, wellness, travel, food.
• metric-badge — centered device + chunky white "achievement card" floating over its upper screen. Calm/Headspace/Strava-style. Best when one proof point (streak, distance, count) deserves to dominate the card while the screen is still visible.
• annotated-feature — tilted device + small callout chip linked to a UI hot-spot by a connector line. Productivity, finance, dev tools only — reads academic on consumer-emotion apps.
• step-flow — headline + 2 to 4 numbered step rows ("how it works"), no device. For onboarding-heavy utility, habit, meditation, finance apps. Card 4+ only.

These are correctly classified as advanced — they fit narrow message shapes. If your app fits one, the builder will pick it without being asked.

How do you pick the right layout for your app?

A two-step decision tree.

Step 1: What does frame 1 need to communicate?

Step 2: Stress-test at thumbnail size.

Take whatever layout you chose and view it at a 200-pixel wide preview. The headline should be readable. The device's primary screen content should be identifiable. Anything that fails this test fails in App Store search results too.

For frames 2 and 3, you can use a different layout, but the visual style (background, typography, accent color) must match frame 1. Mismatched styling across frames is the second-most-common reason a set converts poorly.

Don't use 9 different layouts in a 9-frame set. Two or three layouts max across your full set; consistency reads as professional, variety reads as scattered.

What layout mistakes kill conversion?

Three patterns appear most often.

Mistake 1: Picking the layout before deciding the message. Most indie devs open a template gallery and pick what looks nice. The output is a polished set that doesn't communicate anything specific. The fix: write the headline copy first (what does frame 1 need to say?), then pick the layout that best supports that copy. The free screenshot copy tool can draft outcome-led headlines from a feature list.

Mistake 2: Using lifestyle-hero or before-after across the full set. These eat into the 60/40 rule fast. Your set will look beautiful and get rejected for missing UI. The fix: anchor with text-top device-bottom for at least 5 of your 8 to 10 frames; reserve lifestyle-hero or before-after for 1 to 3 strategic frames.

Mistake 3: Designing for the laptop preview, not the thumbnail. The screenshot builder shows you frames at 600 pixels wide. The App Store shows them at 100 to 200 pixels wide. Headlines that read clearly at 600 pixels disappear at 200. The fix: always preview at thumbnail size before approving a frame, and bump headline weight or size if it doesn't pop.

For deeper coverage of these and other traps, see 5 App Store screenshot mistakes killing conversions.

Where to go from here

If you're starting fresh, work in this order:

1. Read our App Store screenshot design guide for the visual fundamentals (color, typography, hierarchy).
2. Pick a layout for frame 1 using the decision tree above.
3. Open the screenshot builder and let it draft a set in your chosen layout. The builder implements all 14 layouts (the 9 above plus the five niche ones) and varies device side, scale, and trust-signal placement automatically.
4. Stress-test at thumbnail size before exporting.
5. Run a Product Page Optimization test [2] to validate which layout actually converts for your audience.

The 9 layouts above are not a checklist to use all at once. They're a vocabulary. Once you know what each communicates, picking the right one for any given app takes 60 seconds, and your screenshots stop being a project.

Try AppScreenshotStudio today for free and try a layout against your real screens. 10 free credits, no credit card.