Pass design and branding
Last updated
Your wallet pass sits in your customers' phones next to their bank cards and boarding passes, so it should look like your brand. The pass editor controls the card's title, colors, logo, and images. A live preview shows the pass as it looks in Apple Wallet and Google Wallet while you work.
Open the pass editor
- Open Wallet Passes.
- Click New to start a new pass, or click Edit on the pass you want to change.
The editor shows the settings on the left and a live preview on the right. The design settings covered here live in the Card Header, Card Body, and Colors sections. For everything else on the pass — what the fields show, QR codes, locations, and back fields — see Wallet passes.
Title
In Card Body, enter a Title for the card, for example your store or loyalty program name. In the Apple preview, the title appears on the back of the card, shown below the front. The Google Wallet pass uses it as the card title; if you leave it empty, your store name is used there.
Colors
Three settings control the colors of the pass. Each one is a text field with a color swatch next to it. Type a color value, or click the swatch to open a color picker.
| Setting | Where it is | What it changes |
|---|---|---|
| Background Color | Card Body | The card's background, on both Apple Wallet and Google Wallet passes. |
| Font Color | Colors | The small labels above each field on the Apple Wallet pass, such as "BALANCE" or "MEMBER SINCE". |
| Foreground Color | Colors | The values under those labels on the Apple Wallet pass — the balance, name, or date itself. |
Pick a background that gives the labels and values enough contrast to stay readable. The preview is the quickest way to check.
On the Google Wallet pass, only the Background Color applies. Its text is shown in black or white, whichever stands out better against the background you pick. The Google preview tab shows which one that is.
Images
Three image fields shape the look of the pass. Each field shows a recommended size. Images with these proportions fit the card without being cropped.
| Image | Where it is | Recommended size | Where it appears |
|---|---|---|---|
| Logo | Card Header | 160 x 50 | The header of the pass, on both Apple Wallet and Google Wallet. |
| Icon Image | Card Header | 38 x 38 | Notifications sent to Apple devices, for example when a balance changes, and the square logo of the Google Wallet pass. Without an icon, your Logo is used in both places. |
| Background Image | Card Body | 375 x 144 | The wide image across the body of the card. |
For a sharp result on phones with high-resolution screens, upload the Logo and the Background Image at up to three times the recommended size, for example 480 x 150 for the Logo and 1125 x 432 for the Background Image. Toki scales larger images down, and one upload covers every screen, so you don't need separate versions.
Body image and stamps
The body image field changes with the Stamps Type you choose in Card Body, because the image plays a different role on a punch card:
| Stamps Type | Field label | What the image does |
|---|---|---|
| None (use background image) | Background Image | Shown across the body of the card. |
| Balance | Stamp Image | Used as the stamp that fills in as the customer earns. |
| Challenge | Default Punch Image (used if activity has no icon) | Used as the stamp for any activity in the challenge that has no icon of its own. |
Icon updates on Apple devices
Apple devices keep a copy of your pass icon. After you upload a new Icon Image, customers' phones can keep showing the old one for a while before the new icon appears in notifications.
Upload, replace, or remove an image
- Click Click here to upload the image on the field and choose an image file from your computer.
- The field then shows your image. To remove it, click the trash icon in the corner of the image.
- To replace an image, remove it first, then upload the new one.
Until you upload your own Logo and Background Image, the preview shows placeholders, and so does the Apple Wallet pass.
You can upload any common image format, such as PNG, JPG, SVG, or WebP, with up to 30 megapixels. Toki converts each image and scales it to fit each wallet, so one upload serves both Apple Wallet and Google Wallet.
Check the preview
The preview on the right updates as you make changes.
- Use the Apple and Google tabs to see the pass in each wallet.
- The Apple tab shows the front of the card and, below it, the back with your Title and back fields.
- The preview uses sample data, such as a sample member name and balance, so you can see how the layout looks with real content.
The preview is a close match, not a pixel-perfect copy. The pass can look slightly different depending on the customer's device and software version.
Font Color and Foreground Color apply to Apple Wallet passes only.
Save your design
As soon as you change something, a save bar appears at the top of the page.
- Click Save to apply your changes. After you save a new pass, Toki opens its Edit Wallet Pass page so you can keep working on it.
- Click Discard to go back to the last saved version.