Custom CSS

Add your own CSS to the quiz widget for styling the settings don’t cover.

Custom CSS lets you inject raw CSS into your quiz widget to style it exactly the way you want — beyond what the built-in style editors offer. Available on the Starter plan and above.

Where to find it

There are two ways to reach the Custom CSS editor:

1. Sidebar → Custom CSS — shows all your quizzes. Click one to open its builder with the CSS editor pre-selected.
2. Quiz Builder → left panel → Custom CSS — the last item in the question list, below Results Screen.

How it works

Your CSS is saved per quiz and injected as a <style> tag inside the quiz widget's iframe at runtime. Because the widget runs in an iframe, your CSS is completely isolated — it cannot leak out to your storefront and merchant storefront CSS cannot interfere with it.

Targeting widget elements

Every class in the quiz widget is prefixed with sq- to prevent collisions. You can target any element by inspecting the widget in your browser's DevTools.

Examples:

/* Round off answer option boxes */
.sq-quiz-card {
  border-radius: 16px;
}

/* Make the continue button full width */
.sq-continue-btn {
  width: 100% !important;
}

/* Change the progress bar height */
.sq-progress-segment {
  height: 6px;
}

/* Custom font on the entire widget */
#sq-root {
  font-family: 'Georgia', serif;
}

CSS variables

The widget exposes a set of CSS variables under the --sq- namespace. Overriding these is often the quickest way to retheme the widget:

Variable	What it controls
--sq-bg	Widget background colour
--sq-fg	Primary text / foreground colour
--sq-accent	Accent colour — hover states, selected answers, active progress
--sq-accent-fg	Text colour on accent backgrounds
--sq-border	Border colour
--sq-muted	Muted background surfaces
--sq-muted-fg	Muted text colour
--sq-card	Card / answer option surface colour

Example — dark theme using variables:

#sq-root {
  --sq-bg: #1a1a1a;
  --sq-fg: #f5f5f5;
  --sq-card: #242424;
  --sq-border: rgba(255, 255, 255, 0.10);
  --sq-muted: #2a2a2a;
  --sq-muted-fg: #aaa;
  --sq-accent: #6366f1;
  --sq-accent-fg: #fff;
}

Style priority

Understanding which styles win over others:

1. Inline styles (set via Quiz Settings, Welcome Screen, Results Screen style editors) — highest priority. Nothing beats them unless you add !important.
2. Custom CSS — sits above all class-based widget styles, so it can freely override .sq-* classes.
3. Widget base CSS (.sq-* Tailwind utilities and component styles) — lowest priority.

If you need to override an inline style set in one of the editors, use !important in your Custom CSS:

/* Override the continue button colour set in Quiz Settings */
.sq-continue-btn {
  background-color: #6366f1 !important;
}

Tips

• Use your browser's Inspect Element tool on a live or preview quiz to find the exact class names you want to target.
• The CSS variables reference is shown inside the Custom CSS editor panel itself for quick lookup.
• Custom CSS is per-quiz — each quiz has its own separate CSS, so you can style multiple quizzes differently on the same store.
• Changes take effect as soon as you click Save CSS — no redeployment needed.