Generating App Store Screenshots

An easy way to generate screenshots using the Chrome device emulator. Add 2 new device sizes to the emulator to get the necessary sizes.

  1. Go to the app customizer for the app you are submitting, click the little share icon at the bottom 

  2. Copy the url into a new tab Chrome to see the app full screen. If you see a 403 error, add /index.html to the end of the url you copied.

  3. Open the developer tools: View => Developer => Developer Tools, (or cmd option i)

  4. Click the device icon at the top left of the developer tools window 

  5. If you don't already have iPhone XS Max as an option, click the dropdown, then edit 

  6. Click "Add custom device," then enter the options pictured, then save. The iPhone XS Max will generate the 6.5 inch

  7. Do the same thing again for iPhone 8 plus. This is for the app store 5.5 inch screenshots. 

  8. Now use the same dropdown as in #5, and choose the device you just created.

  9. Next, click the 3 dots to the right of that dropdown, and choose "capture screenshot." 

  10. Get a shot of each app screen you want in the iPhone XS Max and iPhone 8 Plus sizes. You can then upload those to the app store for 6.5 inch and 5.5 inch screenshots.

  11. For iPad, choose the "iPad Pro" device and do the same thing. That will take care of all the iPad shots.

After grabbing your screenshots, you may want to add device frames and text to the screenshots make your app store listing look great. Read this article for help with that.