Your own CSS
Style anything the Design settings don’t cover: where your CSS goes, how it’s applied, the quiz’s class names, ready-to-paste examples, and what happens on a plan without it.
Available on Starter, Growth and Plus
#Where to add it
In the quiz editor, open Design, click More options at the bottom, and find Your own CSS at the end. Type or paste your CSS in the box. It holds up to 10,000 characters; anything longer is cut off.
#How it’s applied
- Each quiz has its own CSS. It comes after the quiz’s own styles, so your rule wins over the quiz’s rule for the same selector.
- On your store it goes on every page where this quiz is: in a section, in a product-page button’s popup, or in the popup on every page.
- It only styles this quiz, never the rest of the page. In a section, that’s the quiz itself; for a product-page button or the popup on every page, it’s the button and the popup with the quiz. A rule like
button { … }restyles the quiz’s buttons, not your theme’s. Rules for.tq(the quiz itself) and the classes below work as usual. - The editor’s preview shows the quiz with your CSS the same way.
- When two quizzes are on the same page, each quiz’s CSS styles only its own quiz.
- One exception: names. An
@keyframesanimation or an@font-facefont you define has a name the whole page shares, so a@keyframes fadeInwould replace your theme’s ownfadeIn. Start such names withtq-, like@keyframes tq-fade. - It reaches your store when you publish.
On your store, your CSS is printed inside an @scope rule for the quiz’s block, which keeps it to that quiz. Older browsers that don’t support @scope simply don’t apply it; the quiz still looks right there with its Design settings.
#The quiz’s class names
The whole quiz is .tq. Its parts have classes that start with .tq__. The quiz also carries attributes you can target: data-theme (store, minimal, editorial, soft or noir), data-pictures (circles or squares) and data-labels (accent when Main color on labels is on).
| Class | What it is |
|---|---|
.tq | The whole quiz, and its panel when it has a background |
.tq__title | The quiz name above it |
.tq__progress, .tq__step | The progress line, and “2 of 5” |
.tq__question | Headings: each question, the welcome heading and the results heading |
.tq__help | The Why you ask line under a question |
.tq__lead | The text under the welcome, email and result-page headings |
.tq__answers, .tq__answer | The group of answers, and each answer |
.tq__label, .tq__desc, .tq__pic | An answer’s label, its description and its picture |
.tq__btn | Main buttons: start, Continue, Show my results, Add all to cart |
.tq__btn--small | Each product’s Add to cart |
.tq__link | ← Back, the email step’s Skip, Change answers, Retake the quiz |
.tq__meta, .tq__facts | “Takes about 1 min”, and the quick facts on the welcome screen |
.tq__capture, .tq__input, .tq__consent | The email step’s form, its fields and the marketing checkbox |
.tq__product, .tq__name, .tq__price | A product card, its name and its price |
.tq__why, .tq__tag | A product’s Good for line, and each tag in it |
.tq__slot | A routine step’s name on a product card |
.tq__summary | The Add all bar |
.tq__kicker, .tq__hero | “Your match” on result pages, and the result’s picture |
.tq__also, .tq__alt | Also a great fit, and each card in it |
.tq-launch__btn, .tq-launch__dialog | The floating or product-page quiz button, and the popup window |
To use the quiz’s colors in your rules, write var(--tq-accent) for the main color and var(--tq-on-accent) for the text on it.
#Examples
Paste one of these into the box, then switch to Play to check it.
| What you want | CSS |
|---|---|
| Squarer corners on answers, buttons and the email field | .tq__answer, .tq__btn, .tq__input { border-radius: 4px; } |
| Buttons in capitals | .tq__btn { text-transform: uppercase; letter-spacing: 0.08em; } |
| Keep the Add all bar in place instead of floating at the bottom while shoppers scroll | .tq__summary { position: static; } |
| Hide “Takes about 1 min” on the welcome screen | .tq__meta { display: none; } |
| Hide the Good for tags on product cards | .tq__why { display: none; } |
| Smaller answer descriptions | .tq__desc { font-size: 0.8em; } |
| Lift the floating quiz button above a chat bubble | .tq-launch__btn { bottom: 96px; } |
Put rules for the floating button in the quiz the popup shows, usually your main quiz: a quiz’s CSS only styles its own button and popup.
#When a rule doesn’t take effect
- Check the class name: right-click the part on your store and inspect it with your browser’s developer tools.
- Some parts are styled per theme with a longer selector. Starting yours with
.tq[data-theme], like.tq[data-theme] .tq__question { letter-spacing: 0; }, makes it win on every theme. - Colors you choose in Design are set on the quiz itself, so setting
--tq-accentin your CSS has no effect. Change Main color in Design instead. - Your CSS reaches your store only when you publish. In the editor it shows at once.
#On a plan without it
If you move to Free, or your subscription ends:
- The CSS box is replaced by Your CSS is kept with the quiz, but your store doesn’t use it on this plan. It’s back as soon as you’re on Starter or up. with a See plans button.
- Your store stops using it right away, and the editor’s preview doesn’t show it either.
- It stays saved with the quiz. Saving and publishing don’t remove it.
- As soon as you’re on Starter or up again, your store uses it again. There’s no need to publish again.
Still need help?
Chat with us: you talk to a real person, not a bot. Or email us with your store’s address (your-store.myshopify.com).