Design your Apple and Google wallet passes

With the Brevo wallet pass editor, you can build branded, personalized passes for Apple Wallet and Google Wallet, all without code. Customize the layout, images, and colors to reflect your identity, insert personalization variables to adapt the content to each customer, and use geofencing to send notifications based on location.

Before you start 

Before designing a pass, you need to:

Understand the structure of a wallet pass 

Before designing your pass, you have to understand how it is structured. Apple Wallet and Google Wallet passes each have their own layout and field structure, and need to be configured separately. 

Click the tabs below to explore the anatomy of each pass type and their sections:

Apple wallet pass Google wallet pass
Front of Apple Wallet pass showing logo, loyalty program name, member name, points, and barcode
Back of Apple Wallet pass showing text information fields

Wallet passes have a front and a back. The front displays your branding and key information at a glance. 
Expand the following accordions to learn more about each section on the front of the Apple Wallet pass:

🔴 Header

The Header section appears at the very top of the pass and is always visible, even when the pass is not open. It typically contains your organization or brand name and logo.

cw_apple-header_en-us.png
  1. Pass logo
    Small image at the top-left corner of the pass, typically your brand logo.
  2. Logo text
    Short label displayed next to your logo, typically your brand name.
  3. Fields
    Add up to two fields in the top-right corner of the pass, such as the customer's first and last name. Use the Add variable { } icon to insert a personalization variable that will adapt to each of your customers.
🟠 Primary

The Primary section controls the central strip of the pass front and is the most visually prominent area. It typically contains an image banner. Use it to highlight key information at a glance, such as a loyalty tier, a discount value, or an event name.

cw_primary-apple_en-us.png
  1. Strip background
    Banner image in the center of the pass.
  2. Fields
    Add a field to display key information, such as the loyalty program name or membership tier above the banner image. Use the Add variable { } icon to insert a personalization variable that will adapt to each of your customers.
🟡 Secondary

The Secondary section displays additional fields below the primary section. Add up to four fields, to show supporting details such as the program name, expiry date, or membership level. Use the Add variable { } icon to insert a personalization variable that will adapt to each of your customers. You can also set the text alignment for each field: left, center, or right.

cw_secondary-apple_en-us.png
🟢 Barcode

The Barcode section allows you to configure the scannable code on the pass that can be used at a point of sale or event entrance. It can be a QR code or a standard barcode and its value can be personalized per contact.

To configure a barcode: 

  1. Toggle the Show barcode option.
  2. Select the barcode format, for example Code128 or QR code.
  3. Select the barcode encoding, for example ISO88591.
  4. Enter the barcode value to encode, typically a unique contact ID. Use the Add variable { } icon to insert a personalization variable that will adapt to each of your customers. 
    cw_barcode-apple_en-us.png
  5. In the Alternative text field, enter a human-readable text displayed below the barcode, for example the contact ID. Use the Add variable { } icon to insert a personalization variable that will adapt to each of your customers. 

Step 1: Set your wallet pass style

wallet_style_en-us.png

The Style tab lets you define the colors of your wallet pass text and background. 

Click the color icon next to the element for which you want to apply a specific color. You can either choose a color, enter its code, or use your brand color.

Step 2: Set up and personalize your wallet pass

The Content tab is where you define the text, images, and data displayed on your wallet pass. Use it to:

Add and move fields in your pass

To insert and move a field inside your wallet design: 

  1. In the wallet editor, open a section in which you want to add or move a field.
  2. Click + Add field to insert a new field, and fill it with its label and value. 
  3. Click Save
  4. Click and hold the drag icon drag-icon.png next to your field name, and drag the field where you want to place it.
    wallet_add-move-field_en-us.gif 

Add a barcode to your pass

You can add a barcode to your wallet card design so each contact's card displays a scannable code. This is useful for loyalty programs, event access, or any use case that requires a unique identifier per contact.

➡️  For example
For a loyalty program, you could set the barcode value to a contact's membership number using a personalization variable, and set the barcode text to their full name. Each contact's card will then display a unique, scannable code alongside their name.

