Theme Configuration: How to Change your Product Finder's Appearance
In this article, you will find information on how to customize your Finder’s theme by changing the colors, font, and background image.
Last updated
In this article, you will find information on how to customize your Finder’s theme by changing the colors, font, and background image.
Last updated
You can find the Theme Settings by following these steps:
1. Select Experiences in the sidebar on the left side of the screen, click on Product Finders, and click on the Product Finder you want to edit. The Theme Settings can be found in the Setup tab. You can change the theme of your Finder by clicking on the Theme dropdown menu. The Finder appearance dropdown allows you to change the way your Finder will appear on your website. The following options are available:
Sidebar: The Finder will appear as a sidebar on your website once activated
Modal: The Finder will appear centred and positioned on top of your website once activated
Fullscreen: The Finder will open full-screen once activated
You can see any changes you make immediately in the four preview panels displayed here, as well as toggle between mobile and desktop view by pressing on the relevant icons.
2. Scroll down to find all the different settings you can use to customize your Finder. Keep reading below to find detailed information on each option.
The color presets are used universally throughout the Product Finder. Here you can choose the color of your Finder’s background color, the color of the buttons, and so on.
Main (Primary): The color of the buttons.
Main (Secondary): The color of the topbar. You can also change this in the Topbar section.
Text (Dark): The font color if the background is set to a light color (dark colors recommended).
Text (Light): The font color if the background is set to a dark color (light colors recommended).
Background (Default): The background color. If you set this to a light color, then Text (Dark) will be displayed as the font color, and if you set this to a dark color Text (Light) will be displayed as the font color.
Text (error): If an error appears in the Finder, this is the color it will be displayed in (for example, if a question is required to continue with the Finder, but the user tries to continue without answering).
The topbar colors are inherited from the Color Presets. You can override the presets in this section.
Light Bar (Background): The color of the topbar.
Light Bar (Icons + Text): The color of the topbar buttons (i.e back, rest, close buttons).
Light Bar (Progress Bar Fill) & Light Bar (Progress Bar Empty): The colors of the progress bar displayed as the user goes through the finder.
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.
Spacing (Mobile): You can change the distance between all the different elements on a Finder page on mobile.
Spacing (Desktop): You can change the distance between all the different elements on a Finder page on desktop.
You can change the font of your Finder, by clicking on the dropdown menu and choosing a font.
You can also upload a custom font. Select the Custom tab and click + Upload Font to upload your font file.
Background image: A universal background image can be added here. The background image will show below the background color of all pages, so if the image is not visible make sure to check the transparency value of the Background Color.
Background position: You can change the position of the background image by typing in “centre”, “left”, “right”, etc. You can also input a size in pixels; this will move the background image X amount of pixels to the right.
Background size: You can change the size of the background image by typing in “full”, “small”, etc, or by typing in a size in pixels and the image will adjust accordingly.
Logo image: You can add an image of your company’s logo, which will be displayed at the bottom of all the question pages.
You can add any custom CSS you’d like to use here.
You can add any custom Javascript you’d like to use here.
If you want some elements of your finder to be different from the presets selected in Theme Settings you can modify elements per page. For example, if you set a global background image, you might want a different image to be shown on the landing page.
To override a Theme Setting, follow these steps:
Go to Design > Product Finder and open the Finder you want to edit.
Go to the Flow tab and click on the page you’d like to modify.
Open the Styles menu, which is collapsed by default.
Once there, you can find various override settings, such as:
Background image
Text color
Button background
Button text
After you make changes, you can either save them, or reset to the global styles.
You can find more information on this topic in the related articles: Customizing Questions Landing Page Loading Page Results Page
