All Collections
Advanced Settings
Customizing layout and styles with CSS
Customizing layout and styles with CSS
Jeremiah Prummer avatar
Written by Jeremiah Prummer
Updated over a week ago

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.

Did this answer your question?