If you're using the Billsby checkout to let your customers sign up to a subscription, you can customize what colours, font, and rounding will be displayed, so that they feel as though they've never left your website or app. To do this, navigate to Settings > Configuration > Brand customization
The preview box at the top of the page displays any changes that you make to your brand settings in real time and how they will appear to your customers.
By default, you'll see a standard example of an add-on selection screen that your customer may see during checkout, if you have add-ons associated with your plans. These settings will be applied to all other screens in the checkout, in a way that is consistent with the preview.
Colors
The colors you can customize and where they will be used, include:
Background color
This will be used for the background of the modal, but not for the background of interactive sections within the modal. We automatically assign white for the background of interactive sections.
Header and button color
Headers will appear on both the modal background, directly on top of your chosen background color, and on interactive sections that have a white background. Any buttons not shown in a locked or confirmation state will be shown in the same color as your headers. If a button is disabled for any reason, we'll fade your chosen color down to 50% and use this for the button. All button text will be white, so we recommend using a darker button color so that the text will stand out.
Body text color
Body text will appear on both the modal background, directly on top of your chosen background color, and on interactive sections that have a white background.
Confirmation color
The confirmation color will be used for buttons in a confirmation state, confirmation text as well as confirmation banners. When using your confirmation color for a banner, we'll fade the color down to 20% for the banner's background and then use the color at 100% for any text on the banner.
Error color
The error color will be used for buttons in a locked state, as well as for warning banners. When implementing the error color for a banner, we'll fade the color down to 20% for the banner's background and then use the color at 100% for any text on the banner.
Typography
You can customize the font for your header and body text and choose whether you'd like for your headers to be in 'ALL CAPS' by hitting the toggle. Our supported fonts come from the Google Fonts library, so you have over 1000 fonts to choose from.
Rounding
As well as colors and fonts, we know that the style of the component is also an integral part of a company's brand identity. You can choose a rounding setting for the checkout and account management modal, as well as its interactive sections and buttons.
Remember to hit, Update Brand Settings after you've made any changes.
Once you've completed branding configuration for your checkout, you'll want to customize your checkout functionality to define what options you want to display to your customers.
Self service account management
Any branding changes you apply here will also apply to the self-service account management modal.