Product Finder Builder: Results Page

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

To begin, navigate to the Flow Tab and click on the Results 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): Customize the background color of the Top Bar.

• 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.

Content Area

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

Content Section

The following options are available in the Content section:

• Results Layout: We recommend leaving this field as is (Flat Result).

• Nr of products to show: Change the number of products shown in the results page.

• Title: Change the text displayed on the results page.

• View Product: Change the text of the CTA button on the results page (the default value is View Product). This button directs the user to the PDP of the result.

• Show Pricing: By activating this option, the prices of the products will be shown on the results page.

• Alternatives: If you opt to display more than one result, you can change how the additional results are introduced in this field. The default value is “You might also like”.

Several other options are available, namely as Get USPs from answer, USP 1Field - USP 3 Field, Tagline Field, Shop All URL Field. These involve adding information to your product feed(s), or further set up across the Product Finder. Please contact your Customer Success Manager for more information and guidance.

Styling Section

The following options are available in the Styling section:

• Background: Change the background color of the results page. Change the background color of the results 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 Settings article for more information), or use the background image field in this section no background color will show.

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

• Primary Button Background: Change the color of the CTA (View Product) button on the results page.

• Primary Button Text: Change the font color of the CTA (View Product) button on the results page.

• Title: Change the font color of the text shown on the results page.

• Product Image Background: Change the background color of the product images shown on the results page.

• Grid Columns (Mobile): Change the number of columns of products displayed when the Finder is viewed on mobile (this applies if the number of results shown is higher than 4).

• Grid Columns (Desktop): Change the number of columns of products displayed when the Finder is viewed on desktop (this applies if the number of results shown is higher than 4).

• Results background image: Add a background image to the results page.

• Custom CSS: In the Custom CSS section, you can add any CSS snippets you’d like to customize the page further. Any CSS snippets you add will only affect the Results Page.

Several other customization options are available, such as the Tagline, Checkmark, etc. Please contact your Customer Success Manager if you’d like to utilize these in your Product Finder.

Product Sorting Section

In the Product Sorting section, you can set up sorting rules, which will affect the order in which results are recommended if more than one product is suitable for a given QA path. Usually, we recommend sorting the products by price. You can see an example in the screenshot below.

You can add more than one sorting rule, if you’d like. We recommend contacting your Customer Success Manager so they can guide you through the best practices, and help you set up relevant rules.

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 Results Page Global Style. If you’d like to revert back to the previous colors, click on Reset to Global Style.