To insert a barcode to your wallet design:

  1. In the wallet editor, open the barcode section of your Apple or Google Wallet design.
  2. Activate the Show barcode option. wallet_configure-barcode_en-uus.gif
  3. Select a barcode format. The following formats are available for both Apple and Google Wallet:
    • QR code, a square matrix code, widely supported by smartphone cameras.
    • Code 128, a linear (1D) barcode, often used for alphanumeric data such as order or membership numbers.
    • Aztec, a compact square code that works well in low-resolution printing conditions.
    • PDF417, a stacked linear barcode that can store larger amounts of data, commonly used for transport or ID documents.
  4. If the wallet is for Apple Wallet, select an encoding to define how the barcode data is encoded:
    • ISO88591, standard Western European character encoding.
    • ISO88591 Short, a compact variant of ISO-8859-1.
    • UTF8, supports a wider range of characters, including accented characters and non-Latin scripts.
  5. Enter the barcode value. This is the data encoded in the barcode, the information a scanner will read. You can enter a fixed value or insert a personalization variable (for example, a loyalty card number unique to each contact).
  6. (Optional) Enter an alternative text. This is the human-readable text displayed below the barcode. You can enter a fixed value or insert a personalization variable.

Insert personalization variables to your pass

You can personalize each contact's wallet card by inserting contact attributes or loyalty variables directly into your wallet design. It allows you to display individual information, such as a contact's name or loyalty points, on each generated card.

To insert a personalization variable in your Wallet design:

  1. In the wallet editor, open a section and add or choose a field in which you want to insert a variable.
  2. Click the Insert variable { } icon.
  3. Select the variable category:
    • Contact attributes to insert contact-level information, such as first name, last name, or email address.
    • Loyalty to insert loyalty-specific data, such as points balance or tier name.wallet_insert-personalization_en-us.gif
  4. Select the specific variable you want to insert. It is added at the cursor position in the text block.

Your personalization variable is now inserted. When opening their wallet card, each of your contact will see their individual information, here their firstname. 

wallet_variable-inserted_en-us.png

(Optional) Step 3: Translate your pass

✅ Plan availability
Adding more than one translation language is available on Enterprise plans only. For more information, check our pricing page or talk to one of our sales experts.

If you want your pass to reach contacts in their preferred language, you can set up multiple language versions directly from the pass editor. Each contact will automatically receive the version that matches the language stored in their contact attributes:

wallet_translate-pass_en-us.png

➡️ To learn more about how to translate your wallet pass, check our dedicated article Translate your wallet passes in multiple languages.

(Optional) Step 4: Set up geofencing notifications

With Geofence, engage customers at the right place and the right time by sending notifications when they approach one of your store locations.

wallet_geofencing_en-us.png
Add store locations to your Brevo account and set up location-based notifications. Choose which location triggers the notification, customize the message customers will receive nearby, and use the Add variable { } icon to personalize it for each customer.

➡️ To learn more about how to set up location-based notifications, check our dedicated article Send geofencing notifications to wallet pass holders.

Step 5: Save and share your pass

Now that your pass is designed for both Apple and Google Wallet, click Save & quit to save your design. Your pass will be available in Marketing > Wallet.

wallet_top-navigation-bar_en-us.png

Once your pass is ready, share the installation link with your customers. When they tap the link, they are prompted to add the pass to their Apple Wallet or Google Wallet app.

You can distribute the link through any channel, for example:

  • Email or SMS campaigns
    Include the link in a Brevo campaign to reach your contacts directly.
  • Your website
    Add a "Add to Wallet" button or link on a relevant page, such as your checkout confirmation or loyalty program page.
  • Your mobile or web app
    Embed the link at a relevant point in your customer journey.
  • Printed materials or in-store signage
    Convert the link into a QR code that customers can scan on the spot.

➡️ To learn more about how to share your wallet pass, check our dedicated article Boost Wallet card recruitment with different touch points.

⏭️ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo Agency partner.

💬 Was this article helpful?

0 out of 0 found this helpful