{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","img","accordion","admonition"]},"type":"markdown"},"seo":{"title":"Branding and appearance configuration","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"branding-and-appearance-configuration","__idx":0},"children":["Branding and appearance configuration"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure your drop-in's look and feel in the Unity Portal."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-go-to-the-branding--appearance-page","__idx":1},"children":["Step 1: Go to the Branding & appearance page"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.pxp.io","target":"_blank"},"children":["Unity Portal"]},", go to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant setup > Sites"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select a site."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Services"]}," tab, click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Edit"]}," next to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Drop-in service"]},".",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/edit-drop-in-service-alt.49d545ad67c38a93c4ea33c4f093d4832bd91dd6172d8692b8436e9c6720f8ec.fa48401d.png","alt":"Screenshot of the a site's Services tab in the Unity Portal","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click on ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Branding & appearance"]},". The page opens.",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/drop-in-branding-appearance.b152f9f0aa35f3d0ffccfd43dd7d4c75bf90b12e92af087823d9391e7ed604b3.fa48401d.png","alt":"Screenshot of the Branding & appearance page","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-configure-the-design","__idx":2},"children":["Step 2: Configure the design"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Design"]}," section, go through the options under ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Layout adjustment"]},":",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/branding-layout-adjustment.e60484d01ece9b5e81c999a946bffec622622ad8fb15064ab912ecaba6de54d0.fa48401d.svg","alt":"Screenshot of the Layout adjusment section","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font family:"]}," The font to apply to all of the text in your drop-in, chosen from a pre-defined list.",{"$$mdtype":"Tag","name":"Accordion","attributes":{"title":"View list of available fonts","defaultOpen":false},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Arial"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Inter (default)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Google font"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Lato"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Montserrat"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Noto Sans"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Noto Serif"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Open Sans"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Playfair Display"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Poppins"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PT Sans"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PT Serif"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quicksand"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Roboto"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Roboto Condensed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Roboto Serif"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Roboto Slab"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Rubik"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tahoma"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Times New Roman"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ubuntu"]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Google font:"]}," The Google font to apply to all of the text in your drop-in, set using a direct URL."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Adjust component size:"]}," The percentage by which to increase or decrease the size of all components. By default, this is set to 100%."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Next, go through the options under ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["General color"]}," and ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Button style"]},":",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/branding-general-colors.acae10827af5e269b77f26070e242ba3d8f76db164532417f29c31d8203aee4d.fa48401d.svg","alt":"Screenshot of the Branding & appearance page","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accent color:"]}," The colour (hex code) to use for buttons, links, checkboxes, and focused elements."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Body text:"]}," The colour (hex code) to use for general text, input field labels, and input text."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Container background color:"]}," The colour (hex code) to use for the container's background."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Text color:"]}," The colour (hex code) to use for the button text."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background color:"]}," The colour (hex code) to use for the button's background."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Shape:"]}," The shape of the button. You can choose between square (default) or rounded."]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-configure-the-payment-method-ordering","__idx":3},"children":["Step 3: Configure the payment method ordering"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use this feature, you need to have ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/drop-in/payment-methods"},"children":["enabled at least one payment method"]},"."]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Payment method ordering"]}," section, optionally select a payment method for quick selection. This means the chosen method always appears at the top of the payment selection list, regardless of your other settings. Note that only certain methods are available.",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/payment-method-quick-selection.935a8aaa5f08e0f2fd893516f4f67983300afa3115813702b4d76b53ecf42360.fa48401d.svg","alt":"Screenshot of the Quick selection section","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose an order mode:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dynamic (default):"]}," Automatically order payment methods by most popular and/or customer's last used. If both options are ticked, the customer's last used payment method will be at the top of the list and additional payment methods will be ordered according to their popularity.",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/dynamic-ordering-mode.f4b9362329a69ff90a90772c67f5e65614a0e7d7fabe88ad115b19bad4eafdee.fa48401d.svg","alt":"Screenshot of the dynamic payment method ordering","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Dynamic ordering uses data collected over the last 90 days, with data being fetched once every hour. This means it could take up to an hour for the order of your payment methods to change. For example, if you currently have no data and make a payment with PayPal, it will take between zero and 59 minutes for PayPal to move up to the top of the list."]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Manual"]},": Manually order payment methods by dragging and dropping them.",{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/manual-ordering-mode.bc13f19c0eeb3d7f68b4c0b941889df9c931286d67464328cb4e0949155f7f30.fa48401d.svg","alt":"Screenshot of the manual payment method ordering","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-save-your-configuration","__idx":4},"children":["Step 4: Save your configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you're done with your changes, click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save"]}," in the top right to confirm them. They'll instantly be applied to your drop-in."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/save-branding.b8a3a7b28dc3039ce1bd3c507dcbbc1e014501cb8338185b535f1aca2fddc1ad.fa48401d.png","alt":"Screenshot of saving the Branding & appearance page","withLightbox":true,"className":"screenshot","width":"","height":"","align":"center"},"children":[]}]},"headings":[{"value":"Branding and appearance configuration","id":"branding-and-appearance-configuration","depth":1},{"value":"Step 1: Go to the Branding & appearance page","id":"step-1-go-to-the-branding--appearance-page","depth":2},{"value":"Step 2: Configure the design","id":"step-2-configure-the-design","depth":2},{"value":"Step 3: Configure the payment method ordering","id":"step-3-configure-the-payment-method-ordering","depth":2},{"value":"Step 4: Save your configuration","id":"step-4-save-your-configuration","depth":2}],"frontmatter":{"seo":{"title":"Branding and appearance configuration"}},"lastModified":"2026-03-23T17:02:30.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/drop-in/branding","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}