> For the complete documentation index, see [llms.txt](https://docs.thewalletcrew.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thewalletcrew.io/configure/advanced-configuration/wallet/template-configuration/cards-design-colors-images-and-fields.md). # 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.

2. 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.

3. 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.

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.

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. #### **Links** 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.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.thewalletcrew.io/configure/advanced-configuration/wallet/template-configuration/cards-design-colors-images-and-fields.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.