Product Finder Style Guide

Use these guidelines to better understand how you can style and customize the base configuration of a Product Finder questionnaire and results.

Product Finder Container

When you create a Product Finder questionnaire, you must decide when you want the resulting product recommendations to appear. That decision not only largely determines the contents of the Product Finder container but can also help guide you as you determine how to style those contents.

Results After Each Question

You can configure a questionnaire so that recommended products appear each time the customer answers a question. In this type of questionnaire configuration, the Product Finder container holds the question, answer, and recommendations. You can arrange this content any way you like.

Illustration of a Product Finder container with a question, the answer options, and the resulting recommended products

Results at the End

You can configure a questionnaire so that after the customer has completed it, recommended products based on all the answers selected appear in a separate container.

Illustration of a recommendations results container that appears after the customer has completed the questionnaire

Styling the Questionnaire

You can configure and style these default elements of a Product Finder questionnaire out of the box.

Examples of different ways to style a Product Finder question

  1. Questionnaire container
  2. Question text
  3. Instructional text

Answer Selection Buttons

  1. Radio buttons that accompany answer options for single-choice questions
  2. Checkboxes that accompany answer options for multiple-choice questions
  3. Images that accompany answer options, used with radio buttons or checkboxes

Questionnaire Navigation Buttons

  1. Back, Next, and reset buttons

The code necessary for all three navigation buttons appears in the Product Finder container template when you configure a Product Finder action. However, you don't have to include a Back button or a button to restart the questionnaire. See Customizing the Product Finder Container within Configure a Product Finder Action for more information.

You can also customize the navigation button states.

Illustration of three states of the navigation button

Styling the Recommendations Results

You can configure and style out of the box these elements for the resulting recommendations.

Illustration of a results recommendations container and an illustration of an individual product recommendation within the container

  1. Recommendations container
  2. Individual product recommendation
  3. The properties (for example, product title, image, price, sale price, etc.) included for each recommended product

When creating a questionnaire, you can input one or more product catalog custom fields so that the values in those fields appear as part of each recommended product's information.

You can also add custom JavaScript content, such as wish lists, ratings, or other custom styling, to the results.

Styling the 'Results Found' and 'No Results Found' Messages

The Product Finder container template contains both a "Results found" message that accompanies product recommendations and a "No results found" message that appears if the customer's answer(s) didn't lead to product recommendations. You can style each message and its respective container at the experience level.

You can modify the Product Finder container template to include a Back button with the "No results found" message when the questionnaire is set up to show recommendations after the customer answers a question or to include a Restart button with the "No results found" message when the questionnaire is set up to display recommendations after the customer has answered all the questions.

See Customizing the 'Results Found' Message and Customizing the 'No Results Found' Message within Configure a Product Finder Action for more information.

Styling the Optional Welcome Screen

By default the Product Finder container HTML code template includes an optional introductory screen that appears before the first question.

Example of a welcome screen that appears before the first question of a Product Finder questionnaire

The HTML code for this welcome screen, which includes a message and button that the customer must click to move to the first question, is part of the Product Finder container template that you customize when configuring a Product Finder action. If you don't want to include the introduction, then you must delete its code from the container template. See Customizing the Welcome Screen in Configure a Product Finder Action for more information.

Design and Styling Examples

Use these examples as inspiration as you consider how you want your Product Finder questionnaires to appear on your site.

Example of a Product Finder questionnaire container with both a question and the resulting recommended products

Example of a Product Finder questionnaire container showing a question and buttons that contain the answer options

Example of a Product Finder questionnaire results, showing four recommended products with a small image of each product and a colored bar above and below each image to indicate where specific product info would appear

After you determine how you want to customize a Product Finder questionnaire and results, see steps 9 through 11 in Configure a Product Finder Action for how to input the various code to achieve the style and formatting you want.

Related Articles