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. Apple and Google have different requirements — the Angle editor handles the conversion, but you need to upload the right source files.
Quick Reference: What to Upload in the Angle Editor
| Asset | Upload Size | Format | Required? |
|---|---|---|---|
| Icon | 660 × 660 px | PNG | ✅ Yes |
| Logo | 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 — JPEG, SVG, and WebP are not supported.
Apple Wallet — StoreCard Image Specs
This is the pass type used for your membership/loyalty wallet passes.
Icon (Required)
The icon appears in the top-left of the pass, in lock-screen notifications, and in the Wallet app list view. This is the most frequently seen image — it must read clearly at tiny sizes.
| Detail | Specification |
|---|---|
| Angle upload size | 660 × 660 px (square) |
| Apple @1x | 29 × 29 px |
| Apple @2x | 58 × 58 px |
| Apple @3x | 87 × 87 px |
| Format | PNG with transparency supported |
Design guidance: Use a simplified brand mark — a monogram, icon, or symbol. Do NOT use a full wordmark — it will be illegible at 29px. Think of this like your app icon: simple, bold, recognizable at a glance.
Examples of good icons: A single letter monogram (e.g., "S" for Silver Oak), an abstract brand symbol, a simplified logomark. Avoid: Full company name, detailed illustrations, photos.
Logo
The larger brand logo displayed on the pass body, positioned in the top section of the card.
| Detail | Specification |
|---|---|
| Angle upload size | 1032 × 408 px (Slot 2) |
| Apple @2x max | 320 × 100 px |
| Apple @3x max | 480 × 150 px |
| Format | PNG with transparency supported |
Design guidance: Use a horizontal/landscape-oriented logo. Tall or square logos will be squeezed to fit the horizontal space and look distorted. If your brand logo is vertical or square, consider using a horizontal lockup or just the wordmark.
Apple Multi-Resolution Requirement
Apple requires three versions of every image asset:
| Scale | Multiplier | Icon Example | Logo Example |
|---|---|---|---|
| @1x | Base | 29 × 29 px | 160 × 50 px |
| @2x | 2× | 58 × 58 px | 320 × 100 px |
| @3x | 3× | 87 × 87 px | 480 × 150 px |
The Angle editor handles this automatically — you upload a single high-resolution image (660 × 660 for the icon) and Angle generates all three sizes.
Google Wallet — Loyalty Card Image Specs
This is the pass type used for your membership/loyalty wallet passes on Android.
Program Logo (Required)
The primary brand identifier. Google automatically masks this image to a circle, so your artwork must account for circular cropping.
| Detail | Specification |
|---|---|
| Minimum size | 660 × 660 px (square) |
| Angle upload size | 660 × 660 px |
| Format | PNG recommended |
| Masking | Automatically cropped to a circle by Google |
Design guidance: Center your logo artwork with generous padding around the edges. If your logo has corners or extends to the edges, those areas will be cropped off by the circular mask. Test by overlaying a circle on your design before uploading.
Good: A centered monogram, symbol, or logomark with breathing room. Bad: A full wordmark that extends edge-to-edge (the letters at the sides will be cut off).
Hero Image (Optional)
A banner image displayed prominently on the card body. Excellent for seasonal brand photography or tier-specific imagery.
| Detail | Specification |
|---|---|
| Recommended size | 1032 × 336 px |
| Angle upload | 1032 × 408 px (slightly taller) |
| Format | PNG |
Design guidance: This is your best opportunity for brand expression on Google Wallet. Use high-quality brand photography, a hero product shot, or tier-specific imagery. The image spans the full width of the card.
Wide Program Logo (Optional)
A rectangular logo displayed lower on the card. Use this if your full brand wordmark doesn't fit in the circular program logo.
| Detail | Specification |
|---|---|
| Recommended size | 1280 × 400 px |
| Minimum height | 400 px |
| Format | PNG |
Design guidance: This is ideal for horizontal wordmarks and full brand logos. Use this slot to complement the circular program logo with your complete brand identity.
Platform Comparison: Image Slots Side by Side
| Image Purpose | Apple StoreCard | Google Loyalty Card | Angle Editor |
|---|---|---|---|
| Brand icon/logo | Icon: 87×87 (@3x) | Program Logo: 660×660 min (circle) | 660×660 px upload |
| Brand logo on card | Logo: 480×150 max (@3x) | Wide Logo: 1280×400 rec. | 1032×408 px upload |
| Brand photography | — | Hero Image: 1032×336 rec. | 1032×408 px upload |
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 Edit 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. Set via hex color picker (e.g., #000000 for black). |
| Text color | The color for all 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 | Small icon shown in the wallet app, appearing in the top-left of the pass. Required. Upload at 660 × 660 px as PNG. |
| Logo | Larger brand logo displayed on the pass body. Upload at 1032 × 408 px as PNG. |
What Customers See on the Pass
The pass renders in the phone wallet with the following layout:
- Brand icon — Top-left corner
- BALANCE — Top-right, showing the available store credit (e.g., "$10.00")
- MEMBERSHIP — The tier name (e.g., "The Cellar")
- MEMBER — The customer's name
- Brand logo — Mid-section of the pass
- QR code — Bottom of the pass, used for POS scanning and referral sharing
- Referral text — Below the QR code (e.g., "Give $5 ❤ Get $5")
The balance updates in real-time as credit is earned, used, or expires.
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") along with a short code identifier. 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 that appear on the back of the wallet pass. 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 | Required |
| Link label | The clickable text label | Max 20 characters, defaults to "Learn more" |
| URL | Where the shortcut links to | Required, must start with 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 loyalty card across Google services. Note: Google uses "point balance" in their standard copy — this is Google's language, not Angle's.
Always preview on both platforms before saving — the layouts differ slightly 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 be readable at 29px on Apple devices
- Account for Google's circular logo mask — center your artwork with padding so edges aren't cropped
- 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