Look & Feel

In this article, we will show you how to design your payment pages and customer communications by creating Look & Feel profiles that match your corporate design.

Look & Feel profiles allow you to visually present yourself to your customers in accordance with your corporate design: you can use your logo, fonts, and colors.

The following areas of Payrexx can be displayed with your custom Look & Feel:

Pages

Paylink

QR Pay

Invoice

Terminal

Donation

Creating a Look & Feel Profile

Navigate to Settings > Look & Feel in the merchant administration of your Payrexx account to create a profile. The settings are divided into the following sections:

1. Profile name

2. Logo

3. Background

4. Background Terminal

5. Font

6. Buttons

7. E-mail

Configuration of the Look & Feel Profile

You can configure the following settings in the Look & Feel profile:

Setting up a Look & Feel Profile in Payrexx

1. Profile Name

Give your Look & Feel profile a name. Your customers will not see this name. It is only used to identify the profile internally if you are using multiple profiles.

2. Logo

• Shape: Define whether the logo on the payment pages should be displayed as square, rectangular, or round.

• Upload logo: Upload the logo by clicking this button. The recommended dimensions are 160 x 160 pixels.

• Customize link in logo: Define the URL to which the customer will be redirected when they click on the logo. By clicking on the "Multilingual" link, it is possible to enter a separate link for each language.

• Logo background: For logos with a transparent background, the background will be filled with the color defined in this field. The default value for transparent logos is white (FFFFFF).

• Logo border: In this field, you can define the color of the border surrounding the logo. If you do not want a border, simply select the same value as the background color.

• Language selection: Define the color of the language selection here. This is the text link located to the right of the logo.

In the following example, the color "white" was used for the logo background, the logo border, and the language selection:

The header section with the logo in the colors defined under Look & Feel

3. Background

• Main background: Define the color of the general background. This is the background of the entire payment page, excluding the header section. In the following example, the color "light gray" was chosen.

• Background header: Define the background color of the header section of the payment page. In the following example, "dark gray" was chosen.

The two different background colors from the Look & Feel profile

4. Background Terminal

These settings only apply to the e-commerce tool Terminal, where it is possible to choose an image or gradient as the background.

• Main background: Select whether you want an image or a gradient as the background.

• Upload image: If you choose an image, you can upload it here. The image will be displayed as the background behind the actual terminal. Recommended size: 1,920 x 1,080 pixels (Ultra High Definition, 4K: 3,840 x 2,160 pixels).

• Define gradient: If you prefer a gradient, you can create it in the following fields. The gradient starts at the top-left corner with color 1 and ends at the bottom-right corner with color 2.

  • Gradient color 1: Color at the starting point of the gradient (top-left corner).

  • Gradient color 2: Color at the endpoint of the gradient (bottom-right corner).

Terminal background with a gradient

5. Font

• Font family: Select the font to be used on the payment pages.

• Font size: Choose the font size to be used on your payment pages.

• Text color: Define the color for the text used on your payment pages.

• Text color Terminal: If you want to use a different text color in the terminal, you can define it in this field.

• Link color: Set the color for text links.

• Link color (Mouse over): Define the color that a link should change to when the user hovers their mouse over it.

6. Buttons

• Button color: Define the background color of the buttons.

• Button color (Mouse over): Set the color that a button should change to when the user hovers their mouse over it.

• Enable rounded corners: Check the box if you want the corners of the buttons to be rounded.

7. E-mail

• Logo: If you check the "Use individual email logo" box, you can upload a logo that will be used exclusively in the emails. If the box is unchecked, the logo stored under point 2 will be used in the emails.

• Background color header: Define in this field the color of the header section of the emails sent to your customers.

Creating additional Look & Feel profiles

It is possible to create multiple Look & Feel profiles. In each respective e-commerce tool, you can then select which profile to use.

Managing Look & Feel Profiles

Navigate to Settings > Look & Feel to view the saved Look & Feel profiles.

List of saved Look & Feel profiles in Payrexx

1. Set as default: Hover over the Look & Feel profile you want to set as default and click the green button. This profile will be used whenever no specific profile is selected in the respective e-commerce tool.

2. Preview: View the Look & Feel profile from the customer's perspective.

3. Edit: Open the profile in edit mode to make changes.

4. Copy: Use the "Copy" function if you want to create a new profile based on an existing one.

5. Delete: Delete the selected Look & Feel profile.

Using Look & Feel Profiles

Look & Feel profiles can be used in the Pages, Paylink, QR Pay, Invoice, Terminal, and Donation tools. Open the desired tool and select the desired profile in the "Look & Feel" section:

Selecting a Look & Feel profile in the "Terminal" tool

Look & Feel ID

In Payrexx, each Look & Feel profile has its own unique ID. This ID is used to specify which profile should be applied in integrations and gateways.

The ID of the Look & Feel profile is required when using gateways.