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.
Did you design your card at xtarly.com/disena-tu-tarjeta or use the calculator before creating your account? Your organization is born with that work in place: colors, gradient, card style, stamp colors, program type and how many stamps. We match it by the email you left your details with. Images don't travel with your design (they're only uploaded if you asked for your sample wallet card, and those are deleted after 30 days), so the logo and photos have to be uploaded again here.
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.
Points and tier programs
On points and tier programs the card draws no stamps, so the editor changes in two ways.
A single image: Strip / Hero
The editor asks for a single image, Strip / Hero, inside the card background section. It is the same one shown in Apple Wallet and in Google Wallet. In that section you pick one of three:
| Option | When to use it |
|---|---|
| Image | A photo of your product or your place, 1125×432 px (Google scales it automatically). If it comes out too light, it is dimmed automatically so the points or the tier stay readable. |
| Gradient | Two of your colors, one into the other. |
| Solid color | A single background color. |
Where the points or the tier show
Under Where the points show (or Where the tier shows) you pick which part of the Apple Wallet card carries the main figure:
| Option | How it looks |
|---|---|
| On the image | Large, over the background. |
| Top | Small, next to the logo. |
| Below the image | To the right of the customer's name; the image stays clear. If the name is long, it is shortened so both fit. |
The same selector, with the same three options, is in xtarly.com/disena-tu-tarjeta.
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. On points and tier programs it is the only background image and lives in the card background section. |
| 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
When your customer's phone gets close to one of your locations, their card surfaces on the lock screen. It works on iPhone and on Android, as long as the location has coordinates saved.
In Apple Wallet you can write the text that goes with that alert, in the "Proximity message" field. It supports the {branch} token, replaced with the location's name.
If you leave the field empty, the card is not left without an alert: it ships with the generic text ¡Estás cerca de {branch}! Pasa por tus puntos. — the same one you see as the placeholder in the editor.
The text is Apple-only: on Android, Google Wallet shows its own system message and accepts no custom one. Google also takes up to 10 locations per business; if you have more, the first 10 are the ones that trigger the alert on Android.
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 drawn on the card (1-21). Defaults to the stamps your program requires. |
| 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. |
The grid count is the number your customer sees on their card — both in the stamps drawn and in the "N / total" text. If you set it to a different number than your program's, the card shows the designer's — so make sure it matches what you actually ask for at checkout. After changing it, save the design again so installed passes get updated.
The program's stamp goal follows the active reward with the most stamps. To change it, edit that reward in Rewards; the editor warns you when the card's stamp count does not match it.
The back of the card
The back isn't configured: it builds itself from what you already have in the dashboard — how your program works (with your tiers, if you use them), your rewards with their cost and their per-customer cap, your locations with address and opening hours, your conditions, your Google reviews link and the customer's personal link to the My card portal. Each section is skipped when the data is missing.
It's broken down section by section in Wallet plan, but it applies to the wallet card on every plan.
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 the save button at the end of the editor. While something is pending, an unsaved-changes indicator shows next to it. 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.
Unsaved draft
While you edit, Xtarly keeps a draft of your changes in that browser. If you close the tab, reload or your session ends before saving, the next time you open the editor a notice offers the recovered draft with your design as you left it, and an option to discard it and go back to the last saved version. The browser also warns you if you try to close or reload with pending changes.
The draft lives only in that browser, per business, and is cleared when you save. Images that had not finished uploading are not part of the draft.
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.