Lade eigene Bilder hoch, damit deine Loyalty-Karte professionell aussieht und zu deiner Marke passt. Jedes Element erscheint an einer anderen Stelle der Karte. Achte daher auf die richtigen Größen und Seitenverhältnisse.
Gehe zu Customize → Loyalty card, wähle eine Wallet und öffne Card, um Grafik und Erscheinungsbild zu bearbeiten. Die Editoren für Apple und Google haben separate Einstellungen.
Öffne Apple → Card. Verwende die Vorschau-Steuerung, um zwischen dem Store-Karten- und dem Poster-Format zu wechseln. Bewege dann den Mauszeiger über einen bearbeitbaren Bereich und klicke auf dessen Hotspot, um die Einstellung zu öffnen.
Öffne Google → Card. Bewege den Mauszeiger in der Vorschau über einen bearbeitbaren Bereich und klicke auf dessen Hotspot, um die Einstellung zu öffnen.
Verwende die Steuerung für Vorder- und Rückseite, um beide Seiten zu prüfen. Öffne bei Apple Wallet Details, um die Rückseite zu bearbeiten. Wenn dein Programm Stufen hat, wähle oberhalb der Vorschau eine Stufe aus. Der Status zeigt, ob diese Stufe ein eigenes Design hat. Über die Zurücksetzen-Steuerung wechselst du zum Standarddesign.
Alle Bilder müssen im PNG-Format vorliegen. Das System zeigt sie in Apple Wallet, Google Wallet und Push-Mitteilungen an.
Google-Wallet-Icon und Mitteilungs-Icon ¶
Das Google-Wallet-Icon erscheint auf der Vorderseite des Google-Passes. JeriCommerce verwendet außerdem ein Icon für Push-Mitteilungen unter iOS und Android.
| Anforderung | Wert |
|---|---|
| Seitenverhältnis | 1:1 |
| Mindestgröße | 840 × 840 px |
Apple-Pass-Logo ¶
Das Logo befindet sich oben auf der Vorderseite des Apple-Wallet-Passes. Wenn du zusätzlich einen Programmtitel angibst, teilen sich beide Elemente den Platz. Andernfalls wird nur das Logo angezeigt.
| Anforderung | Wert |
|---|---|
| Seitenverhältnis | 1:1 oder 3:1 |
| Empfohlene Größe (1:1) | 512 × 512 px |
| Empfohlene Größe (3:1) | 1536 × 512 px |
Apple-Streifenbild und Google-Titelbild ¶
Der Editor verwendet für jede Wallet eine eigene Grafik. Das Apple-Streifenbild füllt den breiten Grafikbereich nahe der Passoberseite. Das Google-Titelbild erscheint unten.
| Anforderung | Wert |
|---|---|
| Seitenverhältnis | 3:1 |
| Empfohlene Größe | 1032 × 336 px |
Die Bannermaße können je nach Wallet-App leicht variieren. Platziere die wichtigsten Inhalte mittig und halte einen Sicherheitsabstand von 10 % zu den Rändern ein.
Initiales Banner (Overlay) ¶
Das initiale Banner ist ein Overlay, das bei der ersten Installation der Karte über dem Hauptbanner erscheint. Es erklärt Kunden, dass sie auf die drei Punkte tippen müssen, um die Kartendetails zu sehen. Sobald Kunden einen Link auf der Rückseite antippen, verschwindet das Overlay.
Du findest diese Option in den erweiterten Bannereinstellungen direkt unter dem Upload des Hauptbannerbilds.
Neue Programme beginnen mit einem transparenten Overlay-Template. So bleibt das Hauptbanner ohne erklärende Grafik sichtbar, bis du ein Overlay hochlädst. Apple Wallet und Google Wallet verwenden getrennte Overlay-Ausgaben, damit jede Plattform das Design korrekt darstellen kann.
Verwende Transparenz in deinem initialen Banner, damit das Hauptbanner dahinter sichtbar bleibt. Größe und Seitenverhältnis müssen denen des Hauptbannerbilds entsprechen.
Apple-Poster-Grafik ¶
Die Postergrafik füllt eine Hochformatfläche. Platziere das Hauptmotiv mittig, denn Wallet beschneidet das Bild passend zur Fläche. Barcode und unterer Streifen verdecken einen Teil davon. Betrachte ein Diagramm zum Sicherheitsbereich als Richtwert, nicht als garantierte Begrenzung.
| Anforderung | Wert |
|---|---|
| Fläche | 358 × 448 pt |
| Empfohlene Bildgröße | 1074 × 1344 px |
Erweiterte Wallet-Einstellungen ¶
Öffne More actions → More wallet settings, um die Optionen für Apple-Pässe zu finden. Aktiviere Enable Apple Poster format, damit Kunden mit iOS 27 oder neuer den vollflächigen Poster-Pass sehen. Kunden mit älteren iOS-Versionen sehen weiterhin die standardmäßige Store card. Richte daher auch diese Ansicht ein.
Im selben Dialog findest du Notification links. Damit können aktive Push-Mitteilungen die Aktionen unterhalb des Passes ersetzen. Lies vor der Auswahl dieser Einstellung nach, wie Mitteilungslinks funktionieren.
Du kannst die Abdunklung der Poster-Kopfzeile, den Hintergrund der Fußzeile und die Beschriftungsfarbe anpassen. JeriCommerce fordert außerdem automatische Textfarben für die Postergrafik an. Prüfe das Ergebnis auf einem Gerät, da iOS die angeforderten Farben möglicherweise nicht übernimmt.
Wallet-Aktionen einrichten ¶
Aktionen werden für Apple Wallet und Google Wallet separat auf Programmebene festgelegt. Wähle zwischen Mitgliedschaft, Belohnungen, Coupons, Sammelaktionen, Empfehlungen, Transaktionen, Onlineshop oder einem benutzerdefinierten Ziel. Als benutzerdefiniertes Ziel kannst du eine Webadresse oder eine Kunden-App-Seite verwenden.
Apple Wallet unterstützt bis zu zwei Aktionskacheln. Wähle für jede Kachel einen anderen Aktionstyp. Apple legt Beschriftung und Icon anhand des ausgewählten Typs fest; benutzerdefinierte Kachelbeschriftungen sind daher nicht möglich.
Die primäre Aktion heißt im Editor Left button, die sekundäre Right button. Für Loyalty-Pässe bietet Apple fünf Aktionstypen: View offers and rewards, View membership benefits, Add to balance, Shop Online or In App und Order Delivery or Collection. Im Feld Opens wird das Ziel als Text angegeben. Trage eine Webadresse, eine Kunden-App-Seite oder einen von deinem Programm unterstützten benutzerdefinierten Link ein.
Google Wallet unterstützt eine Schaltfläche auf der Vorderseite des Passes sowie einen separaten Link in den Passdetails. Richte die Schaltfläche und den Link in den Details unabhängig voneinander ein.
Push-Mitteilungslinks verwenden ¶
Verwende unter Customize → Loyalty card das Standarddesign des Programms statt eines stufenspezifischen Designs und öffne anschließend More actions → More wallet settings. Im Dialog Advanced settings steuert Notification links die Schaltflächen unter dem Pass in Apple Wallet und Google Wallet. Die Option ist standardmäßig aktiviert.
Wenn eine Push-Mitteilung einen Link enthält, können Kunden mit dieser Einstellung statt des üblichen Schaltflächenziels das Ziel der Mitteilung über die Karte öffnen:
| Wallet | Verhalten bei aktivem Mitteilungslink |
|---|---|
| Apple Wallet (iOS 27 oder neuer) | Eine Belohnungs- oder Marketingmitteilung mit Link ersetzt die konfigurierten Aktionskacheln durch eine einzelne Aktion, die diesen Link öffnet. |
| Google Wallet (Android) | Die Schaltfläche auf der Vorderseite öffnet den Mitteilungslink und verwendet den Mitteilungstext als Beschriftung. |
Der Ersatz ist vorübergehend. Sobald der Pass den aktiven Mitteilungslink nicht mehr enthält, erscheinen wieder die konfigurierten Aktionen. Deaktiviere Notification links, damit Mitteilungen die üblichen Schaltflächen nicht ersetzen. Klicke im Dialog auf Save und speichere anschließend den Karteneditor. Dadurch werden weder Push-Mitteilungen deaktiviert noch Mitteilungslinks aus den Passdetails entfernt.
Apple benötigt mindestens eine konfigurierte Aktion, um eine Kachel anzuzeigen. Google benötigt eine konfigurierte Schaltfläche oder einen Link in den Details, um die Mitteilungsschaltfläche anzuzeigen. Fehlt beides, bleibt der Mitteilungslink in den Passdetails, statt eine Schaltfläche unter der Karte zu erstellen.
Wenn du den Programmnamen oder den Titel der Wallet-Karte änderst, aktualisiert JeriCommerce automatisch die gemeinsame Kartendefinition in Google Wallet. Bereits installierte Google-Wallet-Karten erhalten den neuen Namen, ohne dass Kunden sie erneut installieren müssen.