Design: themes, colors and pictures
How the quiz looks on your store: the five themes, color palettes, the main color, how answers with pictures look, and the settings under More options.
#Where to change the look
In the quiz editor, open Design under Look in the steps list. Every change shows in the middle of the editor at once, and reaches your store when you publish.
The panel has four parts, top to bottom: Theme, Colors, Main color and Picture answers. Below them, More options holds Main color on labels, Fine-tune colors, Show whole pictures and Your own CSS, for anything the settings don’t cover (see Your own CSS). It’s closed at first. While it is, a line under it lists what’s set there, such as “main color on labels · whole pictures”.
#The five themes
A theme sets the fonts, the corners and the overall feel. New quizzes start on Your store when Teacup Quiz can read your live theme, with the White colors.
| Theme | What it looks like | Try it for |
|---|---|---|
| Your store (tagged Recommended) | Your theme’s heading and body fonts, its button color and its corners. | A quiz that looks like part of your store. |
| Minimal | Clean lines in your store’s own fonts, with rounded corners. | A neutral start on any store. |
| Editorial | Serif headlines, square corners, and buttons and small labels in capitals, like a magazine. | Fashion, home goods, coffee and other brands with a print feel. |
| Soft | Rounded, airy and gentle: larger corners and pill-shaped buttons. | Skincare, baby and wellness stores. |
| Noir | A dark panel with light type and a light main color. Bold on light stores. | Standing out on a light store, or a premium look. |
Every theme takes its text color from your page unless you give the quiz a background of its own (Noir brings its own dark panel).
#Your store: matching your theme
Click Your store and Teacup Quiz reads your live theme (Reading your theme…). The card then says what it found, for example “From Dawn: Playfair Display and Assistant, its button color and corners.” It takes:
- Your theme’s heading font and body font.
- Its main button color, which becomes the quiz’s Main color, and the text color on it.
- Its button corners, and the corners of its fields and cards for the answer tiles.
- Your page’s background color, to check that your main color shows on it.
Themes name their settings differently. Teacup Quiz knows Shopify’s own themes, such as Dawn and Horizon, and the names popular themes use. If it can’t find a font, the quiz uses your page’s own; if it can’t find a button color, the main color becomes your theme’s text color, or near-black.
The quiz doesn’t follow later theme changes by itself. After you switch or restyle your theme, click Match again next to Changed your theme since?, then publish.
The editor’s preview loads your theme’s fonts from Google Fonts. A font that isn’t there, like one you uploaded or bought, shows in a similar font in the preview only. On your store, the quiz uses the fonts your theme already loads.
#Color palettes
Colors sets “The quiz’s background and answer colors.” A palette puts a panel behind the quiz, with light answer tiles and soft backdrops behind pictures. Each palette also sets the main color and turns on Main color on labels.
| Palette | Panel and main color | Try it for |
|---|---|---|
| Theme’s own | No panel: your page shows through and the quiz uses your page’s text color. With Noir, it’s Noir’s own dark panel. Turns Main color on labels off. | A quiz in a section that already has its own background. |
| White | A white card with a hairline and a soft shadow. Keeps your current main color. | The default for new quizzes. Clean on any store. |
| Blush | Warm pink panel, raspberry main color. | Beauty and skincare. |
| Sage | Pale green panel, deep green main color. | Natural products, wellness, plants. |
| Sand | Warm beige panel, caramel main color. | Coffee, home and leather goods. |
| Mist | Pale blue-gray panel, steel-blue main color. | Clean, technical looks; pet care. |
| Lilac | Pale lavender panel, purple main color. | Gifts, fragrance, playful brands. |
| Midnight | Near-black panel, light text, gold main color. | Dark stores and premium looks. |
Picking a palette replaces the colors under Fine-tune colors (in More options). You can change any single color afterwards and keep the rest.
Noir is a dark panel, so a light palette on it (White, Blush and the others) switches the theme to Minimal. Midnight keeps Noir. The swatches show the main color you’ll get.
#Main color
Main color colors buttons, picked answers, the progress line and the floating quiz button. Its hint says “Buttons, selected answers and the progress line.” With Your store it starts as your theme’s button color, and the hint says “Your theme’s button color. Pick another to make the quiz stand out.”
Pick one of the 8 swatches, or type your brand color in Or a color code as # and six characters, like #2f3e57. Short codes like #fff and color names aren’t taken. Text on the main color turns light or dark by itself, so it stays readable.
Contrast warnings
When the main color barely shows on what’s behind it (contrast under 3:1), a warning appears under the swatches:
| Warning starts with | What it means |
|---|---|
| This color barely shows on the quiz’s background. | The quiz has a background of its own (a palette, a Background color or Noir’s panel) and the main color is too close to it. Pick a lighter or darker color, as it suggests. |
| This color barely shows on your store’s dark background, so the quiz uses a light color there. | The quiz has no background of its own and your page is dark. On your store it switches to a light main color by itself; pick a lighter color to choose it yourself. |
| This color barely shows on your store’s background. | The same on a light page: pick a darker color. |
A light main color on dark pages
On your store, a quiz without a background of its own checks the color of the page around it. If the page is dark and your main color would barely show, the quiz uses a light cream color with dark text instead, so buttons and picked answers stay visible. To decide yourself, choose a lighter main color or give the quiz a Background.
Main color on labels
Main color on labels, under More options: “Question numbers and small headings in your main color, in capitals.” It colors the quiz name, the question numbers (“2 of 5”), routine step names and small headings like “Your match”. The numbers in the welcome screen’s quick facts take the main color too. Every palette turns it on; Theme’s own turns it off.
#Fine-tune colors
Under More options: four colors, each with a color picker. Empty (None) means the quiz doesn’t set that color.
| Field | What it colors | Good to know |
|---|---|---|
| Background | The panel behind the quiz. Empty: your page shows through. | Setting it makes the quiz a panel with rounded corners. Pure white (#ffffff) also gets a hairline and a soft shadow, so it stands apart from a white page. |
| Text | All the quiz’s text. | Set for you when you pick a background: light on dark colors, dark on light ones. Change it only if you need a brand color. |
| Answers | Answer tiles and the email field. | When it differs from Background, tiles lose their outline and become cards with a soft shadow. |
| Picture backdrop | Behind answer pictures and product photos. | It shows around icons and cut-outs. Match the background of your product photos. |
Clearing Background also clears the text color it set for you, unless you changed that color yourself.
#Picture answers
As soon as one answer in a question has a photo, the whole question shows picture answers (photos are added on each answer: see Questions and answers). Picture answers, right under Main color, sets how they look in every question of the quiz:
| Style | What shoppers see |
|---|---|
| Cards (default) | Tiles with the picture on top and the label under it: 2 a row on phones, 3 or 4 on wider screens. All cards take the shape of the question’s first picture, from tall (2:3) to wide (3:2). A picture of a very different shape shows whole instead of being cut. |
| Circles | Round pictures with the label under them, without a tile. A ring in your main color marks the pick. |
| Squares | The same, with square pictures. |
Show whole pictures, under More options, is for icons, illustrations and product cut-outs: they sit inside the Picture backdrop with space around them instead of filling the frame. Leave it off for photos that should fill the frame, like a dog on a lawn.
#What changes when you switch theme
| Setting | Switching to Minimal, Editorial or Soft | Switching to Your store |
|---|---|---|
| Fonts and corners | The new theme’s | Read from your live theme |
| Main color | The new theme’s default, unless the quiz has colors of its own (then your main color stays) | Your theme’s button color |
| Palette and fine-tuned colors | Kept | Kept |
| Main color on labels, picture style, Show whole pictures | Kept | Kept |
| Your own CSS | Kept | Kept |
Noir works differently, so it always looks dark: picking it clears the palette and fine-tuned colors and uses its light main color. Leaving Noir for Minimal, Editorial or Soft brings back the White card (if you picked Midnight on Noir, its colors stay). Each theme card shows what you’ll get before you pick it.
Nothing reaches your store until you publish, and Undo (Ctrl/⌘ Z) takes back a switch you don’t like. See Publishing and managing quizzes.
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).