Template Editor Overview

The Reach Template Editor is the web tool used to configure a pass's appearance and fields.

If you just created a new template and clicked the Start Building button, your screen will be open to the template editor.

If you would like to edit an existing template:

  1. Open your project from the dashboard, then click Templates in the navigational header.
  2. Click anywhere in a template's row to see its expanded view, then click Edit Design. If you have only one template in the project, the initial view is expanded.

Header

As you design a template, information and options are displayed in the header.

At left are the template name and ID, along with its pass type name and icon. At right are three buttons:

  • Exit returns you to the project dashboard without saving anything. Make sure to first click the Save button to save any changes.
  • Test Pass lets you email the pass to yourself so you can preview it on a mobile device. Follow the steps in Pass Distribution Methods: Send Test Pass.
  • Save will your save any changes you have made to the template.

Layout

The pass previewer is on the left side of the page. General Settings and field configuration are on the right. As you design the pass, the changes are reflected in the previewer.

See also: Pass Reference: Layout: Schematics.

General Settings

General Settings are properties that apply to the entire template rather than to a single field. Available properties vary per pass type. Return to these settings at any time by clicking the paint brush icon in the upper right corner of the pass previewer.

Background and Text Colors

Apple Wallet
Set Background and Text Colors.
Note

When using Event Type templates with iOS, foreground color behavior varies depending on background and strip images:

  • When a background or strip image is not included in the pass, field label and value colors are applied.

  • When a background or strip image is included in the pass, the field value color is automatically set to white unless the image is white, in which case the value is set to black.
Google Pay
Choose a Background Color manually or via auto select.
When the Auto select option is enabled, the background color will be set to the prominent color from images you've included in the templates, however the color will not be displayed in the previewer. Please preview the pass on your Android device to verify the actual background color.

Color Selection

Selecting a color is the same for both Apple and Google templates. Click the dropdown arrow in the color field to display the color options. You may click to select a color, or enter hexadecimal or RGB color values.

Icon Image

Apple passes have an Icon image that is displayed on the lock screen along with any notifications. It is also displayed when a pass is provided by an app, e.g., a mail attachment.

Click the image icon pane and a modal window will open, specifying requirements and options.

Requirements vary per image type. See: Pass Reference: Layouts: Images.

Images

Click in the previewer to select an image. A modal window will open, specifying requirements and options.

Requirements vary per image type. See: Pass Reference: Layouts: Images.

Fields

Fields are the placeholders for the key pieces of relevant information for each pass. Pass type determines the number of fields that appear on the front of a pass. The number of fields on a pass also depends on the text in each field. If there is too much text in a field, some fields will not be displayed. See: Pass Reference: Layouts: Fields.

Click in the previewer to select a field and its configuration pane will display on the right side of the screen along with an indicator arrow. The field type and detail are above the configuration pane.

Hover over a field's configuration pane to expose action icons in the upper right corner of the pane.

  • Pencil: Rename field ID, or delete the field.
  • Directional arrows: Move the field to a new position in the layout. Click an arrow to move the field in that direction. You can also change a field's position via the previewer. See: Fields: Position.
  • X: Remove field from layout.
Important

If you edit a field ID, make sure to update any API calls referring to the field.

Important

Google Pay Class fields are edited inline in the previewer. Clicking on a class field will not expose a configuration pane. See Google Class Fields below.

Note

When displayed on an end user's device, text fields on an Google Pay pass will be truncated to the first four lines. The user must click on the field to display the full string. When editing templates, the previewer will always display the full text.

Field Sets

Different pass types have different field sets depending on the purpose, e.g., a Loyalty pass might have a Point Balance field but not a Gate Number field like a Boarding Pass pass would. See: Pass Reference: Layouts: Fields

Advanced Options

Click Advanced Options at the bottom of a field's configuration pane to show/hide additional options. Check the box to enable.

  • Hide this field if the label and value are blank: This will retain the space dedicated for the field. In order to remove the space allocation, you must remove the field from the layout.

  • Notify the user when this value changes: Each field object on an Apple Wallet pass can include an optional change message value. A change message is the text that appears in an alert that is displayed when a pass field's value is changed. Apple Wallet only.
    Important

    The change message must include the escape value %@, which is replaced when the field’s value is changed. See the Change Message Tutorial for details.

    Note

    • If you don’t specify a change message, the passholder isn’t notified when the field value changes.

    • Setting a change message will not trigger sending a notification — the notification is triggered when you change the field value.

    • When multiple fields with change messages are updated at the same time, we cannot control the processing order. That is handled by Apple.

Adding Fields

Field placement behaviors and options vary. Be sure to verify the design on a mobile device.

  • Some field placements allow up to four fields in a single row.
  • Some field placements allow multiple full-width fields in a pass.
  • Adding more fields than can be displayed across the device's screen will introduce scrolling within each placement.

Position

When you hover over a field in the previewer, its boundary will highlight. If the field can be moved, arrows will appear at the edge of the field's boundaries, depending on its current placement. Click an arrow to move the field in that direction.


Apple Back of Pass

Apple Wallet passes include fields on the back of the pass. Click the See back of the pass button to access the fields.

Google Class Fields

Google Pay passes will automatically update with any changes made to class fields. How it works:

  • If a class value class.* is changed, all passes will be changed.
  • On Update Pass, only that pass is updated. Class values are not sent with the update object when updating passes, so there is no effect on other passes.

Any field preceded by class constitutes a class field. For a full list of class fields, please visit the Google Pay documentation.