Product Finder Builder: Customizing Questions
In this article you will learn how to edit your Product Finder’s questions and answers.
Editing a Question
To edit a question, go to the Flow tab and click on the question you want to change. This will direct you to the Product Finder builder, where you can customize any of your questions.
You can choose to edit the Top Bar, the Question, or the Answers by following the steps below.
Top Bar
Settings Section
In the Settings section the following options are available:
Show Top bar: Choose whether you’d like to display a top bar in your Finder 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
In the Styling section you can customize the following:
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.
Questions Area
You can edit a question by clicking on it in the Questions Area section, as shown in the screenshot below.
The following options are available once you click on the question:
Question Type: You can change the type of the question using this dropdown. You can read about the supported question types below (anchor link).
Question Title: You can change the text of the question using this field.
Question Key: The question key is important for the Product Finder flow to operate, as well as for the Finder’s analytics. The key needs to be unique per question. We recommend using 1-2 word keys that relate to the question. In the example shown in the screenshot above, since the question has to do with types of activity, we have selected “activity” as the question key.
Body: You can add a short description/explanation below the question by using this field.
Editing the Answers
You can edit any of the answers associated with a question by clicking on the answer you want to change underneath the question, as shown in the screenshot below.
To add an answer, click on the new answer button. You can re-order the questions by dragging and dropping them. There is also the option to duplicate an answer, or delete it. You can see these options in the video below.
These are the available options to customize the Content of an answer:
Answer Label: Change the text of the answer.
Answer Key: The answer key is used in reporting and it needs to be unique per answer. We recommend short 1-2 word answer keys, related to the answer. For example, if the answer is “Men’s shoes” we recommend using “men” as the answer key.
Image: Add an image to the answer.
Text: Add text to be displayed on top of the answer’s image.
Description: Add text to be displayed underneath the answer button.
Explanation: When you add text to this field, a tooltip is created. Once a user clicks on the tooltip the explanation text will be overlaid on top of the question.
The available Styling options are the same as described below in this article. You can read more here.
Each answer needs to have a unique answer key, so if you duplicate a question it is important to change the answer key.
General Content
You can add a more information button to your Finder under this section. Once a user clicks the button, they will be directed to a separate page within the Finder that will display the additional information you input.
More Info (Button): Change the text displayed on the more info button.
More Info (Text): Add/edit the explanatory text you want displayed.
More Info (Close): Change the text of the button that will direct the user back to the question.
Styling Section
The available Styling options for a question, as seen in the screenshot below, are as follows:
Background Image: Add a background image to the question.
Background: Change the background color of the question.
Text: Change the font color of the question.
Primary Button Background: Change the background color of the answer buttons.
Primary Button Text: Change the font color of the answers.
Secondary Button Background: Change the background of the More Info button.
Secondary Button Text: Change the font color of the More Info button.
Answer border radius: Change the border radius of the answer buttons (increase this number to make the buttons appear rounder).
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 this question.
To save any changes made to a question, 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 question of your Finder by clicking on Set Question pages Global Style. If you’d like to revert back to the previous colors, click on Reset to Global Style.
Question Types
The Crobox app supports the following types of questions:
Horizontal: The answers are displayed horizontally next to each other. Note that if you add more than two answers to this type, a slider will appear and the users will have to use it to see all the answers.
Vertical: The answers will be displayed vertically one after the other.
Grid: The answers will be displayed in a grid. You can change the amount of columns you wish to be displayed on desktop or mobile, by changing the numbers in the following fields:
Form: The Form type provides several style options. You can choose the question’s appearance using the Field type dropdown as shown in the screenshot below.
These are the available options for Form questions:
Single Select Question: A user will be able to choose only one of the answer options.
Multi Select Question: This will allow the user to select more than one answer option.
Text Field Question: The user will be able to type an answer.
Date Question: The user will be able to select a date as an answer.
Time Question: The user will be able to select a time as an answer.
Numeric Question: The user will be able to input a numeric value as an answer.
Range Question: The user will be able to select a range from a slider.
Slider Question: The user will be able to select a single value from a slider.
You can find information on how to create a new question by clicking here.
Last updated
