Design Passes

Templates control the appearance of and content in Passes. Projects are the containers for your templates. Steps for creating both are detailed here.

Also check out Dashboard Overview to learn about Project menu features and options.

Create a New Project

  1. From your Projects, click the New Project button.


  2. Enter a Project Name, then click to select a Pass Type and Barcode Type.


    When you select a Pass Type, the sidebar updates to display a mobile screen preview of the pass, a list of related use cases, and Platform compatibility. See Pass Types & Layouts for detail about each each pass type.

    When you select a Barcode Type, the sidebar updates to display that change as well. See Barcode Types help make your choice. Select No Barcode if you do not intend to use one.

  3. Click the Save and Continue button, or exit to discard.

Create Templates

If you just created a new Project or opened a Project that does not already have a template, you will be prompted to choose a platform for your first template. Click Apple Wallet or Android Pay to make your selection.


If you need to add a template to an existing project, open the project, click the New Template button, then select Apple Wallet or Android Pay.


  1. Enter a Template Name and Description.



    Name your template with a recognizable name, such as Loyalty Platinum Tier or similar designation. In the Description field, provide enough information to differentiate the template from similar ones, e.g., “15% Off Sale.”

    The Template Name appears at the top of the pass when opened on a device. It is also the source of the pass’s file name as it appears for installation.


  2. Click the Start Building button.

Appearance

Appearance step is where you configure icon and logo images, text, and colors. The page header displays the Appearance button in blue.

  1. Upload and configure images, enter text, and select colors.


    Hover over the question mark icon near each element for more detail.

    See the Reach Reference for image size specifications.

  2. Preview the template in the right side pane.


  3. Click the Field Layout button in the header, or Next: Field Layout in the lower right corner of the page.

Android Pay

Android Pay color schemes are not customizable, so you will only see the options for Logo Image and Full Width Image.

After specifying your logo image, the Android Pay system automatically determines the colors of your pass to match the image. To determine the background color, the system reduces your logo image to a palette of the most prominant colors, and of those colors, chooses the most “vibrant”:

Because these colors are ultimately determined by the Android Pay system, we cannot guarantee that the template displayed in the UI will perfectly correspond to passes on end users’ devices.

Field Layout

Fields are the placeholders for the key pieces of relevant information for each pass. Different project types have different field sets depending on the purpose, e.g., a Loyalty Card project might have a Point Balance field but not a Gate Number field like a Boarding Pass project would.

The page header displays the Field Layout button in blue.

  1. Drag fields onto the previewer to place them.

  2. Click a field name to reveal its configuration pane. You can click the field name in either the left side menu or the previewer.

  3. Enter field values, then click the Apply Changes button. You also have the options to Delete Field or Remove from this layout.

  4. Click the Save & Exit button.

  5. Test your pass on an iOS device. See Send Test Pass.

When displayed on an end user’s device, text fields on an Android 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.

Next Steps

You are now ready to Generate and Distribute Passes based on your template design.