|
| 1 | +# App Store Screenshots |
| 2 | + |
| 3 | +The upload of App Store screenshots is automated via `fastlane`. |
| 4 | + |
| 5 | +First, you will want to generate the PNG files for the screenshots you want to update: |
| 6 | + - Typically you can use fastlane to [generate screenshots from your app's UI screens for all locales](#raw-screenshots), as well as to [post-process those raw screenshots of the UI to add some marketing design around them](#create-promo-screenshots). |
| 7 | + - Alternatively, if your designer already provided some pre-generated PNG files for you to use, you can [put them directly in the right folders for fastlane to pick them up](#designer-provided-screenshots) in the next phase. |
| 8 | + |
| 9 | +Then, you will [use `update_metadata_on_app_store_connect with_screenshots:true` to upload those PNG files to App Store Connect](#upload-screenshots-to-asc). |
| 10 | + |
| 11 | +## <a name="raw-screenshots">Auto-Generating the raw screenshots from the app's screens</a> |
| 12 | + |
| 13 | +This step is based on UI Tests that fastlane will run to go through various screens in your app's UI then take screenshots of them, repeating the process for all the supported locales. |
| 14 | + |
| 15 | + - For WordPress, this is based on the `WordPressScreenshotGeneration` Xcode scheme and UI test |
| 16 | + - For Jetpack, this is based on the `JetpackScreenshotGeneration` Xcode scheme and UI test |
| 17 | + |
| 18 | +Note that for this to work, you need to keep those UI tests up-to-date with any modifications you make to the app's UI navigation and screens over time. |
| 19 | + |
| 20 | +To run the automation that will generate those raw screenshots from your app's UI, run: |
| 21 | + |
| 22 | + - `bundle exec fastlane screenshots` for WordPress |
| 23 | + - `bundle exec fastlane jetpack_screenshots` for Jetpack |
| 24 | + |
| 25 | +## <a name="create-promo-screenshots">Post-processing raw screenshots with marketing design to get the final promo-screenshots</a> |
| 26 | + |
| 27 | +This step takes the raw screenshots generated from the previous section, and apply some post-processing based on the instructions from the `fastlane/screenshots.json` (WordPress) / `fastlane/jetpack_screenshots.json` (Jetpack) config files, including |
| 28 | + - Framing the raw screenshots into an image of an iPhone frame |
| 29 | + - Adding some marketing texts from `fastlane/appstoreres/{metadata,jetpack_metadata}/<locale>/app_store_screenshot_*.{txt,html}` on the image |
| 30 | + |
| 31 | +To run the automation to post-process the raw screenshots into promotional screenshots, run: |
| 32 | + |
| 33 | + - `bundle exec fastlane create_promo_screenshots` for WordPress |
| 34 | + - `bundle exec fastlane create_jetpack_promo_screenshots` for Jetpack |
| 35 | + |
| 36 | +Also, the marketing text added on those screenshots is localized. If you update the copies you will need to ensure they also go through translation by following this process before you can create the promo screenshots with localized copies: |
| 37 | + |
| 38 | + - First, update the `fastlane/appstoreres/{metadata,jetpack_metadata}/source/promo_screenshot_*.txt` files with new English copies |
| 39 | + - During the release process, those new copies will be imported into GlotPress (see `update_appstore_strings` lane) |
| 40 | + - Once those copies have been translated in GlotPress, run `bundle exec fastlane download_promo_strings` (WordPress) / `bundle exec fastlane download_jetpack_promo_strings` to update the `fastlane/appstoreres/{metadata,jetpack_metadata}/<locale>/*.{txt,html}` files with those translated copies |
| 41 | + |
| 42 | + |
| 43 | +## <a name="designer-provided-screenshots">Use screenshots provided by your designer</a> |
| 44 | + |
| 45 | +Instead of going through the 2 sections above to generate the screenshots from the app's current UI for all locales, maybe you instead already have pre-designed PNG files provided by your designer that you'll just want to use as-is. |
| 46 | + |
| 47 | +In that case, you just need to put those files in the approprate folders for the fastlane automation from the next section to find them and upload them to App Store Connect. |
| 48 | + |
| 49 | + - WordPress final promotional screenshots should be placed in `fastlane/promo_screenshots/<locale>/*.png` |
| 50 | + - Jetpack final promotional screenshots should be placed in `fastlane/jetpack_promo_screenshots/<locale>/*.png` |
| 51 | + |
| 52 | +Fastlane will auto-detect the device type each screenshot is for based on the image resolution. Screenshots will be uploaded in alphabetical order (which means you can use e.g. numbers in file names to enforce the order the screenshots will appear in the App Store) |
| 53 | + |
| 54 | +[Your `fastlane/promot_screenshots/` folder should thus look something like this](https://docs.fastlane.tools/img/actions/deliver_screenshots.png) |
| 55 | + |
| 56 | +<em>If you don't want to provide dedicated localized screenshots for some locales (and make the App Store fall back to the English ones instead), be sure to delete any potential old `<locale>/*.png` files that might be present in your filesystem from a past iteration, to avoid fastlane to pick up those old files.</em> |
| 57 | + |
| 58 | +## <a name="upload-screenshots-to-asc">Uploading new promo screenshots to the App Store</a> |
| 59 | + |
| 60 | +Once all the final screenshot PNG files have been put in the right `fastlane/{jetpack_,}promo_screenshots/<locale>/*.png` location: |
| 61 | + |
| 62 | + - Run `update_metadata_on_app_store_connect with_screenshots:true` to upload the screenshots for both WordPress and Jetpack |
| 63 | + - Or run just `update_wordpress_metadata_on_app_store_connect with_screenshots:true` to only upload them for the WordPress app |
| 64 | + - Or run just `update_jetpack_metadata_on_app_store_connect with_screenshots:true` to only upload them for the WordPress app |
| 65 | + |
| 66 | +> [!NOTE] |
| 67 | +> Those lanes not only uploads the screenshots to ASC, but also the other textual metadata (app title, subtitle, etc…) for those apps. |
0 commit comments