This documentation is currently under development. Certain sections are not yet complete and will be added shortly.
For the complete documentation index, see llms.txt. This page is also available as Markdown.
Design

Cards design (colors, images, and fields)

Design the card itself: background and text colors, logo and center image, field layout, additional information, and links.

Card design

A card is designed to simplify the in-store experience for customers and to match the brand identity.

Graphic design

The "Graphic design" section controls the pictures on the card and its color, which allows the card to be as close as possible to the company's corporate style.

Card color

To adjust the card color:

  1. Press the colored code box and select the desired color for card background;

Card background color picker in the Graphic design section
Check that the selected background color matches the brand reference.
  1. If necessary, change the header and text colors on the card by moving the sliders to the right and following the same steps with color selection (only for cards in Apple Wallet);

Header and text color sliders, available for Apple Wallet cards only
Verify that header and text remain readable against the chosen background.
  1. Check the color on the cards on the right side of the interface.

Card preview panel on the right side of the template editor
The preview panel is where the colors should be confirmed before saving.

❗ Please, note: When the company has a branded color, enter its code in the area next to the colored box. This gives the exact color. Please note that the color of the card can be a solid color only.

Color code field next to the color box, used to enter an exact brand color
Enter the exact color code here rather than picking the shade by eye.

Images on the card

Two images can be placed on the card at the same time: the company logo and the central image.

Image upload areas for the company logo and the central image
Confirm that each image lands in the intended slot before saving.

Apple Wallet card

  1. Upload the logo in the appropriate section. The preferred file type is PNG (with transparent background), 480 x 150px;2.

Upload the center image in the appropriate section. Preferred PNG file type, 1125 x 432px.

Google Wallet card

  1. Upload the logo in the appropriate section. Preferably PNG file type (with the same background color as the card color), minimum size 820 x 820px;2. Upload the center image in the appropriate section. Preferred PNG file type, 1032 x 336px.

❗ Please, note: The image areas can be enhanced and moved with the mouse to select them more accurately.

Fields layout

The "Fields layout" section selects the information that will be displayed on the customer's card.To add fields to the card:1. Select fields from the drop-down list;2. Check the layout of the fields on the cards on the right side of the interface;3. Click Save.

The fields on the card show the information from the variables created for the template and display the information that is relevant to the client. The information inside the fields is updated automatically.

Additional information

The "Additional information" section can carry all the necessary information for the customer, such as:

  • Promotions and news from the company;

  • Terms and conditions of the loyalty program;

  • Company's contacts;

  • Purchase history;

  • Other information that is important to display.

Additional information section with the Add field action
Each entry added here appears on the back of the pass.

To add a new field with information, click the "+ Add field" button and enter its name and description in the fields that appear. To have the field display updated information, add a variable.Fields can be edited, reordered, and removed by clicking on the "Hide" button.

The “Links” section holds links that allow customers to get in touch and reach the relevant websites in one click.

For example:

  • Company website;

  • Order tracking;

  • Online appointment;

  • Stores infos

  • Other links that are important to share.

Links section of the template editor
Verify that each link opens the intended destination before saving.