# Setup your Product Finder Product Finders 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. {% tabs %} {% tab title="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. {% endtab %} {% tab title="Key" %} The Finder Key is used for a variety of technical purposes, the most important of which is the URL parameter of your Finder. The Key is set to automatically update to match the Finder’s name, or you can update it manually. It should be short, simple, and unique per Finder that you create with Crobox. {% endtab %} {% tab title="Z-Index" %} Choose the Z-Index of your Finder when in use on your website. Elements with a higher z-index will be placed on top of elements with a lower z-index. {% endtab %} {% tab title="Dynamic Answers" %} Dynamic Answers filters the answers of the questions in real-time based on the availability of the products for the specific question path. This way if there are no relevant products available for a given journey, an answer or question can be skipped. This makes sure that the user doesn’t follow a path that will not display a result and that only relevant questions are shown to your users. Turn the toggle on for the Finder's overall dynamic answer function to be set. {% endtab %} {% endtabs %} #### 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. {% hint style="info" %} 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. {% endhint %} {% hint style="warning" %} These are starting suggestions. Adjust based on your website's layout and test on your actual pages before publishing. For additional wide screen settings, you can further adjust: * Wide screen background settings on a specific [landing page](https://docs.crobox.com/how-to-guides/finder-editor/page-settings#landing-page) or [results page](https://docs.crobox.com/how-to-guides/finder-editor/page-settings#results-page). * Wide screen answer column and image size settings with the [question editor](https://docs.crobox.com/how-to-guides/finder-editor/question-editor#configuring-question-settings). * Inline activation widths within the [finder activations tab](https://docs.crobox.com/how-to-guides/create-activations#in-line-rendering). {% endhint %}
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. {% hint style="info" %} Keep **Primary vs Primary Surface** high-contrast. Buttons and links often sit on surfaces. {% endhint %}
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. {% hint style="warning" %} If your TopBar is transparent, double-check icon and progress colors on every page background for accessibility. {% endhint %}
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. {% stepper %} {% step %} **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. {% endstep %} {% step %} **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. {% endstep %} {% step %} **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. {% endstep %} {% step %} **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. {% endstep %} {% step %} **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. {% endstep %} {% endstepper %}