Themes
A theme is a saved set of design settings that you can apply to any number of surveys. It covers everything you would otherwise configure in the Design tab of the survey editor: colors, images and fonts, layout, navigation, and footer settings.
Surveys stay linked to the theme they use. When you change a theme, every linked survey picks up the change automatically, so you can keep all your survey campaigns on-brand and roll out a rebrand with a single update.
Manage themes
Section titled “Manage themes”You’ll find your themes in the settings of your environment under Settings > Themes. Each theme card shows the theme name, its accent and background colors, and the number of surveys that use it. Click on “Used in … surveys” to see which surveys are linked to the theme.
Themes belong to an environment. Each environment has its own set of themes and its own default theme.
Preset themes
Section titled “Preset themes”Every environment comes with a set of ready-to-use themes:
- Default Theme: your default design. In environments created before themes were introduced, it contains the default design settings you had configured previously.
- Ocean, Ember: dark color schemes with square corners and a progress bar.
- Refiner, Peach, Forest, Lagoon, Graphite: light color schemes with rounded corners.
You can edit, rename, duplicate or delete the preset themes like any other theme.
Create a theme
Section titled “Create a theme”Click + Create theme and enter a name. The new theme starts with the settings of your default theme, and the theme editor opens so that you can customize it right away.
You can also create a theme from an existing survey design. See Save a survey design as a theme below.
Edit a theme
Section titled “Edit a theme”Click on the name of a theme, or select Edit in the theme’s action menu, to open the theme editor. A live preview on the right side shows how the theme looks. Use the dropdown above the preview to switch between Web App, Mobile App, Survey Page, Email and Embed surveys.
A theme contains the following settings:
| Section | Settings |
|---|---|
| Branding | In-App Survey colors, Survey Page colors, Email Survey colors, page logo and icon, banner image, avatar image, font style, reading direction |
| Layout | Web placement, mobile placement, backdrop, corner radius, highlighted border |
| Navigation | Progress bar, back button, dismiss button |
| Footer & Compliance | Disclaimer text, Refiner branding |
A theme holds separate color settings for in-app surveys, Survey Pages and Email Surveys, as well as separate placements for web and mobile surveys. This way, one theme works for every delivery method, and each survey uses the settings that match how it is delivered.
Click Save theme to save your changes. If the theme is used by one or more surveys, Refiner shows you which surveys are affected and lets you choose how to save:
- Update theme: the design of all linked surveys changes immediately, including surveys that are already live. The change is recorded in each survey’s changelog.
- Save as new theme: your changes are saved as a new theme, and the linked surveys keep their current design.
When making bigger design changes, we recommend saving as a new theme and then applying it to your surveys one by one, so that you can review each survey before switching it over.
Default theme
Section titled “Default theme”One theme in each environment is marked as the default theme. New surveys automatically use the default theme, and new themes start from its settings.
To change the default, open the action menu of another theme and select Make default.
Duplicate a theme
Section titled “Duplicate a theme”Select Duplicate in a theme’s action menu to create a copy. If your account has several environments, you can choose the environment to create the copy in. This is a quick way to use the same design in your test and production environments.
Delete a theme
Section titled “Delete a theme”Select Delete in a theme’s action menu to remove a theme. A theme can’t be deleted while:
- it is used by one or more surveys. Apply a different theme to these surveys first.
- it is the default theme. Make another theme the default first.
- it is the last theme of the environment. Each environment needs at least one theme.
Use themes in the survey editor
Section titled “Use themes in the survey editor”In the survey editor, open the Design tab (named “Page Design” for Survey Pages and “Landing Page” for Email Surveys). It contains two views:
- Themes: pick a theme for your survey. The theme that is currently in use is highlighted.
- Custom Design: adjust the design settings for this survey only.
New surveys use your default theme. To switch to another theme, click on it in the Themes view and save your survey.
Click Manage themes below the list of themes to open the theme settings.
Custom design
Section titled “Custom design”If a survey needs a design that differs from your themes, you can change its settings in the Custom Design view. As soon as you change a setting that is part of a theme, the survey is no longer linked to its theme and uses a custom design instead. Later updates to the theme no longer affect this survey.
Applying a theme to a survey with a custom design replaces the custom settings with the theme’s settings. Refiner asks you to confirm this first.
Surveys created before themes were introduced use a custom design. Their design stays exactly as it was until you apply a theme.
Save a survey design as a theme
Section titled “Save a survey design as a theme”After customizing a survey’s design, you can turn it into a theme. Click Save as new theme in the top bar of the Design tab and enter a name. Refiner creates a new theme from the survey’s current design settings and links the survey to it, so you can apply the same design to other surveys.
Duplicated surveys
Section titled “Duplicated surveys”When you duplicate a survey within the same environment, the copy uses the same theme as the original. When you copy a survey to another environment, the copy keeps the design but uses a custom design, as themes belong to a single environment.
Permissions
Section titled “Permissions”Team members with the Admin, Manager or Contributor role can create, edit, duplicate and delete themes.
Hiding the Refiner branding in a theme is only available on paid subscriptions. On a free plan, surveys using the theme always show the Refiner branding.
Custom CSS code
Section titled “Custom CSS code”Themes cover the design options available in the survey editor. For advanced styling that goes beyond these options, you can add custom CSS code to all surveys in your environment.