DOCS

Checkout design

/

Checkout design

Add your brand logo, favicon, and colors.

Enhance your checkout experience with a personalized touch by customizing your international checkout page with your logo, favicon, and brand colors.

To upload your logo to your checkout page:

  1. Go to Dashboard -> Settings -> Checkout -> Appearance.
  2. Click Upload new logo.
  3. Choose the file from your computer, then click Open.

Upload your favicon

To upload your favicon to your checkout page:

  1. Go to Dashboard -> Settings -> Checkout -> Appearance.
  2. Click Upload new favicon.
  3. Choose the file from your computer, then click Open.

Find favicon file to save

If you do not have your favicon file on your computer, follow these steps to pull it from your website before uploading it to Dashboard.

  1. Go to your website.
  2. Right-click on your website page, then choose View page source from the dropdown.
  3. Find the favicon by clicking ctrl+f (or command+f on a Mac), then searching the word "favicon."
  4. Click the link that appears for the favicon to pull the image up.
  5. Right-click on the image and save the image in ICO format.
    1. If your image will not save in ICO format, save it in its current format, then use a program like Convertio to convert the file to an ICO file.

Modify colors

To customize the colors on your checkout page:

  1. Go to Dashboard -> Settings -> Checkout -> Appearance.
  2. Under Colors, click on the color you would like to change.
  3. Choose a preset color or enter the Hex color code of the color you want.

If you need help finding the Hex color code of your brand colors, you can use a color picker extension on your browser to pull the hex color codes from your website.

Elements you can customize color

You can customize the checkout page to have up to three colors:

  • Primary color (for radio buttons, checkboxes, inputs, links)
  • Button color (the color of the checkout button you press to place an order)
  • Header color (the background color of the header)

Preview your checkout design

  1. Go to Dashboard -> Settings -> Checkout -> Appearance.
  2. Click Live preview in the top right of the page.

Troubleshoot live preview not displaying

If the live preview will not display, follow the steps below to generate a mock checkout. After doing this once, the live preview will work correctly without needing the steps below on further previews.

  1. Go to Dashboard -> Orders -> Mock checkout.
  2. Click Generate checkout.

Was this page helpful?