Please note: these customization ideas will require you to add a bit of CSS to your quiz which is a feature available on our paid plans.

You can edit the CSS by clicking on the green button titled "Edit Quiz Flow CSS", which will open the CSS Editor where you can write your custom code.

1. Centering the price and product title

Can be done with the following CSS code:

.product-details {

display: flex;

flex-direction: row;

flex-wrap: wrap;

align-items: center;

justify-content: center;

}

.product-title {

width: 100%;

text-align: center;

}

And here is the result:

2. Making the product title larger

This can be done using the following CSS snippet:

.product-title {

font-size: 2rem;

line-height: 140%;

}

3. Making the price smaller

This can be done using the following CSS snippet:

.product-price {

font-size: 0.8rem;

line-height: 140%;

}

Here’s the result for these two changes:

4. Reducing/Increasing button size

To change the size of the buttons on this page, all you need to do is reduce or increase the size of the text inside the buttons. In the following CSS snippet, we target the add to cart button and make this larger:

.add-to-cart-button {

font-size: 1.2rem

}

You can also target the View More button with the following selector .button-view-more

Please note: Whenever changing the size of fonts, we recommend that you always use rem, instead of pixels as these will help your look scale much better with different screen sizes.

For full assistance with CSS styling and quiz design customizations please contact our support team on support@productfinder.app and enquire about our Enterprise plan.