Sign up

Look & Feel

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.

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 zahls.ch can be displayed with your custom Look & Feel:

Creating a Look & Feel Profile

Navigate to Settings > Look & Feel in the dashboard of your zahls.ch 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.

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.

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

3. Background

  • Main background: Define the color of the general background. This is the background of the entire payment page, excluding the header section.
  • Background header: Define the background color of the header section of the payment page.

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

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.

  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 tools Pages, Paylink, QR Pay, Invoice, Terminal and Donation. Open the desired tool and select the desired profile in the "Look & Feel" section.

Look & Feel ID

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

Related