Logos
Google Wallet masks your logo into a circular shape.
Logo image guidelines
The following is a list of user interface recommendations for logo images:
| Guideline | Example |
|---|---|
| Preferred file type: PNG | |
| Minimum size is 660 px by 660 px | |
| Image aspect ratio: 1:1. Artwork aspect ratio: 1:1. | |
| Actual pixel size scales to the device size. | |
| Your logo is masked to fit within a circular design. Ensure that your logo fits within the Safe Area. Don't pre-mask your logo. Leave the logo in a square with a full bleed background color. The logo needs to have a 15% margin so that it isn't cut off when masked. |  |
Card Background Color
You can set the background color with the field hexBackgroundColor. If you don't set the value, an algorithm analyzes the logo, finds the dominant color, and uses it for the background color.
Hero images
The class.heroImage field appears as a full-width banner across the body of the card.
Hero image guidelines
The following is a list of user interface recommendations for hero images:
| Guideline | Example |
|---|---|
| Preferred file type: PNG | |
| Recommended size is 1032x336 px. Use wide, rectangular images. Use an image with a colored background for best results. | |
| 3:1 aspect ratio, or wider. | |
| The display size is the full width of the card, and the height is proportional. |  |
Full-width images
The *.imageModulesData.mainImage field in a class or object appears as a full-width image in a pass.
Full-width image guidelines
The following is a list of user interface recommendations for full-width images:
| Guideline | Example |
|---|---|
| Preferred file type: PNG | |
| Minimum size is 1860 px wide, variable height. Use wide, rectangular images. Use an image with a colored background for best results. | |
| Variable aspect ratio. | |
| The display size is the full width of the template, and the height scales proportionally. |  |
| Use the same color scheme that you use for your logo. |
Barcode images
Certain verticals allow for images above and below the barcode.
Images above the barcode
The following is a list of user interface recommendations for the images above the barcode:
| Guideline | Example |
|---|---|
| Preferred file type: PNG | |
| Maximum height is 20 dp (at maximum aspect ratio). Recommended size is 80 px tall and 80-780 px wide if two images are present. This lets them be side by side. | If one image is a square and the other is a rectangle, then the images need to be 80x80 px and 780x80 px. |
| Unconstrained aspect ratio. For maximum 20 dp height and width of a single image, use a 20:1 aspect ratio. | If you only want a single image above the barcode, take the full width (exclude padding). The image needs to be 1600x80 px. |
| Maximum display size for a single image is 20 dp high and 400 dp wide. |
Image below the barcode
The following is a list of user interface recommendations for the image below the barcode:
| Guideline | Example |
|---|---|
| Preferred file type: PNG | |
| Maximum height is 20 dp (at maximum aspect ratio). Recommended size is 80 px tall and 80-1600 px wide. | If square, 80x80 px. If rectangular, 1600x80 px. |
| Unconstrained aspect ratio. For maximum 20 dp height and width, use a 20:1 aspect ratio. | If you want a full width image (exclude padding), the image must be 1600x80 px. |
| Maximum display size is 20 dp high and 400 dp wide. |