Step-by-step instructions
1. Open your product finder.
2. In the menu on the left, choose Look & Feel.
3. In the overview you will see a preview of your product finder with sample texts and images.
Use the buttons to switch between layouts. You'll see the effect of your settings on the home page, the questions and answers, the info page and the advice page.
Use the buttons to switch between devices. You can see the effect of your settings on large and mobile screen sizes.
4. On the right side you will find settings for colors, fonts and other styling 👇.
Colors
Main color
Used for main actions, for example, the call-to-action button or the checkboxes and radio buttons near the answers.
Secondary color
Used for all secondary components, such as the progress bar or info icons.
Primary text color
Used for titles, questions, and price on the advice page.
Secondary text color
Used for the remaining text.
Background color
Used for the background (behind the content pages). Make it extra pretty by choosing the same background color you use on your website when doing an in-page integration.
Fonts
You can set a font for:
headers
other texts
Headers can also be styled, such as Bold, Italicized or Underlined.
Advanced Options
The devil is in the details! In Advanced, you can tweak the pages and buttons in your product finder to your liking.
Content cards: Slightly rounded, square or extremely round: which shape suits your visual identity best?
Buttons: Make sure the buttons in your product finder match the call-to-action buttons on your website. Define shape of border and padding, and set whether they need a shadow or just a 'flat design'.
Final step
Completely done? Don't forget to click on 'Save'!
1. Use Preview to view the result in your product finder.
2. Is your product finder already live? Make sure your changes are pushed to the published product finder by clicking the yellow 'Publish' button in 'Publish'.