Wallet Pass Design
Design branded Apple and Google Wallet passes for each tier — image specs, asset requirements, colors, logos, QR codes, shortcuts, and display options.
Wallet Pass Design & Configuration
Every tier in your membership program has its own branded Apple Wallet and Google Wallet pass. These digital membership cards live on your customer's phone and serve as identification at POS, a referral sharing tool, a push notification channel, and a constant reminder of your program.
Image Asset Specifications
Before designing your wallet passes, prepare your image assets to the correct specifications. You upload each image once in the Angle editor, and it is used on both the Apple and Google versions of the pass.
Quick Reference: What to Upload in the Angle Editor
| Asset | Upload Size | Format | Required? |
|---|---|---|---|
| Icon | 660 × 660 px (square) | PNG | ✅ Yes |
| Logo | 480 × 150 px (width may be narrower) | PNG | Optional |
| Featured image | 1032 × 408 px | PNG | Optional |
| Background Color | Hex code (e.g., #000000) | — | ✅ Yes |
| Text Color | Hex code (e.g., #FFFFFF) | — | ✅ Yes |
All images must be PNG format — the editor does not accept JPEG, SVG, or WebP.
Where Each Image Appears
| Angle Upload | On Apple Wallet | On Google Wallet |
|---|---|---|
| Icon (660 × 660) | Pass icon — lock-screen notifications, Wallet app list view, share sheet | The pass logo — automatically masked to a circle by Google |
| Logo (480 × 150) | Logo area at the top of the pass | Not used |
| Featured image (1032 × 408) | Strip image — the banner across the pass body | Hero image — the banner across the pass body |
Icon (Required)
The single most important asset. On Apple it appears in lock-screen notifications and the Wallet app list at very small sizes; on Google it becomes the pass's primary logo, cropped to a circle.
| Detail | Specification |
|---|---|
| Upload size | 660 × 660 px (square) |
| Format | PNG |
| Apple usage | Pass icon (rendered at ~29 pt, so it must read clearly when tiny) |
| Google usage | Pass logo, automatically masked to a circle |
Design guidance: Use a simplified brand mark — a monogram, icon, or symbol. Do NOT use a full wordmark — it will be illegible at small sizes, and Google's circular mask will crop anything that extends to the edges. Center your artwork with generous padding, like an app icon: simple, bold, recognizable at a glance.
Good: A single-letter monogram (e.g., "S" for Silver Oak), an abstract brand symbol, a simplified logomark with breathing room. Avoid: Full company names, detailed illustrations, photos, artwork that touches the edges.
Logo (Optional)
The horizontal brand logo displayed at the top of the Apple Wallet pass. Google Wallet does not use this asset — the circular icon serves that role there.
| Detail | Specification |
|---|---|
| Upload size | 480 × 150 px — width may be narrower |
| Format | PNG with transparency supported |
| Apple usage | Logo slot at the top of the pass |
Design guidance: Use a horizontal/landscape-oriented logo or wordmark. 480 × 150 px is Apple's maximum display size at the highest (@3x) resolution — upload at this size and it will render sharply on all devices. Tall or square logos will be squeezed to fit the horizontal space; if your brand logo is vertical or square, use a horizontal lockup or just the wordmark.
Featured Image (Optional)
A banner image displayed prominently across the pass body — on Apple as the strip image, on Google as the hero image. This is your best opportunity for brand expression on the pass.
| Detail | Specification |
|---|---|
| Upload size | 1032 × 408 px |
| Format | PNG |
| Apple usage | Strip image across the pass |
| Google usage | Hero image spanning the full card width |
Design guidance: Use high-quality brand photography, a hero product shot, or tier-specific imagery. Keep critical content away from the extreme edges — the two platforms crop the banner slightly differently, so preview both before saving.
Why Wallet Passes Matter
Wallet passes solve three problems that email-based loyalty programs cannot:
In-store identification without friction. Instead of asking "What's your email?" at every checkout, the customer presents their wallet pass QR code. Staff scan it with the Shopify POS camera and instantly access the customer's full profile — purchase history, tier status, available credit.
A push notification channel customers actually see. Wallet pass push notifications achieve a 14x engagement rate compared to text messages. Unlike SMS (competing with spam) or email (buried in inboxes), wallet pass notifications appear on the lock screen attached to a branded card the customer chose to install. Up to 3 notifications per day.
Always-available referral sharing. The wallet pass contains the customer's unique QR code and referral link. They can share anytime directly from their phone — no need to log in to an account or find an email.
Accessing the Pass Editor
- Navigate to Membership in the Angle app
- Click the edit (pencil) icon on the tier you want to configure
- Scroll to the Apple & Google Wallet Pass section
- Click Add wallet pass (or Edit if one exists) to open the wallet pass editor
Each tier has its own pass design — so customers see a visually distinct card when they upgrade. This reinforces the tier change as a meaningful event.
Design Settings
Colors
| Setting | What It Controls |
|---|---|
| Background color | The pass card background on both platforms. Set via hex color picker (e.g., #000000 for black). |
| Text color | The color for text labels on the pass. Set via hex color picker (e.g., #FFFFFF for white). |
Ensure your background and text colors have a WCAG AA contrast ratio of at least 4.5:1. Dark backgrounds with light text are the most common choice for premium brands.
Images
| Setting | What It Controls |
|---|---|
| Icon | Required. The pass icon on Apple and the circle-masked logo on Google. Upload at 660 × 660 px as PNG. |
| Logo | Optional. The horizontal brand logo at the top of the Apple pass. Upload at 480 × 150 px as PNG. |
| Featured image | Optional. The banner across the pass body (Apple strip / Google hero). Upload at 1032 × 408 px as PNG. |
What Customers See on the Pass
Apple Wallet:
- Icon and logo — Top of the pass
- BALANCE — Top-right, showing available store credit (e.g., "$10.00")
- Featured image — Banner across the pass body (if uploaded)
- MEMBERSHIP — The tier name (e.g., "The Cellar")
- NAME — The customer's name
- QR code — Bottom of the pass, used for POS scanning and referral sharing
- QR alt text — Below the QR code (e.g., "Give $5 ❤ Get $5")
Google Wallet:
- Circular logo (from your icon) and program name — Top of the card
- Tier name with a MEMBERSHIP label
- NAME and BALANCE fields
- QR code with the alt text below it
- Featured image — Hero banner
- Shortcuts — Rendered as tappable links on the card
The balance updates automatically as credit is earned, used, or expires, and balance changes can trigger a lock-screen notification on the pass.
QR Code Configuration
QR Code Alt Text
The text displayed below the QR code on the pass. This is typically the referral offer (e.g., "Give $5 ❤ Get $5"). Configure this to match your referral values for the tier. Maximum 64 characters.
Always Show QR Code
Enable this checkbox if you want POS scanning capability even when referrals are not enabled for the tier. This is critical for brands that want in-store identification without running a referral program.
Display Options
Hide Pass Balance
Enable this checkbox for programs that don't issue store credit. Useful for:
- Pure tier-based programs where benefits are experiential (not monetary)
- Employee programs that use other reward mechanisms
- Programs still being configured where you don't want to show a $0 balance
Shortcuts
Shortcuts are quick-access links on the wallet pass. On Apple they appear as tappable entries on the back of the pass; on Google they appear as links on the card. They give customers one-tap access to your website, product collections, exclusive offers, or support resources.
Adding a Shortcut
Click Add in the Shortcuts section of the tier edit page. Configure:
| Field | Description | Constraints |
|---|---|---|
| Title | The shortcut name shown on the pass | Required, max 64 characters |
| Link label | The clickable text label (e.g., "Learn more") | Required, max 20 characters |
| URL | Where the shortcut links to | Required, must be a valid URL (e.g., https://...) |
Managing Shortcuts
- Drag shortcuts using the drag handles to reorder them
- Click the edit icon to modify an existing shortcut
- Click the delete icon to remove a shortcut
Shortcuts are configured independently per tier, so different tiers can link to different content (e.g., Gold members see exclusive collections, Silver members see a "How to upgrade" page).
iOS vs. Android Preview
The wallet pass editor includes a toggle to preview how the pass looks on each platform:
iOS (Apple Wallet): Shows the pass as a card in the Wallet app. System-level toggles appear for "Automatic Updates," "Allow Notifications," and "Suggest on Lock Screen" (triggered by time or location).
Android (Google Wallet): Shows the pass in Google Wallet. Google displays its own standard messaging about using the pass across Google services. Note: Google uses "point balance" in their standard copy — this is Google's language, not Angle's; your program runs on store credit.
Always preview on both platforms before saving — the layouts differ between iOS and Android.
Pass Distribution
Wallet passes reach customers through multiple channels:
| Channel | How It Works |
|---|---|
| Customer Account Extension | QR code on the customer's Shopify account page with "Download Wallet Pass" label |
| Direct download link | Each customer has a unique URL (share.anglehq.com/get/[store-domain]/[customer-id]) that can be included in Klaviyo emails |
| Automatic prompt | Customers may be prompted to download after enrollment or tier upgrade |
| Event ticket pages | Hosted download pages with Apple/Google Wallet buttons (for event ticketing) |
The wallet pass download URL is stored as a customer metafield in Shopify, so it can be dynamically inserted into Klaviyo email templates for "Download your wallet pass" CTAs.
Best Practices
- Use distinct colors per tier so customers immediately recognize a tier upgrade when their pass changes
- Prepare your icon at 660 × 660 px with a simplified brand mark — it must read clearly at tiny sizes on Apple and survive Google's circular crop
- Center your icon artwork with padding — Google masks it to a circle, so edge-to-edge designs get cropped
- Upload the logo at the full 480 × 150 px so it renders sharply on high-resolution Apple devices
- Use the featured image for brand expression — it's the largest visual surface on the pass on both platforms
- Keep shortcuts relevant — link to content that's genuinely useful for the tier level (exclusive products, member-only pages, support)
- Always enable QR code even without referrals if you have physical retail locations
- Test on both iOS and Android before launching — the visual experience differs between platforms
- Use PNG format only — other image formats are not supported
- Check contrast ratios — ensure at least 4.5:1 contrast between background and text colors