Checkout design

Learn how to customize your international checkout page to include your brand logo, favicon, and colors.

Upload your logo 

To upload your logo to your checkout page:

1. Go to Zonos Dashboard → Settings → Design.
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 → Design.
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 → Design.
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 on

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 → Design.
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.