Widget Styles

Widget Styles controls the global visual appearance of your quiz widget on the storefront. Changes here apply to all your quizzes and cover everything a shopper sees: the welcome screen, question screens, and results screen. Open it from Widget Styles in the sidebar.

For deeper per-quiz styling — per-question typography, results screen copy, button text, and order summary appearance — use the settings inside each quiz's Quiz Settings and Results Screen editors in the Quiz Builder. Those settings always take priority over the global Widget Styles defaults set here.

The page uses a two-column layout on desktop: all the controls on the left, and a live preview on the right that updates in real time as you make changes. The preview has three tabs — Welcome, Question, and Results — so you can check how your changes look at every stage of the quiz without leaving the page. On tablet and mobile the live preview is hidden; use the Quiz Builder's Preview button to check your quiz on smaller screens.

General Settings

Global styles applied across every screen of the quiz.

Primary color — used for interactive elements and accent highlights throughout the widget.

Background — the background color of the entire quiz widget.

Text color — the default color for all body text in the widget.

Font family — the font used throughout the widget. Leave blank to use the default Outfit font. Other options include Georgia, Times New Roman, System UI, and Courier New.

Max width — the maximum width the quiz widget will expand to, e.g. 640px. The widget will never exceed this width regardless of how wide the page is.

Global border radius — the corner rounding applied to the quiz widget container, e.g. 0px for sharp corners or 12px for rounded.

Continue button

• Background color and text color
• Border radius — e.g. 0px for square, 8px for rounded
• Font weight
• Width — Auto (fits the button text) or Full (stretches across the full width of the quiz)
• Alignment — Left or Center (only shown when width is set to Auto)

Welcome Page

Styles applied to the welcome screen shoppers see before the quiz starts.

Heading color and heading size — controls the main heading on the welcome screen.

Heading weight — font weight for the welcome screen heading.

Body text color and font family are controlled in General Settings and automatically apply to the welcome screen's subheading, footer note, and form fields.

Questions

Styles applied to every question screen in the quiz.

Question text — font size, font weight, and font style (normal or italic) for all question headings.

Section label — the small label shown below the progress bar indicating which section of the quiz the shopper is in. Controls color and font size.

Answer options

• Background color — unselected state
• Border color — unselected state
• Selected background and selected text color — how the answer looks after the shopper taps it
• Border radius — e.g. 0px for square answers, 999px for pill-shaped answers
• Border width — e.g. 1px
• Padding — internal spacing inside each answer box
• Font size and font weight for answer labels

Progress bar

• Active color — the filled segment representing progress already made
• Inactive color — the unfilled segments ahead
• Label color — color of the section name shown above the progress bar
• Bar height — e.g. 3px for subtle, 6px for more prominent

Results Page

Styles applied to the results screen where recommended products are shown.

Heading — color and size for the main heading on the results screen.

Product cards

• Card background and card border color
• Card border radius — corner rounding on each product card
• Image border radius — corner rounding on product images within the card
• Product name size — font size for the product name on each card
• Price color — color of the price displayed on each product card

Saving

Click Save styles in the top right to apply your changes. The Reset button next to it reverts all settings back to the defaults — use this if you want to start fresh. Neither action affects quiz content, vote assignments, or logic — only the visual appearance of the widget.