Setup your Advisor

This guide outlines the process of setting up a Product Finder using the AI Generate Finder feature and configuring essential Finder settings.

Product Advisors for leading retailers in action 🚀

First Steps

To create a new Product Finder, follow these steps:

1. Select Experiences in the sidebar on the left side of the screen, and click on Product Finders. Then select New Product Finder to create your Finder.

2. Enter the Product Category your Finder will focus on, or start from blank. You will be directed to a preview of your newly generated Finder, based on your selections.

Use our AI driven Generate Finder feature to get a head start on relevant questions and answers based on your product category.

Finder Settings

General

The General Settings section allows you to configure essential properties of your Finder, defining how the Finder is identified, accessed and layered on your website.

Finder Name

Edit the unique title of your Finder. The generate finder feature provides a relevant title upon creation, or you can update it manually.

Key

Z-Index

Dynamic Answers

Design

The Design tab in the Setup section allows you to customize the visual appearance of your Finder. Below is an overview of the available settings and their functions.

Theme Settings

If you have a custom theme within the Enterprise plan, here you can select the theme component and top bar component specific to your brand. Otherwise, use the Default theme.

Global

Modify overarching design elements that apply to the entire interface. Image requirements for background and landing page (large images) is 100–200KB.

Core layout

• Finder Content Width (%): The content column width as a percentage. Example: 70%.

• Finder Width (px): Base width of the Finder iframe container. Example: 750.

• Mobile Breakpoint (px): Switch to mobile layout below this width. Example: 600.

Background

• Background Image: Default background for the Finder, you can adjust backgrounds per page type for further personalization in the page editors.

• Different for mobile res: Enable a separate background image on mobile.

• Background Image Mobile: Mobile-only background image (shown when the toggle is on).

Enable Wide Screen Mode

Optimize your Finder's layout for landing pages and inline activations where you want a wider presentation. When enabled, the results page displays product information alongside images (right) rather than below them.

Turn on the toggle to reveal these additional settings:

• Wide Screen Breakpoint (px): Screen width above which wide screen settings apply. Example: 1200px

• TopBar Content Width on Wide Screens: Maximum width of the top bar in wide screen view. Example: 90px

• Finder Content Width on Wide Screens: Maximum width of Finder content in wide screen view. Example: 75px

• Background Image on Wide Screens: Optional background image for wide screen displays.

Match your TopBar Content Width to your website's menu width for visual alignment. Test on both laptop (1366px) and larger monitors (1920px+) to verify your configuration.

These are starting suggestions. Adjust based on your website's layout and test on your actual pages before publishing.

Color Presets

Set your core colors once, then reuse them across pages and components. Page-specific styling can still override these defaults. Use HEX for solid colors and RGBA when you need opacity.

Core colors

• Primary Color: Main brand color for primary actions and highlights.

• Secondary Color: Supporting accent color. Use for secondary actions and small accents.

Surfaces (backgrounds)

• Primary Surface Color: Default card/panel background. Pick a subtle tint.

• Secondary Surface Color: Alternative surface for contrast between stacked sections.

Tooltips

• Tooltip Background Color: Usually a dark rgba(...) so content below still shows.

• Tooltip Text Color: Must pass contrast against the tooltip background.

Keep Primary vs Primary Surface high-contrast. Buttons and links often sit on surfaces.

TopBar

Control the Finder header that sits above the content. These settings apply across pages.

• Background Color: TopBar background. Use rgba(0,0,0,0) for transparent.

• Logo Image: Brand mark shown on the left. Prefer SVG for crisp scaling.

• Logo Alt (alternative text): Accessible label for the logo.

• Icon Color: Color for TopBar icons (close/back/restart, depending on your setup).

• Progress Bar Fill: Completed portion of the journey indicator.

• Progress Bar Empty: Remaining portion of the journey indicator.

If your TopBar is transparent, double-check icon and progress colors on every page background for accessibility.

Text

Control general text styles used across the Finder. To set your custom brand font, upload the font file within the base font field.

Body

Configure styles for standard body text, including font, size, and color.

Headings (H1, H2, H3, H4)

Adjust the styling for different heading levels, ensuring hierarchy and readability. Don't worry, if you need to apply specific customisations on a page level, you can edit this within the page settings CSS.

Subtext

Manage the appearance of secondary or supporting text.

Label

Customize label styles for form fields and UI components.

Answer

Configure the style for displayed answers or responses within the Finder.

Buttons

Button (Primary) — Define the main action button styling, used for start, continue, primary CTA.

Button (Secondary) — Adjust the appearance of secondary action buttons, used for skip and secondary CTA.

Theme CSS & Viewport CSS

Here, you can add custom CSS to override or extend theme styles, or apply CSS styles specifically for different screen sizes and responsive behavior.

Data

The Data tab in the Setup section allows you to control how products are filtered, sorted, ranked, and grouped within your Finder, on the overall level. Below is a breakdown of the functions.

1

Results Filtering Rules

Here, you can define criteria for specific products to be included in the finder results. You can filter products based on attributes by using Conditions, for example, "Product Category [equal to] Protein Supplement". The available attributes are based around your Product Data.

• To apply multiple conditions together, use a Condition Group.

2

Product Benefits

Assign benefits to your products here on an overall level. Benefits defined here will be added to relevant products on the users results page.

• Click Add Benefit to specify new benefits or disadvantages and the criteria for conditions they should appear.

• Additionally, you can set a benefit on an answer level within the question editor.

3

Sorting Rules

To determine how products are ordered within results, select a product attribute. For example, "Product Ranking Points" or “Product Property Price”, and choose between High to Low or Low to High for the order.

• To apply multiple sorting criteria, click "Add Sorting Rule." The order of sorting rules determines their priority.

4

Product Ranking

Define custom ranking rules to adjust product prioritization as a user completes the Finder. Ranking rules add points to products based on the criteria you define.

• Click Add Ranking Rule to create a ranking-based prioritization and define the weight of points and the condition they receive certain points.

• Additionally, you can set a ranking rule on an answer level within the question editor.

5

Product Grouping

Group products based on a selected attribute within your properties to affect the view of products in the results page.

• Click Add Group By to choose a grouping category.

• For example, if your product data is complex and has product titles named the same (due to sizing or color information), use the group by “Title” property to ensure duplicate or similar products are not shown twice on the results page.