Design a Custom Payment Page Theme to fit your specific branding needs. With a custom theme, you have the ability to style your Payment Page using custom background colors, fonts, and background images.
Creating a Custom Payment Page Theme
To build a custom page theme:
- Go to Setup > ZonePayments Setup > ZP Payment Profiles > select the Payment Profile that you want to customize.
- On the Payment Profile, select Edit, then go to the Payment Page Theme field and click the + sign to begin building a new theme.
On the ZP Payment Page Theme pop-up, name the theme, then optionally customize the following:
General Style Options
Logo Image Override: Upload a logo image to apply to this theme. If a logo is not selected, Payment Pages will default to the logo set on the Payment Profile associated with that Page. See Logo specs for more details.
Primary Color: Select a primary color via color picker or enter a HEX code.
- Primary color is tied to the background color of header and footer of main elements.
Secondary Color: Select a secondary color via color picker or enter a HEX code.
- Secondary color is tied to the background color of main elements.
Primary Accent Color: Select a primary accent color via color picker or enter a HEX code.
- Primary accent color is tied to main Process Payment button, Visit Payment Center link, and outlines of selected fields and checkboxes.
Secondary Accent Color: Select a primary accent color via color picker or enter a HEX code.
- Secondary accent color is tied to currency drop down, invoice search field, page size drop down, currency elements, and email field.
Primary Font: Select a primary font that will be applied to body text.
Border Radius: Define the roundness of corners on element borders. This defaults to 0 with no rounding. The higher the number, the rounder the corners.
Details: Select between Dark and Light rendering. This will render borders and icons as either lighter or darker than the secondary color.
Header Options
Header Font: Select a font for headers.
Bold Headers Checkbox: Make titles bold.
High Contrast Section headers: Enable "high contrast" headers.
Upper Case Headers: Make title text uppercase.
Background
Background Color: Select a primary color via color picker or enter a HEX code.
Background Display: If a background image has been uploaded, select whether the background image displays as a repeating image or as one image that fills the page.
Background Image: Upload a background image.
See background image specifications.
Previewing your theme
Page themes are applied to your Invoice, Sales Order, and Statement Pay pages, see examples below to learn how themes display depending on the Payment Page. To preview a theme, visit any Invoice Pay, Sales Order Pay, or Statement Pay link that has a payment due for the subsidiary of the Payment Profile that the theme applies to.
Note: Clear cache to preview the most updated version of your custom theme.
Statement Pay Example
Invoice Pay Example
Branding Specifications
Logo
Recommended logo dimensions: 500 x 500px.
File Type: PNG
Fonts
Primary Font is tied to the primary color, header and sub-header.
Background Images
Recommended background image dimensions for full page images: Max width 1920px , Max height 1080px.
File Type: .PNG
Recommended background image dimensions for repeated background images: Width 288px, Height 288px.
File Type: .PNG
To avoid display inconsistencies across browsers, it is recommended that the image uploaded as a full page background does not have a distinct focal point. It is expected that an image with a focal point like the below example, may not resize across all browser types.
Example of a background image with a focal point: