# Style settings

You can apply different style settings to your quiz both locally (at the question and answer level), and also globally (to the entire quiz). 

## In this section

* [Global style settings](#global-style-settings)
  * [Button styles](#button-styles)
* [Page-specific controls](#page-specific-controls)

***

## Global style settings

These settings are applied to every page. 

<table><thead><tr><th width="144.8203125">Setting</th><th width="287.9609375">What you can style</th><th width="248.55078125">Best practicies</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td>Use live theme fonts or pick custom fonts; separate font styles for headings, body, accent, and tooltips.</td><td>Stick to two fonts to keep your website loading fast.</td></tr><tr><td><strong>Colors</strong></td><td>General color palette, and specific colors for form fields and tooltips.</td><td>Use brand colors and high-contrast combinations to support accessibility.</td></tr><tr><td><strong>Buttons</strong></td><td>Button font, opacity, corners, colors. </td><td>Use a contrasting hover color to signal tap.</td></tr><tr><td><strong>Input fields</strong></td><td>Border radius, GDPR text alignment.</td><td>Keep placeholder copy friendly (“Your email here”).</td></tr><tr><td><strong>Tooltip</strong></td><td>Icon position, heading and description text alignment. </td><td>Use for clarifying terminology or next steps.</td></tr><tr><td><strong>Custom CSS</strong></td><td>Custom styling and overrides.</td><td>Use sparingly.</td></tr></tbody></table>

### Button styles

You can customize up to three different button styles to control how buttons look in your quiz: Primary, secondary and tertiary.&#x20;

You can:

* **Set styles globally** so all your pages use the same button styles
* **Customize styles locally** on individual questions or pages when you want a more nuanced level of customization

If you choose to customize only the global button styles, here's what they apply to throughout the quiz:

* **Primary** – answer buttons
* **Secondary** – start quiz button
* **Tertiary** – navigation buttons, like Next and Back

This setup helps you keep your quiz consistent, but still gives you flexibility when you need it.

***

## Page‑specific controls

Fine‑tune each step of the journey.

<table><thead><tr><th width="180.390625">Page</th><th>Adjustable elements</th></tr></thead><tbody><tr><td><strong>Intro</strong></td><td>Heading, subheading, button, and main image, custom JavaScript</td></tr><tr><td><strong>Questions</strong></td><td><p>Question format, options to show image and bullets, marketing property name, progress bar toggle, ability to select multiple answers, ability to skip the question, and custom JavaScript.</p><p></p><p>Question heading, description, bottom text, image, tooltip heading and description.</p></td></tr><tr><td><strong>Answers</strong></td><td>Image shape, color, size, style, text alignment, custom URL redirect checkbox.</td></tr><tr><td><strong>Forms and email</strong></td><td>Heading, description, bottom text, button label, image, tooltips, field type, name, placeholder, skip question toggle, hide field names toggle, GDPR checkbox, fake‑email validation, custom JavaScript.</td></tr><tr><td><strong>Results (General)</strong></td><td>Show/hide “Add to Bag”, “Add All”, “Retake Quiz”.</td></tr><tr><td><strong>Results (Products)</strong></td><td>Full‑width CTA, quantity picker, info toggles, variant display, and image rules.</td></tr><tr><td><strong>Progress indicators</strong></td><td>Layout, number of questions per step, navigation text, next/back buttons, show arrow checkbox.</td></tr></tbody></table>