# App Store screenshots that convert: a seven-rule method

Sam · Published November 4, 2026 · Canonical: https://rankaso.app/blog/app-store-screenshot-optimization/


App Store screenshots convert when a person who gives them three seconds understands what the app does and wants it. Everything else is decoration. We rendered seven visual treatments for RankASO's own listing before shipping one, and the rules below are what survived: a light ground with a soft gradient, the phone lower in the frame so the words have room, titles centred and large enough to read without zooming, one detail lifted out of each screen, a ribbon that ties the first three frames into one sentence, and never another company's app on screen. Here they are, with why each one earned its place.

![The Keywords screen in RankASO as shown in the first App Store screenshot](https://rankaso.app/assets/device-01.png)

## 1. The title is the screenshot

Most viewers read the first frame's title and nothing else. Make it the single sentence you would say if you had three seconds: what the app does for them. Centre it, set it large, give it two lines at most. The subtitle below is one short line. If the title needs the screenshot to make sense, rewrite the title.

## 2. Phone lower, words higher

A phone render that fills the frame leaves the title squeezed into a strip at the top. Push the phone down so its top third is visible and its bottom runs off the frame; the eye reads the title, then the top of the screen, which is where the app's real headline lives anyway. The lower crop also makes the frame feel calmer and more expensive than a full-phone render.

## 3. One detail, lifted out

Each frame gets one element from the screen enlarged in a card that hangs over the phone's edge: a rank with its movement, a verdict pill, a rival's rank beside yours. It gives the eye a place to land and shows the one thing that frame is about. More than one and the frame becomes a collage.

## 4. A ribbon across the first three

A thin band of colour that runs across frames one to three, carrying one phrase in three parts, tells the viewer the frames belong together and pulls them to swipe. Frames four onward stand alone; few people get there, and the ones who do are already interested.

## 5. Light ground, soft gradient, one accent

A pale ground in the app's accent, with a soft gradient so it does not read as flat, and one accent colour for the detail cards and the ribbon. Dark grounds photograph well and read badly in a store listing surrounded by white. Rendered side by side, the gradient option looked the most expensive and the most legible, which is why it shipped.

## 6. Nobody else's app

A rivals frame needs a rival on screen. Use your own app as the rival, or a neutral placeholder, never a real third-party app, logo or name. It is a courtesy, it avoids a review question, and it keeps the viewer's eye on you.

## 7. Two sets, one idea apart

Build the same seven frames twice: once feature-led, once outcome-led, identical in design. The second set is your first Product Page Optimization test, ready on day one. [How to run it.](/blog/app-store-ppo-test/)

## Reading the result

Screenshots change conversion from product page view to download. Watch that in App Store Connect, and watch the ranks beside it so a change in who arrives is not mistaken for a change in how the page performs. For our own apps, a page that converts well turns every rank gained into installs twice over, which is why the screenshots and the keyword work are the same project.

RankASO on the App Store: https://apps.apple.com/app/id6830350753?ct=blog-en-29&mt=8 (Free to start. No account. Data Not Collected.)

## Questions

### What makes App Store screenshots convert?

A first frame whose title says what the app does for the viewer in one sentence, readable in three seconds, with the phone showing the matching screen. The rest of the set supports that frame.

### Should App Store screenshots have a light or dark background?

Light, with a soft gradient and one accent colour. In a listing surrounded by white, light frames read as more legible and more premium; dark frames look heavier.

### Can I show a competitor's app in my screenshots?

Avoid it. Use your own app or a neutral placeholder as the example rival. It keeps attention on you and avoids a review question.