Product Finder Builder: Loading Page

In this article, you will learn how to customize your Product Finder's Loading Page.

To begin, navigate to the Flow Tab and click on the Loading Page. Several customization options are available under the Top Bar and Content Area sections, detailed below.

Top Bar

To edit the Top Bar, expand the Top Bar section as shown in the screenshot below, and choose between the Settings or Styling options.

Settings Section

The following options are available in the Settings section:

• Show Top bar: Choose whether you’d like to display a top bar on the loading page or not

• Show close button: Choose whether you’d like to show a Close button in the top bar

• Show back button: Choose whether you’d like to show a Back button in the top bar

• Show restart button: Choose whether you’d like to show a Restart button in the top bar

Styling Section

The following options are available in the Styling section:

• Top Bar (Background): Other than selecting a solid color, you can also use the slider to adjust how opaque or transparent the color will appear. If you slide all the way to the left, the elements that use the color will become completely transparent, as shown in the screenshot below.

• Top Bar (Icons + Text): The color of the buttons displayed on the top bar (close, back, reset).

• Progress Bar Empty: The color of the progress bar’s background.

• Progress Bar Fill: The color that fills the progress bar.

Keep in mind that if you add a background image to the loading page, the top bar will be transparent by default.

Content Area

To edit the Content of the Loading Page, expand the Content Area section as shown in the screenshot below, and choose between the Content or Styling options.

Content Section

The following options are available in the Content section:

• Title: Customize the text of the loading page.

• Subtitle: Customize the text underneath the title.

• Progress Indicator: Change how the progress bar looks.

• Waiting Time (ms): Change for how long the loading page appears (in milliseconds). The lower this number is the quicker the results page will appear.

Styling Section

The following options are available in the Styling section:

• Background Image: Add a background image to the loading page.

• Background: Change the background color of the loading page. This can only be applied if no background image has been selected. If you add a background image to the global theme settings (see the Theme Configuration article for more information) no background color will show.

• Text: Change the font color of the loading page.

• Progress Bar (Background): The color that fills the progress bar.

• Progress Bar (Empty): The background color of the progress bar

• Custom CSS: Here you can add any CSS snippets you’d like to customize the page further. Any CSS snippets you add will only affect the Loading Page.

To save any changes made in the Styling section, you can click on the Save button at the top of the page. Alternatively, you can also choose to apply the same changes to every page of your Product Finder by clicking on Set Loading Page Global Style. If you’d like to revert back to the previous colors, click on Reset to Global Style.