Wallet Card Design
Customize the digital card your customers save in Apple Wallet and Google Wallet.
Wallet Card Design lets you control how your business's digital card looks in Apple Wallet (iOS) and Google Wallet (Android). Configure once and the same configuration powers both systems — with live previews for each one.
Apple Wallet and Google Wallet digital cards are included in every paid plan — Wallet, Shared, Branded and Premium.
Open the editor
Go to Wallet Card Design from the dashboard sidebar. You'll see two side-by-side previews: the card as it looks in Apple Wallet and as it looks in Google Wallet.
Colors
These colors apply to both systems:
| Field | Description |
|---|---|
| Background color | The card's main color. Defaults to the program's primary color. |
| Label color | The color of label text (e.g. "Points", "Stamps"). |
| Text color | The color of primary text (e.g. balance, customer name). |
Card style
The style defines how the logo, the image and the stamps are arranged inside the card. Pick one and both previews update instantly:
| Style | How it looks |
|---|---|
| Grid | Stamps in centered rows. The classic. |
| Logo hero | Your logo large and centered at the top, with the stamps in a band below. |
| Photo and stamps | A photo of your business on top, stamps below over a solid color. |
| Progress bar | A bar that fills up instead of individual stamps. |
| Image only | No stamps on the card: your image takes the whole space. |
The first four styles draw the stamps inside the card itself, so customers see their progress without opening anything. "Image only" is for points programs or for anyone who prefers a purely visual card.
Background behind the stamps
Under the grid you can place:
| Option | When to use it |
|---|---|
| Image | A photo of your business or product. If it comes out too light, Xtarly dims it automatically so the stamps stay readable. |
| Gradient | Two of your colors, one into the other. A good option when you don't have a photo that works in such a wide format. |
| Solid color | A single color behind the stamps. The cleanest and the one that holds up best on any screen. |
Large logo inside the card
On the styles that support it (Logo hero, for example) you can upload a large logo that is drawn centered inside the design, not just in the top corner. It's how your brand shows up on the customer's lock screen.
Apple doesn't let anyone move the small corner logo — that slot is fixed by the system. That's why the large logo is composed inside the card image.
Images
| Field | Applies to | Description |
|---|---|---|
| Logo | Apple + Google | Your business logo shown on the card. |
| Strip / Hero | Apple (strip) + Google (hero) | Visual banner; appears as a horizontal strip in Apple Wallet and as the top hero in Google Wallet. |
| Lockscreen icon | Apple only | Small icon iOS shows next to the logo in the pass list and in notifications. |
| Google banner | Google only | Wide image at the top in Google Wallet. |
| Horizontal logo | Landscape version of the logo for the Google Wallet header. |
Proximity message
Apple Wallet supports a custom message shown when the customer's iPhone enters the proximity of your branch (via geolocation). Configure it in the "Proximity message" field.
Android does not support custom proximity messages: Google Wallet uses a fixed system message. This field only affects iPhone users.
Options for Stamps programs
If your program is set to STAMPS, extra options appear to customize how stamps render on the card:
| Field | Description |
|---|---|
| Display style | Counter (text: "3 of 10 stamps") or Grid (visual icon grid). |
| Grid count | How many stamps are required (1-21). Defaults to the program's stampsRequired. |
| Active icon | Image of a completed stamp (e.g. full coffee cup). |
| Inactive icon | Image of a pending stamp (e.g. empty cup). |
| Active color | Tint color for completed stamps. |
| Inactive color | Color for pending stamps. |
| Stamp background color | Color of the stamp grid container. |
Live preview
Right of the editor you'll see two previews:
- Apple Wallet — simulates the card exactly as it appears on iPhone.
- Google Wallet — simulates the card as it appears on Android.
Any change to colors, images or stamps reflects instantly in both previews.
Save and publish
Tap Save changes at the end of the editor. Changes apply immediately to:
- Cards generated from that moment forward.
- Existing cards — Apple Wallet receives an automatic push to update the pass; Google Wallet refreshes on next open.
If you don't have enrolled customers yet, test the end-to-end flow by opening your Enrollment Page on your own phone and adding the card.