Custom CSS

Customize Your Assistant

You can make your assistant’s design entirely custom by using the Custom CSS option. You will find it in the Design tab, in the Appearance section.


You can add and edit your custom CSS code by clicking on the Edit button (Pencil icon). We provided you with a sample block of code but that’s just a tiny portion of what you can achieve here.


Remember to remove the comment signs ("/*" at the beginning and "*/" at the end) if you want to make the sample code work.



You can style any static class in your assistant, which are easy to recognize thanks to their user-friendly names, such as:


You will be able to see your changes in the assistant only when Custom CSS is enabled. Simply switch the toggle on:



When your changes don’t apply in the assistant, try using the !important rule. This will override any class relationships that might be blocking your customization. For example:

.questions-wrapper .answer-text {
color: #3b0078 !important;

Let's Play Around!


With the zoovu CSS editor, the sky is the limit! You can adjust every visible element of your assistant to match your brand's identity. Follow the instruction steps below to achieve the look shown in the picture above. 


Completely new to CSS? Check out these awesome resources to kick-start your styling journey!

1. Change The Background Color


body {
/* fallback for old browsers */
background: #ECE9E6; 
/* code below for Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to left, #FFFFFF, #ECE9E6);  
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to left, #FFFFFF, #ECE9E6); 


Want to easily select gradient for your assistant? Here’s an awesome resource that may help you choose your perfect color!

2. Change The Heading Color, And Make It Bold


.questions-wrapper section p,
.questions-wrapper section .question-image p,
.questionnaire-wrapper .section-main-content .page-title,
.top-product a.product-name,
.top-product .properties-title,
.top-product .product-details .positive-property,
.top-product .product-details .negative-property,
.top-product .product-details .neutral-property,
.top-product .product-price{
 font-weight: 900;
 color: #fff;


Having problems picking colors? Use this color picker as a reference!

3. Center The Question Text


.answers-wrapper .answer-text {
  margin: 0 auto;

4. Style The Buttons

mceclip5.png mceclip6.png  mceclip7.png

#app .start-over-button,
#app .navigation-back-button,
#app .navigation-next-button,
#app .navigation-back-button,
#app .navigation-next-button,
#app .product-compare-wrapper label,
#app .add-to-basket-button,
#app .page-button,
#app .page-button.selected,
#app .navigation-back-button,
#app .navigation-next-button,
#app .gap-button {
  border-radius: 20px;
  background-color: #3B92E4;
  border: 0px transparent;
  color: #fff;

#app .product-compare-wrapper label {
  background-color: #3B92E4;

/*  BUTTONS  - Let's add some hover effect */
#app .start-over-button:hover,
#app .navigation-back-button:hover,
#app .navigation-next-button:hover,
#app .navigation-back-button:hover,
#app .navigation-next-button:hover,
#app .product-compare-wrapper label:hover,
#app .add-to-basket-button:hover,
#app .page-button:hover,
#app .page-button.selected:hover,
#app .navigation-back-button:hover,
#app .navigation-next-button:hover,
#app .gap-button:hover {
  background-color: #3B92E4;
  text-decoration: underline;
  transition: all .2s ease;


Be wary of using .cXXXX classes or #advisor-XXXX IDs, as they work only for the specific assistant and may change with each change you apply. Use general classes, such as .answer-text to achieve your desired result.

5. Change The Question’s Overlay On Hover


/*  IMAGE OVERLAY - Let's make it green on hover*/
.answers-wrapper .has-image .answer-content:hover {
  background: linear-gradient(transparent 0%,transparent 50%,#EC6EAD 95%);
  transition: background ease .5s .8s;

6. Make The Answer Corners Round


/*  ITEMS - Let's make them round */
.advice .product,
.answers-wrapper .answer,
.top-product .product-image a {
  border-radius: 20px;
  overflow: hidden;

7. Create The Hover Effect 

/*  ITEMS - Let's add hover effect */
.advice .product:hover,
.questions-wrapper .answers-wrapper .answer:hover {
  transform: translateY(-2px);
  transition: all .3s ease;

.answer:hover .image-element {
  transform: rotate(-6deg) scale(1.3);
  transition: all 1s ease;

8. Adjust Appearance For Mobile Devices

With our CSS Editor, you can specify CSS rules that apply only to specified conditions. For example, you might decide to switch the appearance of the restart button when the assistant is displayed on a mobile device.

/*  Let's specify the media query saying that the rule within will apply 
for screens with maximum width of 768 px */

@media screen and (max-width: 768px) {
.start-over-button {
width:100% !important;
margin: auto !important;

The code above will stretch the restart button to use the full width of the screen.


With CSS, the possibilities are endless! Feel free to grab our CSS Handbook file to create something beautiful.

Download CSS Handbook


Don’t know how to open a .css file? Still having problems with editing your CSS? Let us know at, we are more than happy to help!

Was this article helpful?
3 out of 3 found this helpful



Please sign in to leave a comment.

Articles in this section