Customizing the theme template for your onboarding process is a crucial step in ensuring a cohesive and engaging user experience. There are two primary methods to customize your chosen theme template

Accessing Theme Template Customization:

Customizing theme for New Onboarding:

When you create a new onboarding by clicking the button "+ ADD NEW" on the main project dashboard, a pop-up with the theme template selection and its further customization will appear.

Customizing theme for an Existing Onboarding:

Once you click on the onboarding itself on the onboardings dashboard, you will see the settings sign for the theme template customization in the upper right corner of the onboarding dashboard.

📢 However, you need to bear in mind 2 main conditions prior to start customizing the theme templates:

Key Conditions for Customization:

⚠️ Customization is only possible when the onboarding is in the "In Development" or "AB test in Development" stage.
⚠️ Any changes made will automatically apply to all screens within the theme template. If you need to customize only 1 separate screen in the template, just click on Edit button below it or on it, make the necessary design changes, and save them:

Let's study the main parameters available for customization here:

Main design Colors

In this tab, you can customize the Button's background, Titles and Subtitles, and Button title colors of your theme template. The colors you have chosen to set for screens are reflected in the checkboxes

Each template has specific areas where these color changes will be applied, ensuring a cohesive and visually appealing design.

Customizing Button's Background Colors

Customize the background colors of buttons in various elements:

Footer: Color of Button1's background and the text in Button2.
Header: Influences the page progress indicator.
Table Multiple Selection: Affects the item selected state.
Table Single Selection: Alters the item's background color.
Progress Bar: Modifies the progress view.
Text Field Border: Changes the border color of text fields.
2-Column Multiple Selection: Impacts the selected item's background and border color.
2-Column Single Selection: Affects the selected item's background color.
Calendar: Alters the checkbox selected color.

Customizing Titles and Subtitles Colors

Adjust the colors for titles and subtitles on various components:

Header Buttons: Change button colors.
Titles and Subtitles on Screens and Table Items: Affects these elements except in table single selection.
Table Multiple Selection: Modifies the unselected item color and checkbox color.
2-Column Multiple Selection: Alters the item's unselected border color.
2-Column Single Selection: Changes the item's unselected border color.
Calendar: Adjust the checkbox colors.
Pickers: Alters the color of text in pickers.

Customizing Button Title Colors

The colors for titles on buttons can be customized to enhance visibility and aesthetics:

Footer: Changes the text color inside Button1.
Table Single Selection: Alters the title and subtitle color of items.

To set the needed color, you should select the needed color code on the palette board or using the pipette.

Otherwise, you may enter the correct color code in the needed HEX format starting with the sign "#" in the field line without any extra symbols or signs.

Background

In the "Background" tab, you opt for what type of background you would like to install for all your screens: color, image, or video.

Use color as background:

In this field, you will have a possibility to work with the color shades and choose the needed one per your app needs and design.

To set the needed color, you may clicking on the color palette and selecting the needed color shade for all your screens or proceed with entering the exact HEX color code or

Use Image as background:

To upload an image, use the "Camera" button to upload images from your computer

Alternative ways to upload the image:

▫️Paste an image URL link.

▫️Generate an image with the Image AI Generator based on your prompt. The Image AI Generator is available in the settings button.

Note that you may choose your background image between Image URL or Asset Name.

Image URL allows you to upload the needed image from the internet to be installed.

Asset is useful for iOS onboarding, where you add the asset name stored in your app bundle for retrieval from the app's local archive.

Use Video as background:

The same thing will be completed in your settings if you choose the video background, as it contains the same parameters as the image.

To upload a video, use the "Camera" button to upload images from your computer

Alternative way to upload the video:

▫️Paste a video URL link.

Note that you may choose your background video between Image URL or Asset Name.

Image URL allows you to upload the needed video from the internet to be installed.

Asset is useful for iOS onboarding, where you add the asset name stored in your app bundle for retrieval from the app's local archive.

Header

The "Header" tab contains 2 action buttons to switch screens either forward ("Skip") or back ("Back") and a page indicator bar with the help of which you show how many screens are left for the customer to progress in your app. You may change the titles of the action buttons per your needs.

Customizing 'Back' and 'Skip' Buttons:

Configuring Text: Enter the required text in the text field to change buttons title:

Adjust text settings (font, size, color, background, weight) by clicking on the Settings icon

Configuring the Page Indicator:

Page indicator type: Enable the 'Indicator Kind' option.

The page indicator can have three design types:

Line	Dashes	Dashes with title

Customize Dashes (For 'Dashes' and 'Dashes with title' types)

Number of Dashes - Adjust the number of dashes to represent the number of pages in the onboarding process.
Dash Height - Set the height of all dashes.
Dash Spacing - Modify the space between each dash.

Customize Page Indicator Title (For 'Dashes with title' type)

Change Title Text - Edit the text to be displayed as the title.

Title Design Settings (For 'dashes with title' type): Customize the title design, including Font type, Font size, Font color, Text alignment, Text height (web-to-app only), Text background color (web-to-app only)

Page Indicator Settings

Indicator Progress Display: Choose to show either the completed or remaining percentage.

Progress Color: Click on the Settings icon in the Page indicator row and change the color of the progress bar and its background (track color) to match your theme

Header elements visibility.

Control the visibility of the Skip, Back, and page indicator individually by toggling the checkmark in the corresponding row.

Note that changes will apply for ALL screens in the design template.

Fonts

Choose the main family font for all texts inside screens:

titles, subtitles, texts inside table items, text inside buttons

Select the font family, font size, weight and color for all titles:

Select the font family, font size, weight and color for all subtitles:

Table

To set the required parameters for tables in your screens, you should customize the tab "Table" in your theme template.

⚠️Please note that these changes apply only to screens containing tables with multiple and single selections, 2-column multiple and single collections, and lists without differentiation. ⚠️

Select the checkbox kind for your selection:

Adjust the border radius for Tables:

Adjust the border radius for 2 column Collections:

Set up the fonts, text size and weight for the titles inside the selection lines

Set up the fonts, text size and weight for the subtitles inside the selection lines

Footer

The 'Footer' tab in your Onboarding theme settings allows to manage navigation within your Onboarding screens, typically featuring two action buttons at the bottom of the screen (Button 1 and Button 2).

📣 It's important to note that footer customization options are available for screens template with some exceptions. Specifically, the options to customize the footer are not available for certain types of screens, including the Slider, Progress Bar, and Custom screens. This means that for these specific screen types (Slider, Progress Bar, and Custom), the standard footer customization features will not be applicable.

Button 1 and Button 2 text customization: Customize these buttons to perform specific actions. You may enter the required text in the text field to change the button title: For example, Button 1 could be a 'Continue' button, and Button 2 could be a 'Cancel' button.

Configuring Buttons Appearance

Adjust text settings (font, size, color, background, weight) and buttons visual design n (button background color, height, weight, corner radius) by clicking on the Settings icon.

The detailed article on how each setting works is in the linked article

Footer elements visibility.

Control the visibility of Button 1 and Button 2 individually by toggling the checkmark in the corresponding row.

Please remember that theme template customization implies the generalization of the whole onboarding per your app design requirements. To discover more details regarding theme template customization, please study the Onboarding Themes and Customization article.