Pass design and branding
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.
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.
Images
Three image fields shape the look of the pass. Each field shows a recommended size in pixels. Images close to these sizes look sharp and 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. |
| Background Image | Card Body | 375 x 144 | The wide image across the body of the card. |
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 images, the preview shows placeholders.
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.
Icon Image, 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.