# Checkout Themes Editor

The **Checkout Themes** editor enables merchants to customize the layout and designs of the Verifone Central checkout page and update it with their logo, font styles, and color options. 

The checkout service offers merchants the possibility to customize the shopping cart experience (Hosted Payments Page, Payment Link, iFrame) using the Verifone Central Checkout Themes editor or via API.

Verifone Central provides merchants with a friendly way to create their own checkout page and customize it with their logo and different colors. The checkout themes are created and stored, so they can be used by merchants in the Pay by Link or in the checkout itself. 

{% embed url="<https://vimeo.com/1127706295/56ecfa79ba>" %}

## Availability <a href="#availability" id="availability"></a>

This feature is available for **Merchant Cashier** and **Merchant Supervisor** roles.&#x20;

## Benefits <a href="#benefits" id="benefits"></a>

* Merchants can use themes to change the branding of the payment link or checkout page, so it matches their company guidelines
* Merchants are provided a page on which they can create/update/delete the shopping cart template
* Reduced complexity for merchants who do not use the API
* Preview window to visualize the new theme
* Customize the look and feel of your checkout page by adding a logo and choosing a color pattern to match your company's brand

## Create a checkout theme in Verifone Central  <a href="#creating-a-checkout-theme-in-verifone-central__00a0" id="creating-a-checkout-theme-in-verifone-central__00a0"></a>

To create a new checkout theme in Verifone Central, follow these steps:

1. Log in to your Verifone Central account.&#x20;
2. Navigate to the **Administration** tab and click on the **Checkout Themes** section from the drop-down menu. &#x20;

   <div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/1_51.JPG" alt=""></div>
3. Click on the **Add theme** button.
4. On the *Add Theme* page, provide the following information:
   * **Theme name** – used to identify the name of the theme you can use for checkout on the Pay by Link page.
   * **Organization** – By selecting an organization, you apply a checkout theme to that organization
5. Click **Save theme**.

   <div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/1_110.JPG" alt="" width="563"></div>

{% hint style="info" %}
The maximum number of themes that can be created on an organization level is set to 15. To create an additional theme, you will have to delete an existing theme.
{% endhint %}

### Customizing a checkout theme  <a href="#customizing-a-checkout-theme__00a0" id="customizing-a-checkout-theme__00a0"></a>

After saving your new theme, you can now customize it by applying your logo as well as colors or fonts of your choice. To do this, follow the steps below:&#x20;

1. Click on the **Customize theme** button.

   <div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/2_80.JPG" alt="" height="998" width="562"></div>
2. After clicking, a sidebar to customize your theme will appear on the screen. Choose what you want to customize. You can customize the logo, background color, font name and color and button text font and color.

   <div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/Themes3.jpg" alt=""></div>
3. In the sidebar, the following areas can be edited:
   * **Logo** – you can add the company logo by drag and drop<br>

     <div data-with-frame="true"><figure><img src="https://verifone.cloud/sites/default/files/inline-images/Themes4.JPG" alt=""><figcaption></figcaption></figure></div>
   * **Background** - you can edit the background color of your checkout page and the shopping cart template. There are two editing sections:
     * **Background color** – where you can set the background color of the checkout page. After selecting the color, click the **Apply** button in the lower-right corner of the section.
     * **Frames background color** – where you can set the background color of the shopping cart template. After selecting the color, click the **Apply** button in the lower-right corner of the section.<br>

       <div data-with-frame="true"><figure><img src="https://verifone.cloud/sites/default/files/inline-images/Themes5.jpg" alt=""><figcaption></figcaption></figure></div>
   * **Typography** – you can select font styles as well as font colors. There are three editing sections:
     * **Font family** – where you can select one of the predefined font styles from the drop-down menu
     * **Heading font color** – where you can customize the font color for the payment method on the checkout page. After selecting the color, click the **Apply** button in the lower-right corner of the section.
     * **Body font color** – where you can customize the font color of the security fields (Card number, Expiration date, CVV) and Reference order as well as Customer name. After selecting the color, click the **Apply** button in the lower-right corner of the section.<br>

       <div data-with-frame="true"><figure><img src="https://verifone.cloud/sites/default/files/inline-images/Themes6.JPG" alt=""><figcaption></figcaption></figure></div>
   * **Buttons** – where you can select the button color for the Payment button and the color of the text displaying the currency and money amount inside the button. There are two editing sections:
     * **Button background color** – where you can select the button color for the main payment button
     * **Button font color** – where you can customize the color of the text displaying the currency and sum inside the payment button<br>

       <div data-with-frame="true"><figure><img src="https://verifone.cloud/sites/default/files/inline-images/Themes7.jpg" alt=""><figcaption></figcaption></figure></div>
4. Click the **Apply changes** button from the lower-right corner of the page to see a preview of the page. The changes will be saved when you update the checkout theme page.&#x20;
5. Click **Return to the theme** page. You will now be able to see the updated colors, fonts, and logo on your theme page.

   <div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/Themes8.jpg" alt=""></div>
6. Click on **Save theme** to save all your changes.

### Mark a theme as default <a href="#mark-a-theme-as-default" id="mark-a-theme-as-default"></a>

Marking a theme as default allows you to automatically use it for your Checkout and Pay by Link pages without having to select it manually. You can override the default theme when creating URLs by specifying/selectingspecifying / selecting a custom theme.

{% hint style="info" %}
Each organization can have its own separate default theme.
{% endhint %}

To make a Checkout theme as default, select the **Make Default Checkout Theme** option, when creating a new theme or editing an existing one.

<div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/1_114.JPG" alt=""></div>

All Checkout themes marked as default can be seen under the *Default Theme* column.

<div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/1_115.JPG" alt=""></div>

### Delete a checkout theme <a href="#delete-a-checkout-theme" id="delete-a-checkout-theme"></a>

If you decide you want to delete a checkout theme that you have created, press the **Delete** button.

<div data-with-frame="true"><img src="https://verifone.cloud/sites/default/files/inline-images/image_0.png" alt="" width="563"></div>

On clicking the *Delete* button, a “Delete my new theme?” pop-up window will appear showing the warning message: *"If this theme is assigned to one or more of your organizations, your default theme will be used after deletion"*. After clicking the **Delete** button, your theme will be deleted permanently. Your theme cannot be used again.

## Create a checkout theme via the Checkout API  <a href="#create-a-checkout-theme-via-the-checkout-api__00a0" id="create-a-checkout-theme-via-the-checkout-api__00a0"></a>

To create a checkout theme via the checkout API, visit our [API](/api-reference/open-api-references/checkout/theming.md) documentation.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verifone.com/verifone-central-getting-started/verifone-central/administration-tools/checkout-themes-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.