KnoInsights offers the ability to customize the placement and styles of your embedded survey on Shopify.
Custom positioning
Your survey can be placed in three different locations on the Shopify confirmation screen. To select your location, click the "complete" button after "choosing your look" and position the survey to meet your needs. Be sure to confirm with a quick live store test.
Theming options
KnoInsights includes a prebuilt dark style that can be used for surveys on your Shopify order confirmation screen. By default, we'll display the light version on your site.
Your buttons and progress bar color can be set by the primary color setting.
Custom CSS
You can easily customize the css for your survey. The primary container for your survey is the ".kno-app" container.
To customize the font, use:
.kno-app * {font-family:'font-family-here'}
To customize survey question text, use:
.kno-app .v-title {font-size: 18px !important;color: #000 !important}
To customize survey question helper text, use:
.v-window-item.v-window-item--active > div > div > p {font-weight: bold}
To customize survey response option text, use:
.kno-app .v-label {font-size: 12px !important;color: #000 !important}
To customize the next/prev button text, use:
.kno-app .v-btn__content {font-size: 14px !important;color: #fff !important}
To customize the next/prev button styles, use:
.kno-app button.v-btn {border-style: solid !important;border-color: black !important;border-width: 1px !important;}
If you have any questions or issues with any of this, just send us a message - we're happy to help.