> For the complete documentation index, see [llms.txt](https://docs.thewalletcrew.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thewalletcrew.io/guides-design/design/loyalty-card-template-configuration.md).

# Loyalty Card Template Configuration

Personalize a loyalty card template for Apple Wallet and Google Wallet: colors, images, barcode, header and front fields, and back-of-card content.

Whether you are a new client who needs to create the template for the passes that will be distributed to customers, or a master of The Wallet Crew who needs to update an existing template, this article is a guided tour of the template designer. The goal is to configure a pass template that reflects the brand identity, displays the right information to customers, and ensures a seamless experience across Apple Wallet and Google Wallet.

## Architecture

Apple and Google have their own loyalty pass templates as you can see below.

{% tabs %}
{% tab title="Apple" %}

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FBbjxTt8fWc17cmmKrPLy%2Fdesign-loyalty-card-architecture-apple.png?alt=media&amp;token=a48c21a4-6fe5-4c82-bee7-f7b6f6d069d1" alt="Architecture - Apple"><figcaption><p>Check where the header, front fields and back fields sit in the Apple loyalty layout.</p></figcaption></figure>
{% endtab %}

{% tab title="Google" %}

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FZzJJtHAUqB1AlBLK4nwB%2Fdesign-loyalty-card-architecture-google.png?alt=media&amp;token=6b5e0766-d9ce-4bae-b173-821e8c10dd02" alt="Architecture - Google"><figcaption><p>Check how Google splits the same loyalty card into points, account and messages areas.</p></figcaption></figure>
{% endtab %}
{% endtabs %}

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center">Apple pass</td><td data-object-fit="contain" data-alt="Apple example loyalty card "><a href="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2F3HTF0raNps6AjxLdaCKK%2Fdesign-loyalty-card-apple-example-loyalty-card-3.png?alt=media&amp;token=c5d95f71-bf9b-456b-b414-44d57d43441f">design-loyalty-card-apple-example-loyalty-card-3.png</a></td></tr><tr><td align="center">Apple pass</td><td data-object-fit="contain" data-alt="Apple example loyalty card "><a href="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FB0yY4vj4GoA5t4pJuSCH%2Fdesign-loyalty-card-apple-example-loyalty-card-2.png?alt=media&amp;token=983317c6-bc3d-4abc-a0ff-822e167d5425">design-loyalty-card-apple-example-loyalty-card-2.png</a></td></tr><tr><td align="center">Apple pass</td><td data-object-fit="contain" data-alt="Apple example loyalty card "><a href="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FdYTfGor2yipBBTxLLxq6%2Fdesign-loyalty-card-apple-example-loyalty-card.png?alt=media&amp;token=072864e6-5b62-47fa-ac7a-dfcf616e9f78">design-loyalty-card-apple-example-loyalty-card.png</a></td></tr></tbody></table>

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center">Google pass</td><td data-object-fit="contain"><a href="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2F9lLIIOnTwgCm0tELCNvQ%2Fdesign-loyalty-card-capture-d-e-cran-2026-01-26.png?alt=media&amp;token=5157706d-fae2-43a8-8290-e52dc5fb6012">design-loyalty-card-capture-d-e-cran-2026-01-26.png</a></td></tr><tr><td align="center">Google pass</td><td data-object-fit="contain"><a href="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2F532V5smCuiYijIi1jcby%2Fdesign-loyalty-card-capture-d-e-cran-2026-01-26-3.png?alt=media&amp;token=23ab6e7e-c8bb-4d11-b3f3-f810d0cdbaef">design-loyalty-card-capture-d-e-cran-2026-01-26-3.png</a></td></tr><tr><td align="center">Google pass</td><td data-object-fit="contain"><a href="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FgV44BJ5SHBMyyecGBbZR%2Fdesign-loyalty-card-capture-d-e-cran-2026-01-26-2.png?alt=media&amp;token=4d8e95ed-8ad7-4eb2-a505-1d8c7914eebc">design-loyalty-card-capture-d-e-cran-2026-01-26-2.png</a></td></tr></tbody></table>

{% hint style="info" %}
**To go further, find all the details of the two versions:**
{% endhint %}

**Apple:**

{% embed url="<https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html>" %}

**Android:**

{% embed url="<https://developers.google.com/wallet/retail/loyalty-cards/resources/template>" %}

### How to configure it on The Wallet Crew

The Wallet Crew provides a **template designer** that is used to **personalize the loyalty cards** distributed to customers. Let’s see in detail how to personalize each section.

## Apple

**Let’s take a look at the different sections of the Apple template designer.**

### General section

The general section has two mandatory fields:

* **Description**: a brief description of the pass, that will appear on the back of the card
* **Organization name**: the name of the company or brand issuing the pass

It is also possible to put a text next to the logo, **activate the sharing of the pass** so that customers can pass it on to other people, the “void feature” for the coupons, and a relevant and expiration date that are used for event tickets.

The section also **defines the distance** from a relevant latitude and longitude at which the pass is relevant, for **geofencing notifications.**

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FtfEQWuVD7cR2vnV6nkIe%2Fdesign-loyalty-card-general.png?alt=media&amp;token=053305f0-757f-4b9b-bc72-e2644d8b2c20" alt="Template designer general section"><figcaption><p>The section where the general information is personalized</p></figcaption></figure>

### Barcode

Choose the **type of barcode** that is compatible with the point-of-sale software. The barcode value corresponds to the **identifiers** that allow the card to be identified by the terminal in the store. Finally, the alternate text can be used to display the barcode data in case the barcode cannot be scanned.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FyWf24E3RJvWBaRAFs0Fn%2Fdesign-loyalty-card-barcode.png?alt=media&amp;token=bdc2d54a-4c2b-41c9-b095-3d0ffcde2566" alt="Template designer barcode"><figcaption><p>The section where the barcode preferences are personalized</p></figcaption></figure>

### Colors & Images

To change the background color of the card, simply **add the color code in the fields** provided for this purpose. To add an image, upload it from the device in use.

### Header Fields

This section is particularly important in the Apple version, as the cards are **stacked on top of each other**. Only the header of the card remains visible. Therefore, it is important that this section catches the eye and encourages clicking on the card, especially by displaying the most important information such as loyalty points, or other relevant information.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FHoXXKAzIQnMEZw5OYLI8%2Fdesign-loyalty-card-header-fields.png?alt=media&amp;token=d0b7ff58-7878-415f-92c3-9e6b6ead2ffa" alt="Template designer header fields"><figcaption><p>The section where the header fields are personalized</p></figcaption></figure>

### Front fields

The front fields are the fields that are used to **display information in the recto of the card**, under the strip image. The label is the same for every user (per language), but the value can be customized to display the name of the customer or the number of points.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FPFpdsL6hwh4aTU9bWNpm%2Fdesign-loyalty-card-front-fields.png?alt=media&amp;token=4992a22c-24c9-4368-a447-d82956b77a0f" alt="Template designer front fields"><figcaption><p>The section where the front fields are personalized</p></figcaption></figure>

{% hint style="warning" %}
**To personalize the front fields, ask the tech team which dynamic value to write.**
{% endhint %}

### Backfields

This section, located on the back of the loyalty card, includes several useful pieces of information for the customer:

* How the loyalty program works
* Available rewards
* Receipts
* Personalized offers and messages
* The ability to add links, such as the location of their favorite store, a link to update their account and preferences, access to the terms and conditions, etc.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2F9Rd34qVDrxdEzyMqW9mI%2Fdesign-loyalty-card-backfields.png?alt=media&amp;token=9e6fc3b5-e997-4903-a906-934800a90f17" alt="Template designer backfields"><figcaption><p>The section where the backfields are personalized</p></figcaption></figure>

### Other sections

On Apple, there are four other sections:

* **Locations**: Used for geofencing notifications.
* **Beacons**: Also used for geofencing notifications.
* **Associated store identifier**: Used to link an application published on the Apple Store
* **NFC**: A feature that allows customers to exchange digital content, and connect electronic devices with a touch.

{% hint style="warning" %}
**Please contact The Wallet Crew to activate these features**
{% endhint %}

{% hint style="danger" %}
**Once the modifications are done, remember to click “save” at the top of the template designer!**
{% endhint %}

***

## Google

**The Google template designer is a bit different than the Apple one.**

{% hint style="warning" %}
**A few things worth knowing before configuring the Google template:**
{% endhint %}

1. Some fields such as “issue” and “program name” are **mandatory**
2. Google preconfigures the fields based on their intended values, so it’s best not to enter the customer’s name in the loyalty points field, for example, even if that is how it should appear on the pass
3. Dynamic values (e.g., {{firstName}}) should be **placed in dedicated dynamic fields**. ‘Label’ fields are intended for static text only.

**Let’s take a look at the different sections.**

### General section

The general section has three **mandatory fields**:

* **Issuer**: the name of the brand or company that issues the pass
* **Program name**: it appears on the front of the pass, and is typically the name of the loyalty program
* **State**: the state of the pass (active, expired, completed, inactive)

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FASRbAora5JsQTlGDML8v%2Fdesign-loyalty-card-google-general.png?alt=media&amp;token=c5149b99-22c0-4528-ba92-286fffce8d00" alt="Google template designer general section"><figcaption><p>The section where the general information is personalized</p></figcaption></figure>

### Barcode

Choose the **type of barcode** that is compatible with the point-of-sale software. The barcode value corresponds to the **identifiers** that allow the card to be identified by the terminal in the store. Finally, the alternate text can be used to display the barcode data in case the barcode cannot be scanned.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FmQ0iPX5TvkiALEeUaKiz%2Fdesign-loyalty-card-google-barcode.png?alt=media&amp;token=86b42552-6337-4dac-9f24-3dfe1f4e7d79" alt="Google template designer Barcode"><figcaption><p>The section where the barcode is personalized</p></figcaption></figure>

### Multiple devices and holders

Configuring a template means deciding **whether the customer can share their pass or not**. Google offers three options:

* **Multiple holders**: it means that the customer can share their pass with anyone
* **One user all device**: a customer but with several devices (a watch for example)
* **One user one device**

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2Fk5SegSPTtxkW2W4oJ1zh%2Fdesign-loyalty-card-google-multiple-holders.png?alt=media&amp;token=a210d543-cbc9-40d6-b86b-38e590b99429" alt="Google template designer multiple holders"><figcaption><p>The section that decides whether a customer can share their pass or not</p></figcaption></figure>

### Colors & Images

To change the background color of the card, simply **add the color code in the fields** provided for this purpose. To add an image, upload it from the device in use.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2Fbii76tBrqzAjM5Rzoz8K%2Fdesign-loyalty-card-google-images-colors.png?alt=media&amp;token=428eb33e-e586-43a4-a27f-d373b9b7573e" alt="Google template designer images and colors"><figcaption><p>The section where the colors and images are personalized</p></figcaption></figure>

### Account

The account section holds the **name of the customer** and their **identifier**.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FbJpEicGn1cLNWZSozA7E%2Fdesign-loyalty-card-google-account.png?alt=media&amp;token=d279fd53-9c04-4a97-a426-9107c9cae850" alt="Google template designer account section"><figcaption><p>The section where customer names and identifiers are configured</p></figcaption></figure>

{% hint style="warning" %}
**Please note that it is an optional field and that a dynamic value cannot be used on the label field.**
{% endhint %}

### Additional links

This appears on the back of the card, and can carry the **link of a store or a website**.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FRDt6LNvZXZ8Vr0sqpv6a%2Fdesign-loyalty-card-google-additional-links.png?alt=media&amp;token=4bb914db-be92-4c5d-9635-349ace8aab50" alt="Google template designer additional links"><figcaption><p>The section where additional links are added</p></figcaption></figure>

### Loyalty Points, Rewards and Rewards Tiers

Those fields are used to set up the **loyalty points**, and the **rewards** or **rewards tiers** (status of the loyalty program for example).

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FiSNu328xE69nNYCUroU2%2Fdesign-loyalty-card-google-points.png?alt=media&amp;token=9a7692b8-ca9a-45e6-a04e-45a121d7ac59" alt="Google template designer points" width="375"><figcaption><p>The section where the points and rewards of the pass are configured</p></figcaption></figure>

### Messages

This section, located on the back of the loyalty card, includes several **useful pieces of information** for the customer:

* How the loyalty program works
* Available rewards
* The ability to add links, such as the location of their favorite store, a link to update their account and preferences, access to the terms and conditions, etc.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2FagPOr8YX0uuDJAkbMEmJ%2Fdesign-loyalty-card-google-messages.png?alt=media&amp;token=d8ecaa4f-6631-4303-af54-86a3ba237875" alt="Google template designer messages"><figcaption><p>The section where the backfields of the pass are personalized</p></figcaption></figure>

### Value added opportunities

This section adds a **small section at the bottom of the loyalty card**. This is used to display offers, or news.

<figure><img src="https://493872178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F96iMF0cPuLTC7ZRnUWG9%2Fuploads%2Fk2v7E51dv1mmnVYZyN1t%2Fdesign-loyalty-card-google-added-value-opportunities.png?alt=media&amp;token=c19e091a-40dd-466b-a8eb-80bced864b48" alt="Google template designer added value opportunities"><figcaption><p>The section where the area at the bottom of the pass is personalized</p></figcaption></figure>

{% hint style="danger" %}
**Once the modifications are done, remember to click “save” at the top of the template designer!**
{% endhint %}

## FAQ

<details>

<summary><strong>Do I need to save my configuration and update all the passes?</strong></summary>

Once the template has been edited, there are **two options:**

* Saving the configuration without pushing an update on all passes: this is the best option if there are a lot of passes. The configuration can be saved and an update scheduled during the night, to avoid the impact of mass updating.
* Saving the configuration and pushing an update: this is the best option for tests, or when only a few passes exist in the environment.

</details>

<details>

<summary><strong>How to modify the configuration for another language?</strong></summary>

The design of the pass can be modified for each language. Clicking "general" in the menu allows a language to be added. It then appears on the template designer and can be edited.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.thewalletcrew.io/guides-design/design/loyalty-card-template-configuration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
