# Loyalty Card Template Configuration

Whether you are a new client who needs to create the template for the passes that will be distributed to your customers, or a master of The Wallet Crew who needs to update an existing template, this article will help you navigate to our template designer. The goal is to configure a pass template that will reflect your brand identity, display the right information to your customers, and ensure 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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FYfVLapjuz0UuSmlMemNh%2FTemplate%20Apple%20card.png?alt=media&#x26;token=f0a1ac09-9f4a-4704-9ec2-c95e29bdaad7" alt="Architecture - Apple"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Google" %}

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FYNBtqEVMkSMj9UsS8fDa%2Floyaltycard2.png?alt=media&#x26;token=5c73ce32-5f39-42eb-bc66-8ee5d9036aaf" alt="Architecture - Google"><figcaption></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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F5i1FCNt3FmNRqxLMiRfO%2FWhatsApp_Image_2026-01-26_at_11.16.31-removebg-preview.png?alt=media&#x26;token=bd116378-2004-43e3-abb2-14aad3c8eb11">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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FMMXclBtcKe3bZSoDPYyo%2FWhatsApp_Image_2026-01-26_at_11.16.31__1_-removebg-preview.png?alt=media&#x26;token=4d842d0e-497f-461f-a334-5dc10076fe0e">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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F3udUB9SwWlGzjoznqZdz%2FWhatsApp_Image_2026-01-26_at_11.16.30-removebg-preview.png?alt=media&#x26;token=0552d62c-53cc-4cd5-963e-cde2ba47c962">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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FMzi1dMZL1NG9s3nvt9Mc%2FCapture%20d%E2%80%99e%CC%81cran%202026-01-26%20a%CC%80%2012.10.55.png?alt=media&#x26;token=7fb398dd-e172-4cc2-bea3-9798b810ba48">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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FTp2HeZbaCrwEbPUgQXOT%2FCapture_d_e%CC%81cran_2026-01-26_a%CC%80_12.12.33-removebg-preview.png?alt=media&#x26;token=529a5043-34a6-4df8-8044-8f93d1b90f12">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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FJDFuHXkTu83srbIWcqwY%2FCapture_d_e%CC%81cran_2026-01-26_a%CC%80_12.11.22-removebg-preview.png?alt=media&#x26;token=7ff16409-256e-4aad-a033-24bac659f4de">design-loyalty-card-capture-d-e-cran-2026-01-26-2.png</a></td></tr></tbody></table>

{% hint style="info" %}
**If you want 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

With The Wallet Crew, you have access to a **template designer** that allows you to **personalize the loyalty cards** you will distribute to your clients. 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

On the general section, you have two mandatory field that you must fill :

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

You also have the possibility of putting a text next to your logo, **activate the sharing of the pass** if you want your customers to be able to share it or not with other people, the “void feature” for the coupons, a relevant and expiration date that are used for event tickets.

You can also **define the distance** from a relevant latitude and longitude that the pass is relevant, for **geofencing notifications.**

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fya2BouNilbO358Oqdr55%2Floyaltycard5.png?alt=media&#x26;token=60a2df54-c592-4939-9893-6f43167e118a" alt="Template designer general section"><figcaption><p>The section where you can personalize the general information</p></figcaption></figure>

### Barcode

Choose the **type of barcode** that is compatible with your point-of-sale software. The barcode value corresponds to the **identifiers** that will allow you to identify the card with your 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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FtnIv9uqf9M3B1bjUsGwI%2Floyaltycard6.png?alt=media&#x26;token=e4a6146a-ae62-454a-bb5b-79cb5863e67e" alt="Template designer barcode"><figcaption><p>The section where you can personalize your barcode preferences</p></figcaption></figure>

### Colors & Images

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

### 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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FVdoZQsBYN7VdYAudUWmr%2Floyaltycard8.png?alt=media&#x26;token=5465d182-2cc7-4b9d-b856-1d8b2b9e08cb" alt="Template designer header fields"><figcaption><p>The section where you can personalize the header fields</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 you will choose is the same for every user (per language), but you can customize the value to display the name of the customer or the number of points.

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F5NcPbaTcDbDEpPwY06Io%2Floyaltycard9.png?alt=media&#x26;token=32a6d32c-1913-40fb-9ba4-14217d8e741f" alt="Template designer front fields"><figcaption><p>The section where you can personalize the front fields</p></figcaption></figure>

{% hint style="warning" %}
**To personalize the front fields please refer to your tech team to find which dynamic value you have 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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FMS1PT14dQLVbbjIp4oMW%2Floyaltycard10.png?alt=media&#x26;token=6d3a21c3-936a-442b-a5e7-d877e88541a4" alt="Template designer backfields"><figcaption><p>The section where you can personalize the backfields</p></figcaption></figure>

### Other sections

On Apple, you also have three other sections :

