Images on Apple Wallet and Google Wallet passes are an essential component that enhances the visual appeal and functionality of these digital cards. They provide a quick and easy way for users to identify and access the pass.
Terminology
Digital Pass:
A digital representation of a physical card or document, accessible through a mobile device.
Digital Coupon:
A digital version of a traditional coupon.
Aspect Ratio:
The ratio of the width to the height of an image.
Default image:
When a user hasn't uploaded a profile picture, a default image like a generic avatar or a placeholder image is displayed.
Images:
For the Digital Coupon we will be using 5 images.
Icon – Represents your brand in Lock Screen notifications, Mail attachments and Wallet. Use a square image measuring 114 × 114 pixels.
Apple Logo – Appears at the top left of standard passes. It can be square or rectangular, with a height of 150 pixels and a width between 150 and 480 pixels.
Google Logo – Use a square image measuring at least 660 × 660 pixels. Google Wallet applies a circular mask automatically, so leave a 15% margin around your logo to prevent cropping.
Apple Strip Image – Appears horizontally across the pass, behind the primary fields. Use 1125 × 432 pixels.
Google Large Image – Appears across the full width of the pass below the data fields. Use the recommended size of 1032 × 812 pixels. PNG is preferred.
Adding your images
Google Logo Image
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Click on the image upload icon and select the correct sized image from your computer.
Click "Done" when finished, and click "Save" to save the changes.
Apple Logo Image
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Click on the either the square or rectangle image upload icon and select the correct sized image from your computer.
Click "Done" when finished, and click "Save" to save the changes.
Google Hero Image
The Google Wallet Large Hero Image is a visual element used to enhance the appearance and user experience of digital passes.
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Click on the image upload icon and select the correct sized image from your computer.
Click "Save" when done to save your changes.
Apple Wallet Strip Image
The Apple Wallet Strip Image is a visual element used to enhance the appearance and user experience of digital passes.
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Click on the image upload icon and select the correct sized image from your computer.
Click "Save" when done to save your changes.
Icon Image
The icon image is only used for the Apple Wallet designer.
In the designer click Notifications to display the notification view, then click on the icon in the notification preview to open the image selector. This contains images previously used and an image uploader.
Click on the image upload icon and select the correct sized image from your computer, or used an image already saved.
Click "Save" when done, and then "Save Design" to save changes.
Test
Check how your test pass looks after making these changes
If you haven't issued a test pass and added to Wallet yet, please see here
View the pass and changes in your Wallet.
