# Design passes in the pass builder
The Apple Wallet **pass builder** is a visual designer in the Control Panel. You pick a pass style, fill in branding, fields, and a barcode, watch a live preview, and generate a signed `.pkpass`—no need to write `pass.json` by hand.
## Create a pass
In the Control Panel, go to **Campaigns → Apple Wallet** and click **Create pass**.
## Configure the pass
* **From scratch:** start with an empty pass. Choose a pass style, then set colors, images, fields, barcode, and other options yourself in the sections below.
* **From a template:** click **Load template**, pick a built-in pass in **Select Template** (boarding pass, coupon, event ticket, generic, or store card), and confirm. The form prefills pass style, colors, images, pass fields, barcode, and basic information. Edit any value or change the style as needed. Pushwoosh replaces the template's team and Pass Type IDs with your application's values.
### Choose a pass style
Under **PASS STYLE**, pick one of the five Apple Wallet pass styles. The style controls the layout and which field areas and images are available:
* **Boarding Pass**
* **Coupon**
* **Event Ticket**
* **Store Card**
* **Generic**
If you start from scratch, pick the style before you add fields and images.
Switching the style resets style-specific fields.
### Add pass name and description
Under **BASIC INFORMATION**, fill in:
| | |
| :---- | :---- |
| **Pass Name** | The pass title, and the source name shown on update notifications. |
| **Description** | A short description of the pass. |
| **Logo Text** | Text shown next to the logo (used when no logo image is uploaded). |
### Set colors and images
#### Colors
Under **COLORS**, set:
* **Background Color:** the pass background.
* **Foreground Color:** main text and icons on the pass.
* **Label Color:** color of field labels (for example, `FROM`, `GATE`).
To set or change a color, click its field and pick a color in the picker.
#### Images
Under **IMAGES**, upload **Icon** and **Logo** (both required). Optional images depend on the pass style.
Click **Choose file** next to each image slot. Upload PNG or JPEG files. Pushwoosh processes each image into the resolutions Apple requires (@1x, @2x, @3x) when it generates the pass.
### Fill in pass fields
Under **PASS FIELDS**, add the text and values that appear on the pass. Which groups you see depends on the pass style:
* **Header fields (top of pass):** Boarding Pass, Event Ticket
* **Primary fields (main content):** all styles
* **Secondary fields (supporting info):** all styles
* **Auxiliary fields (extra details):** all styles
* **Back fields (flip side of pass):** all styles
Click **+ Add Field** in each group you need.
For each field, set:
| | |
| :---- | :---- |
| Key (ID) | Unique field identifier (generated automatically). |
| Label | Short label on the pass (for example, `FROM`). |
| Value | Value shown on the pass (for example, `SFO`). |
| Change message | Text in the update notification when this value changes. Shown only when the value changes. Use `%@` for the new value (for example, `Gate changed to %@`). |
On the field card, click **Format** to show formatting options. Click **X** to remove the field.
#### Formatting options
* **Value format:** Text, Date & time, or Number/currency.
* **Text alignment:** Default (Natural), left, center, or right.
* **Data detectors** *(back fields only):* turn phone numbers, links, addresses, and calendar events into tappable content on back fields.
### Add a barcode
Under **BARCODE**, choose a format and enter the data to encode:
1. **Barcode Format:** choose how the barcode looks and what type of scanner can read it.
* **QR Code (recommended):** square code that most phones and scanners read easily. Best for coupons, loyalty cards, and most passes.
* **PDF417:** wide barcode made of several rows of lines. Often required for airline or transit boarding passes.
* **Aztec:** compact square code, similar to QR. Common on event and transit tickets.
* **Code 128:** classic vertical-line barcode. Choose this only if your scanner or POS system requires a 1D barcode.
2. **Barcode Message:** the value encoded in the barcode (for example, a ticket or membership number).
3. **Alt Text (optional):** text shown below the barcode on the pass.
### Set expiration and status
Under **EXPIRATION & STATUS**, control when the pass is shown, when it expires, and whether it is still valid:
* **Relevant Date (when to show pass):** date and time when the pass may appear on the lock screen.
* **Expiration Date (when pass expires):** date and time after which the pass is grayed out in Wallet.
* **Mark as Voided (invalidate this pass):** checkbox to invalidate the pass so it is no longer usable.
### Style-specific and advanced options
* **Transit type** *(Boarding Pass only):* Air, Train, Bus, Boat, or Generic.
* **Grouping identifier:** group related passes together in Wallet.
### Location-based relevance *(optional)*
Under **LOCATION-BASED RELEVANCE**, the pass appears when the user is near the locations you add. For each location, set the text shown on the lock screen when the user is nearby. You can add up to 10 locations.
Click the map, search an address, paste coordinates, or import a geozone to add a point. Drag the marker to fine-tune the position.
A **max distance** (in meters) controls how close the user must be for the pass to stay relevant.
**Use case examples**
* **Retail:** a loyalty card or coupon surfaces when the customer is close to your store. Lock screen text might say you are near the shop and remind them to use the pass.
* **Events:** an event ticket appears when the user is near the venue (stadium, theater, or festival grounds) so they can find the pass quickly at the door.
* **Travel:** a boarding pass becomes prominent near the departure airport or terminal, so the passenger sees gate or flight details on the lock screen before opening Wallet.
* **Hospitality:** a coupon or membership pass can show up near a café or hotel location you define.
### Enter a User ID
Enter the Pushwoosh [User ID](/product/pushwoosh-knowledge-hub/users-userids/#how-are-users-and-devices-related) for the person who will receive this pass. Pushwoosh issues the pass to that user and lists it under **USER** on **All passes**.
### Preview and validate
A **live preview** updates as you edit, so you can see roughly how the pass will look in Wallet.
To check the pass against Apple's specifications without creating it, click **Validate pass**. The builder flags missing required images and other problems.
## Generate the pass
Select **Generate**. Pushwoosh validates the pass, processes the images, and signs the package. Generation takes a few seconds, after which the pass appears in your pass list.
For editing (including update by serial number), downloading, sharing, and deleting passes after generation, see [Manage existing passes](/product/messaging-channels/apple-wallet-passes/#view-and-manage-existing-passes).
## Manage passes via API
Everything the pass builder does is also available through the [PassKit Designer API](/developer/api-reference/apple-wallet-passkit-api/): create, update, list, download, and delete passes.
## Configure the pass
* **From scratch:** start with an empty pass. Choose a pass style, then set colors, images, fields, barcode, and other options yourself in the sections below.
* **From a template:** click **Load template**, pick a built-in pass in **Select Template** (boarding pass, coupon, event ticket, generic, or store card), and confirm. The form prefills pass style, colors, images, pass fields, barcode, and basic information. Edit any value or change the style as needed. Pushwoosh replaces the template's team and Pass Type IDs with your application's values.
### Choose a pass style
Under **PASS STYLE**, pick one of the five Apple Wallet pass styles. The style controls the layout and which field areas and images are available:
* **Boarding Pass**
* **Coupon**
* **Event Ticket**
* **Store Card**
* **Generic**
If you start from scratch, pick the style before you add fields and images.
Switching the style resets style-specific fields.
### Add pass name and description
Under **BASIC INFORMATION**, fill in:
| | |
| :---- | :---- |
| **Pass Name** | The pass title, and the source name shown on update notifications. |
| **Description** | A short description of the pass. |
| **Logo Text** | Text shown next to the logo (used when no logo image is uploaded). |
### Set colors and images
#### Colors
Under **COLORS**, set:
* **Background Color:** the pass background.
* **Foreground Color:** main text and icons on the pass.
* **Label Color:** color of field labels (for example, `FROM`, `GATE`).
To set or change a color, click its field and pick a color in the picker.
#### Images
Under **IMAGES**, upload **Icon** and **Logo** (both required). Optional images depend on the pass style.
Click **Choose file** next to each image slot. Upload PNG or JPEG files. Pushwoosh processes each image into the resolutions Apple requires (@1x, @2x, @3x) when it generates the pass.
### Fill in pass fields
Under **PASS FIELDS**, add the text and values that appear on the pass. Which groups you see depends on the pass style:
* **Header fields (top of pass):** Boarding Pass, Event Ticket
* **Primary fields (main content):** all styles
* **Secondary fields (supporting info):** all styles
* **Auxiliary fields (extra details):** all styles
* **Back fields (flip side of pass):** all styles
Click **+ Add Field** in each group you need.
For each field, set:
| | |
| :---- | :---- |
| Key (ID) | Unique field identifier (generated automatically). |
| Label | Short label on the pass (for example, `FROM`). |
| Value | Value shown on the pass (for example, `SFO`). |
| Change message | Text in the update notification when this value changes. Shown only when the value changes. Use `%@` for the new value (for example, `Gate changed to %@`). |
On the field card, click **Format** to show formatting options. Click **X** to remove the field.
#### Formatting options
* **Value format:** Text, Date & time, or Number/currency.
* **Text alignment:** Default (Natural), left, center, or right.
* **Data detectors** *(back fields only):* turn phone numbers, links, addresses, and calendar events into tappable content on back fields.
### Add a barcode
Under **BARCODE**, choose a format and enter the data to encode:
1. **Barcode Format:** choose how the barcode looks and what type of scanner can read it.
* **QR Code (recommended):** square code that most phones and scanners read easily. Best for coupons, loyalty cards, and most passes.
* **PDF417:** wide barcode made of several rows of lines. Often required for airline or transit boarding passes.
* **Aztec:** compact square code, similar to QR. Common on event and transit tickets.
* **Code 128:** classic vertical-line barcode. Choose this only if your scanner or POS system requires a 1D barcode.
2. **Barcode Message:** the value encoded in the barcode (for example, a ticket or membership number).
3. **Alt Text (optional):** text shown below the barcode on the pass.
### Set expiration and status
Under **EXPIRATION & STATUS**, control when the pass is shown, when it expires, and whether it is still valid:
* **Relevant Date (when to show pass):** date and time when the pass may appear on the lock screen.
* **Expiration Date (when pass expires):** date and time after which the pass is grayed out in Wallet.
* **Mark as Voided (invalidate this pass):** checkbox to invalidate the pass so it is no longer usable.
### Style-specific and advanced options
* **Transit type** *(Boarding Pass only):* Air, Train, Bus, Boat, or Generic.
* **Grouping identifier:** group related passes together in Wallet.
### Location-based relevance *(optional)*
Under **LOCATION-BASED RELEVANCE**, the pass appears when the user is near the locations you add. For each location, set the text shown on the lock screen when the user is nearby. You can add up to 10 locations.
Click the map, search an address, paste coordinates, or import a geozone to add a point. Drag the marker to fine-tune the position.
A **max distance** (in meters) controls how close the user must be for the pass to stay relevant.
**Use case examples**
* **Retail:** a loyalty card or coupon surfaces when the customer is close to your store. Lock screen text might say you are near the shop and remind them to use the pass.
* **Events:** an event ticket appears when the user is near the venue (stadium, theater, or festival grounds) so they can find the pass quickly at the door.
* **Travel:** a boarding pass becomes prominent near the departure airport or terminal, so the passenger sees gate or flight details on the lock screen before opening Wallet.
* **Hospitality:** a coupon or membership pass can show up near a café or hotel location you define.
### Enter a User ID
Enter the Pushwoosh [User ID](/product/pushwoosh-knowledge-hub/users-userids/#how-are-users-and-devices-related) for the person who will receive this pass. Pushwoosh issues the pass to that user and lists it under **USER** on **All passes**.
### Preview and validate
A **live preview** updates as you edit, so you can see roughly how the pass will look in Wallet.
To check the pass against Apple's specifications without creating it, click **Validate pass**. The builder flags missing required images and other problems.
## Generate the pass
Select **Generate**. Pushwoosh validates the pass, processes the images, and signs the package. Generation takes a few seconds, after which the pass appears in your pass list.
For editing (including update by serial number), downloading, sharing, and deleting passes after generation, see [Manage existing passes](/product/messaging-channels/apple-wallet-passes/#view-and-manage-existing-passes).
## Manage passes via API
Everything the pass builder does is also available through the [PassKit Designer API](/developer/api-reference/apple-wallet-passkit-api/): create, update, list, download, and delete passes.