* **Locations** : Used for geofencing notifications.
* **Beacons** : Also used for geofencing notifications.
* **Associated store identifier** : You can link your application if it's located on Apple Store
* **NFC** : A feature that allows customers to exchange digital content, and connect electronic devices with a touch.

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

{% hint style="danger" %}
**Once you’ve done some modifications, don’t forget to click on “save” on the top of your screen!**
{% endhint %}

***

## Google

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

{% hint style="warning" %}
**Here are a few things you need to know before configuring your 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’s how you’d like it to 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

On the general section, you have three **mandatory fields** that you must fill :

* **Issuer**: the name of the brand or company that issues the pass
* **Program name**: it appears on the front of the pass, it can be the name of your loyalty program for example
* **State**: the state of your pass (active, expired, completed, inactive)

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FhRafclaCJZkcxKjcdGHc%2Fgoogle%20loyalty.png?alt=media&#x26;token=6229bac5-ef8a-47a7-8e25-3926ff4759a0" alt="Google template designer general section"><figcaption><p>The section where you can personalize the general information</p></figcaption></figure>

### Barcode

Choose the **type of barcode** that is compatible with your point-of-sale software. The barcode value corresponds to the **identifiers** that will allow you to identify the card with your 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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FQBxt0EDwM6kThQrmqe0V%2Fgoogle%20loyalty%202.png?alt=media&#x26;token=e191533a-f01f-4526-b227-b4c6d9aa9bca" alt="Google template designer Barcode"><figcaption><p>The section where you can personalize the barcode</p></figcaption></figure>

### Multiple devices and holders

When you configure a template, you need to decide **whether the customer can share their pass or not**. Regarding Google you have three option:

* **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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FyKPoe6WRIOXaeR2EjUoc%2Fgoogle%20template%2010.png?alt=media&#x26;token=4400219f-ecab-4f4c-90fb-5cc807697bce" alt="Google template designer multiple holders"><figcaption><p>The section where you can decide whether a customer can share his pass or not</p></figcaption></figure>

### Colors & Images

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

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FQwCM1G17TeMmKmb8lgfg%2Fgoogle%20template%2011.png?alt=media&#x26;token=47dea18f-fe7e-4fb4-b80c-005181805e9f" alt="Google template designer images and colors"><figcaption><p>The section where you can personalize the colors and images</p></figcaption></figure>

### Account

The account section is where you can put the **name of the customer** and his **identifier**.

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FfeWqiEpouDve4q7FjJnW%2Fgoogle%20template%2012.png?alt=media&#x26;token=27003924-cb4e-4f1d-b131-b097c4971979" alt="Google template designer account section"><figcaption><p>The section where you can configure the names and indentifers of your customers</p></figcaption></figure>

{% hint style="warning" %}
**Please note that it’s an optional field and that you can’t put a dynamic value on the label field.**
{% endhint %}

### Additional links

This appears on the back of the card, you can put the **link of a store or your website**!

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fd7AWnd7cIkaBK42GC9oK%2Fgoogle%20template%2013.png?alt=media&#x26;token=fa2340bb-43d9-4330-9c4f-827f3cb83143" alt="Google template designer additional links"><figcaption><p>The section where you can add additional links</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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FcENBaoMd99eaDkzdSJon%2Fgoogle%20template%2014.png?alt=media&#x26;token=24c386c7-74d3-4bed-8c3f-2f241e07927b" alt="Google template designer points" width="375"><figcaption><p>The section where you can configure the points and rewards of the pass</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://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FOMiiOJXJ5TcEJ5iBZ50Q%2Fgoogle%20template%2015.png?alt=media&#x26;token=d4c94e7e-bf31-4a5e-922b-821f16f97463" alt="Google template designer messages"><figcaption><p>The section where you can personalize the backfields of the pass</p></figcaption></figure>

### Value added opportunities

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

<figure><img src="https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F65P0cCbXmycYlulafMfD%2Fgoogle%20template%2016.png?alt=media&#x26;token=5c65b4e1-ff91-4e9e-8bb3-bc4181d22984" alt="Google template designer added value opportunities"><figcaption><p>The section where you can personalize the section at the bottom of the pass</p></figcaption></figure>

{% hint style="danger" %}
**Once you’ve done some modifications, don’t forget to click on “save” on the top of your screen!**
{% endhint %}

## FAQ

<details>

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

Once you've done editing your template, you have **two options:**

* Saving your configuration without pushing an update on all passes: this is the best option is you have a lot of passes. You can save your configuration and decide to schedule an update during the night to avoid the impact of mass updating.
* Saving your configuration and pushing an update: this is the best option if you are doing some tests or have a few passes in your environment.

</details>

<details>

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

You have the ability to modify the design of the pass for each language. If you click on "general" in the menu, you can add a language. You'll then see it appear on the template designer and will be able to edit it.

</details>


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.
