You can customize how the account management modal looks and which features and functionality you want to be shown for customers to manage their accounts. You decide how much control you want your customers to have over their subscriptions by choosing what your customers can and cannot do, and when they'll need to come to you to make changes or to access elements of their account.
Self service account management menu items
You decide what functionality you want to include in the account management. We suggest that, at a minimum, your customers be able to update their personal and payment details. Depending on the service you offer, you may also want to allow them to change their subscription at any time.
To configure which self service elements you want to be shown in the account management, navigate to Settings > Configuration > Checkout and account management settings > Self service.
You can easily switch these options on and off and your preferences can be updated immediately. Remember, the more functionality you allow your customers to use in the self service account management, the lower your contact rate and time spent on customer service, so it's useful to include as much functionality as you can.
To find out more about each of the account management menu items, head over to this article.
Customizing the branding of the account management modal
You can customize the colours, font, and rounding of the account management modal, so that your customers 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. Changes you make here will apply to both your checkout and account management modals.
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 account management modal, as well as its interactive sections and buttons.
Remember to hit, Update Brand Settings after you've made any changes.
