Customize your checkout design
Zonos Checkout supports a variety of customization options, so you can get your checkout page to look exactly how you want. This quick guide will go over what those options are and how you can use them.
Uploading brand assets
You can upload your brand’s logo and favicon to use in your Zonos Checkout by visiting the “Checkout” page of your Zonos Dashboard and scrolling down to the “Design” section.
Simply select “Upload” on the logo or favicon field, find your image, and then hit “Save”.
Changes should reflect within a few seconds of the upload. You can upload the biggest, best version of your logo that you have, but we recommend keeping it to under 1MB and 600px width for best performance.
Applying brand colors to checkout
You can use the design settings in your Zonos Dashboard to apply your brand colors to your checkout.
You have the ability to change the page’s highlight color, main button color, and main header color.
Changes to checkout colors should reflect within a few seconds of saving.
Additionally, Zonos Checkout supports custom user theming by uploading your own custom CSS.
You can access the custom CSS editor by visiting your checkout’s design settings on the “Checkout” page of your Zonos Dashboard and clicking “Advanced”. Please be aware that Zonos accepts no responsibility for any custom styles you upload, so be sure that whatever changes you make do not break your checkout experience.
You can use the Chrome Web Inspector (or whatever tool you are familiar with) to find what class or ID corresponds to each part of your checkout. Simply right-click on an element in your checkout and select “Inspect element”. From there, you can grab the proper selector and start writing your styles.
Zonos recommends running your styles through a CSS validator to ensure that everything is working properly. We suggest the free, official validator provided by the W3C, which you can find by clicking here.
To view your changes, you can click the “Preview checkout” button on the Checkout settings page in your Zonos Dashboard.