Custom CSS

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.