The Theme Settings page are automatically shown on the left-hand toolbox when you enter the Flow Plan (where all of the steps are visible):

The Theme Settings are separated out into 5 sections:

  1. Main Settings

  2. Logo

  3. Navigation

  4. Form

  5. Typography

All of these theme settings are split out into Colour 1, and Colour 2 so that you can customize your flow to look great on both colour schemes. You can change which colour you are customizing by toggling through the tabs that you'll see in each Preview:

Note: You'll see the relevant Colour's background appear to show you an accurate preview of what it'll look like in your flow.


Main Settings

This is where you add in your two main colours, and two main fonts to make sure that your flow aligns with your brand.

Colour 1 is where the questions that your customers will answer will go

Colour 2 is where you can add context and storytelling to maximise your chances of users completing your flow.

To note: Some layouts do not have content blocks in them, in which case Colour 2 will not be seen by customers.

You also have Primary Font, and Secondary Font. These can be the same if you have a main font, or you can add in a second one to differentiate between titles and text.


Logo

This is where you can upload a logo that appears on the top of your flow. We'd recommend putting in a logo for Colour 1 (which appears in desktop views), and a logo for Colour 2 (which appears in mobile views).


Navigation

Here's where you can set the controls that help with how your users will make their way through your flow:

  • Back icon & Close Flow icon

  • Buttons (Primary and Secondary)

  • Progress bar

Back button & Close Flow button

In Navigation, you can change the colours of the Back Button and the Close Flow buttons with the corresponding colour picker:

Depending on the layout you select, the Back button and Close Flow button may be in different Colours. Make sure you go in to each Colour if you want to change them!

Buttons

Buttons can either be Primary or Secondary buttons, based on how strong you want each CTA to be. Here's what can be changed:

  • The shape of the button with Button Corner Radius

  • Whether your buttons have borders and what size they are with Border

  • The font and font size of your button with Font

These will affect both Primary and Secondary buttons. Then, the buttons' colours can be customized using the relevant tab below the preview. You can change:

  • The background colour of the primary and secondary buttons

  • The text colour of the primary and secondary buttons

  • The border colour of the primary and secondary buttons

Progress Bar

For the progress bar, you can change:

  • The colour of how much is completed in your progress bar

  • The colour of how much is left in your progress bar

  • The border of the progress bar


Form

The Form section is where you can customize your questions in the way that you want your customers to see them! You can customize:

  • The shape of your form fields with Corner Radius

  • Whether your form fields have borders and what size they are with Border

  • The font, font size and font weight of your questions with Question

  • The font, font size and font weight of your questions with Description

  • The font, font size and font weight of your questions with Answer

Then, below the preview you can customize:

  • The colour of any option that has been selected with Selected Options

  • The colour of your questions with Question Text

  • The colour of your descriptions with Description Text

  • The colour of your answers with Answer Text

  • The colour of any error messages with Error Messages

  • The colour of of your form field backgrounds with Field Background

  • The colour of your field border with Field Border


Typography

The Typography section lets you customize any flavour text you want to add in! You can customize:

  • The font, font size, font weight and colour of your Headings

  • The font, font size, font weight and colour of your Subheadings

  • The font, font size, font weight and colour of your Text

Did this answer your question?