Accessed in two different locations, (Global Settings and within each survey), custom styling is available on every plan, and most options apply to both post-purchase surveys and KnoLink surveys as well.
Navigation
Survey Style Edit Locations
Global Survey Settings Styles
You can set global survey styling in the Survey Settings menu. When you make changes in this global setting location, every survey created AFTER (this is very important) will adopt the settings that are configured here. It will NOT update existing survey settings.
Individual Survey Settings Styles
Located within the survey builder for each survey, you can edit the branding and color schemes for just the survey that you're working on.
Default Confirmation Page
Your first option to make changes is to the Default confirmation page for your survey. This is what customers will see whenever they finish your survey.
NOTE: For customers who have upgraded to Shopify Extensibility on the Thank You page and Order Status page (not just the Checkout), check out this Extensibility help doc to see how survey confirmations work there.
Some brands keep the survey confirmation simple and say 'Thank you for taking this survey!' while other brands up the complexity and add some additional words/make it on-brand.
Access the HTML editor here to make more advanced changes, as you can get fairly complex/advanced with links and other HTML if you'd like (requires advanced HTML knowledge and/or developer time).
For customers on the Starter Plan, this is the only survey confirmation page option you have access to. For customers on paid plans, check out this section of our help doc to see how to utilize Actions as your survey confirmation page instead.
Theme Edits
This section will detail the different options to edit the theme and visual appearance of your survey that are available in the KnoCommerce survey editor.
Light Theme/Dark Theme
The default visual theme is a light theme where the survey container background is white, but you can toggle on the 'Use Dark Theme' setting to adjust this theme.
In most cases, we recommend using the light theme, but if you have a dark mode site (or really want a default that stands out), the dark theme works well for this.
Color Settings
Several color settings are available to be changed as well. Each color editor works in the same way.
Color Editor
Click the circle with the corresponding setting to open the color settings editor, then use any of these three options to adjust to match the colors to your brand.
Use the top box and color slider to select an option
Enter the color settings manually using the boxes on the bottom; click the bottom toggle to change between RGB, HSL, and Hex Code
Click the Dropper on the left to then click a portion of your website and copy exactly the color that exists there
Post-Purchase Color Settings
Post-purchase surveys have slightly different settings options when compared to KnoLinks surveys. Here are the settings for post-purchase surveys and what they will change.
Primary Color - Changes the progress bar color at the top of the survey container
Button Color - Changes the color of the navigation buttons
KnoLinks Color Settings
KnoLinks surveys have the same options as above (Dark Theme, Primary Color, Button Color, Button Text Color), but there are a few additional options as well.
Background Color - On a KnoLinks survey, the link opens up a new browser tab with the survey container on the page. This setting changes the color of the page outside of the survey container.
Email Submission Button Color & Text - KnoLinks surveys require the customer email to start the survey (look at our KnoLinks survey help doc for options to circumvent this screen), and these two settings change the submission button on that page
Custom CSS Editor
Basic CSS edits for your Shopify Confirmation page or Custom Integration stores can be made using the CSS editor here. The CSS changes here will not be detectable in the survey preview but will be applied on the page where the survey will live. It is recommended to have the live page in a separate tab to track the CSS changes. Check out our CSS Help Doc as a starting place, enlisting the help of developers with knowledge of HTML and CSS is highly recommended.
Navigation Text
The default text for navigation buttons within the survey is 'Prev' to move back and 'Next' to move forward. Make changes to them for surveys in different languages or simply add your own spin to the button formatting.
