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-callout (for utility and productivity apps), lifestyle-hero (for context-led apps), before-after (for transformation outcomes), text-bottom (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.

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

Headline at the top, device frame below. Single screen mockup, no perspective, vertical orientation. The most common layout because it works for almost any app category.

• When it works: any app where the headline carries the value prop and the screen serves as proof. Productivity apps, finance apps, education apps.
• When it fails: when you have nothing useful to say in the headline. A weak headline ("Welcome to MyApp") makes the whole frame feel empty.
• App category fit: productivity, finance, education, health tracking, reading.

2. Text-top, device-tilted

Headline at the top, device tilted at 5 to 15 degrees below. Adds energy without sacrificing readability.

• When it works: lifestyle, fitness, social, and entertainment apps where the brand has a young or energetic tone.
• When it fails: when the tilted angle hides important UI elements. A tab bar at the bottom of the device often gets cut off when tilted right. Always preview at thumbnail size to check.
• App category fit: fitness, social, dating, music, casual games.

3. Social-proof

Two device frames, or one device with floating "5-star rating" / "Featured by Apple" / "100K+ users" badges placed inside the screenshot frame, not over it.

• When it works: when you have real, verifiable social proof. Featured-on-the-App-Store badges, App of the Day mentions, ratings above 4.5 with high review counts.
• When it fails: when the social proof is fabricated or borderline. Apple sometimes rejects this layout for unverified claims, and users notice when the numbers feel padded.
• App category fit: any category where you have legitimate proof. Most useful in saturated verticals (finance, dating, productivity).

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.

• When it works: apps with visually distinctive, beautiful UI. Drawing apps, photo apps, design tools, games with strong art direction.
• When it fails: apps with utilitarian UI. A spreadsheet of expenses doesn't sell at full-bleed thumbnail size.
• App category fit: photo and video, drawing, music creation, games, AR apps.

5. Feature-callout

Headline, then a bulleted list of 3 to 4 short features alongside a smaller device frame. Built for apps where the value is "I can do all these things in one place."

• When it works: utility apps, all-in-one tools, productivity suites, B2B apps where the buyer scans for a feature they need.
• When it fails: consumer lifestyle apps where users buy on emotion. A bulleted list of features for a meditation app feels clinical.
• App category fit: productivity, B2B, utilities, developer tools, project management.

6. Lifestyle-hero

Person, hand, or environment in the foreground, app screen visible on a held device. Communicates "this fits in your real life."

• When it works: lifestyle apps where context matters. Cooking, fitness, parenting, travel, dating.
• When it fails: when the lifestyle photo is generic stock. A diverse-young-people-laughing stock photo overlaid with your app communicates nothing about what the app actually does.
• App category fit: lifestyle, fitness, food, travel, parenting, mental health.

7. Before-after

Split frame: "before" state on the left, "after" state on the right. Used for apps that visibly transform something.

• When it works: photo editors, productivity apps with measurable outcomes (savings dashboard, weight tracker), education apps with progress states.
• When it fails: when the before-after framing doesn't reflect the actual app experience. If your meditation app's "after" is a smiling person, that's marketing claim, not app outcome. Apple's 60/40 rule especially hits this layout.
• App category fit: photo editing, fitness with measurable results, finance, education with visible progress.

8. Text-bottom

Device or device-and-environment image fills the top, headline lives at the bottom. Reverses the default and lets the visual lead.

• When it works: when the screen contents are visually striking enough to grab attention without explanatory copy. Game previews, immersive apps, AR experiences.
• When it fails: when the screen contents look generic. A standard list view with text-bottom layout reads as "we forgot to write a headline."
• App category fit: games, AR, video apps, music apps with strong cover-art aesthetic.

9. Stats-hero

Large numbers or data visualization fill the frame; the device may be smaller or absent in some frames. Built around proof points.

• When it works: apps with credible, specific numbers. "Saved users $4.2B in 2025." "Tracked 50M workouts." "Translated into 47 languages."
• When it fails: when the stats are vague ("Used by thousands") or when stats-hero is used for a frame that should show UI. The 60/40 rule means stats-hero cannot anchor a full set; reserve it for one or two strategic frames.
• App category fit: finance, fitness with milestones, productivity with usage stats, language learning.

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 9 layouts 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.