# 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.

### Related Articles

* [Set Up Result Logic](https://help.seacommerce.io/product-recommendation-quiz/how-to-set-up-result-logic)
* [Add Quiz to Your Store](https://help.seacommerce.io/product-recommendation-quiz/how-to-add-a-quiz-to-your-online-store)
* [View Quiz Responses](https://help.seacommerce.io/product-recommendation-quiz/how-to-view-quiz-responses)
* [Customize Quiz Design](https://help.seacommerce.io/product-recommendation-quiz/how-to-customize-your-quiz-design)