Customize the `Unified Checkout` Look and Feel {#uc_intro_look_and_feel}
========================================================================

Follow these steps to customize the appearance of `Unified Checkout` in the `Business Center`:

1. Log in to the `Business Center`:  
   Test URL: ` `<https://businesscentertest.visaacceptance.com/ebc2>` `{#uc_intro_look_and_feel_ebc-test-vas}  
   Production URL:` `<https://businesscenter.visaacceptance.com/ebc2>` `{#uc_intro_look_and_feel_ebc-prod-vas}  
   If you are unable to access this page, contact your sales representative. {#uc_intro_look_and_feel_step-1}
   {#uc_intro_look_and_feel_step-1}

2. In the `Business Center`, go to the left navigation panel and choose Payment Configuration \&gt; Unified Checkout. The `Unified Checkout` customer experience page appears:

   #### Figure:

   `Unified Checkout` Look and Feel Merchant Experience ![Image that shows the Unified Checkout Look & feel
   merchant experience page.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-custom-exp-look-800x875.png/jcr:content/renditions/original) {#uc_intro_look_and_feel_step-2}
   {#uc_intro_look_and_feel_step-2}

3. In the Look \& Feel section, click **Configure**. The Look and feel page appears.

4. If you want to use AI to determine the look and feel, under AI brand studio, click **Browse** the upload a screenshot of your website. These components are updated using the colors from the screenshot you provide:

   * Button list background color
   * Card checkout outline and text colors
   * Header and checkout font background colors  
     Proceed to the next steps to manually customize these and other components of the `Unified Checkout` appearance.
5. Under Button customizations, select the options for your button list. These customizations are available:

   **Universal Button Shape**
   :
   Use the Button shape drop-down menu to select if you want a sharp corner, rounded corner, or pill button:

       #### Figure: {#uc_intro_look_and_feel_fig_uc-buttons}

       `Unified Checkout` Button Shapes ![Diagram that shows the Unified Checkout button shapes.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-branding-shape-650x150.svg/jcr:content/renditions/original)

   **Button List**
   :
   Use the color selector or enter a HEX code in the Button list background color text box to customize the background color of your button list. To review the button list preview, see [Button List](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-intro-setup/uc-intro-setup-ebc/uc-ui-config-examples/uc-ui-config-ex-button-list.md "").
   :
   If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.

   **Card Checkout and `Click to Pay` Button**
   :
   Use the card checkout button label drop-down menu to select the text that appears on the checkout button. These text options are available:
   * Pay with card
   * Card payment
   * Checkout with card (default)
   * Debit/Credit payment
   * Donate with card
   * Subscribe with card

   **Card Checkout Buttons**
   :
   Use the button style drop-down menu to select if you want an outlined or filled checkout button. Select the button fill and text colors using the color selector or HEX code:

       #### Figure: {#uc_intro_look_and_feel_fig_uc-button-fill}

       `Unified Checkout` Button Style ![Diagram that shows the Unified Checkout buttons as filled or unfilled.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-branding-style-650x150.svg/jcr:content/renditions/original)

   :
   If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.

6. Under Checkout customizations, select the options for your checkout experience. These customizations are available:

   Font
   :
   Use the font drop-down menu to select the font you want to use. These fonts are available:
   * Inter
   * Monserrat
   * Open Sans
   * Raleway
   * Roboto Slab

       #### Figure: {#uc_intro_look_and_feel_fig_uc-button-example}

       `Unified Checkout` Fonts ![Diagram that shows the different Unified Checkout fonts.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-branding-font-650x460.svg/jcr:content/renditions/original)

   :
   Select the background color using the color selector or HEX code.
   :
   If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.

   Header Customization
   :
   Select the color you want to use in your header using the color selector or HEX code.
   :
   If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.

7. Click **Save and publish** to save your look and feel customization. The Ready to publish popup window appears.

8. If you are done editing, click **Publish now** to publish your changes. If you need to make more changes, click **Keep editing** to return to the Look and feel page. To review your changes, click through the example screens. For more information about the UI previews, see [Look and Feel UI Examples](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-intro-setup/uc-intro-setup-ebc/uc-ui-config-examples.md "").
   {#uc_intro_look_and_feel_enable-uc}