How to Customize Your Quiz Design
Make your quiz match your brand by customizing the logo, colors, layout, background, and more. The design settings also include growth hacking features like custom logo and auto-fit theme integration.
Prerequisites
- A quiz already created in SEA Survey
Steps
Step 1: Open Design Settings
From the quiz editor, click the Design section in the left panel. This opens all design customization options.
Step 2: Configure Your Logo
In the Logo settings, configure:
- Enabled — Toggle to show or hide the logo on the quiz (default: enabled)
- Alignment — Position the logo left, center, or right
- Size — Adjust the logo size using the pixel slider (default: 88px)
- Image — Upload your store’s logo image
By default, the quiz displays the SEA Survey logo. Upload your own logo to replace it with your brand.
Note: Custom logo requires the feature to be enabled for your store. If you see a locked banner, contact support to unlock this feature.
Step 3: Set Up Colors
The color settings have two modes:
Basic mode (default):
- Primary text — Main text color (default: #1C1C1C)
- Secondary text — Supporting text color (default: #333333)
Advanced mode — Click to expand full color controls:
- Indicator — Active/default progress indicator colors
- Buttons — Primary and secondary button background, text, and border colors
- Answer options — Active and default answer option background, text, and border colors
- Add to cart button — Default and completed states
- Badge — Text and background colors
- Background & Popover — Solid background and popover colors
Step 4: Adjust Corner Radius
Customize the roundness of UI elements:
- Button — Corner radius for buttons (default: 8px)
- Product image — Corner radius for product images on the result page (default: 8px)
- Answer option — Corner radius for answer option cards (default: 8px)
Step 5: Configure Background
Choose how the quiz background appears:
- Solid — A single background color (default: white)
- Gradient — A gradient with start color, end color, and direction (angle in degrees)
- Image — Upload a background image with alignment and size controls
Step 6: Set Up Layout
Configure the layout for questions and result products:
Question layout:
- Alignment — Left or center align questions
- Max per row (Desktop) — Maximum answer options per row on desktop (default: 3)
Result products layout:
- Display mode — Show products as “product” cards or “variant” selector
- Alignment — Left or center align products
- Max per row (Desktop) — Products per row on desktop (default: 3)
- Max per row (Mobile) — Products per row on mobile (default: 2)
Step 7: Add Custom CSS (Optional)
Toggle Enable Custom CSS to add your own CSS rules for advanced customization. This lets you override any quiz styling with your own code.
Step 8: Save Your Design
Click Save at the top of the page to apply all design changes.
Auto-Fit Theme
The quiz automatically adapts its Add to Cart behavior to match your Shopify theme. When a customer adds a product to their cart from the quiz result page, the app detects your theme and uses the appropriate method to:
- Add the item to the cart via your theme’s cart API
- Open the cart drawer (if your theme supports it)
- Update the cart icon counter in your store’s header
Supported themes include Boutique, Impulse, and standard Shopify themes. For other themes, a default cart behavior is used.
Growth Hacking Tips
| Tip | How |
|---|---|
| Replace the SEA logo | Upload your own logo in the Logo settings to build brand trust |
| Match your brand colors | Use Advanced color mode to match every element to your brand palette |
| Increase quiz responses | Upgrade your plan to increase the monthly quiz response limit |
| Use image answer layouts | Visual answers (vertical/horizontal image) get higher engagement than text-only |
| Optimize for mobile | Set mobile-specific product grid columns in Layout settings |
| A/B test quiz copy | Try different Welcome Page headings and CTA text to find what converts best |
Tips
- Start with Basic color mode. Only switch to Advanced if you need precise control over every element.
- The default design (white background, #1C1C1C text, 8px radius) works well for most stores. Customize only what needs to match your brand.
- Custom CSS is powerful but can break the quiz layout if used incorrectly. Test thoroughly in preview after adding CSS.
- The auto-fit theme feature works automatically — you don’t need to configure anything.