> For the complete documentation index, see [llms.txt](https://docs.zigpoll.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zigpoll.com/polls/display-settings.md).
# Design and styling
Learn how to take control of your survey appearance
{% hint style="info" %}
These settings apply to this survey only. To set the design for every survey, use **Settings → Design Defaults**. A survey follows those defaults until you turn on **Override Design Settings** on its own Design tab.
{% endhint %}
## Where your design applies
Open a survey and go to **Settings → Design**. There's a tab for each place the survey can appear, and each tab has its own **Override Design Settings** switch:
| Tab | Styles |
| --------------- | ----------------------------------------------------------------------------------------------------------------- |
| **On-Site** | The survey on your website: colors, font, layout, launcher, progress indicator, Custom CSS. |
| **Survey Page** | The hosted page behind your survey link: logo, background, favicon, page title, social media image, redirect URL. |
| **Email** | Email surveys: sender, subject and copy, logo, header bar, colors and font. |
| **SMS** | The text message sent for SMS surveys. |
{% hint style="warning" %}
Surveys placed as blocks on Shopify's checkout, Thank You and Order Status pages don't use these settings — Shopify draws them with your checkout branding. See [Shopify checkout limits](/installation/shopify-checkout-limits.md).
{% endhint %}
#### Visibility
A visible survey is public for anyone to see. A survey that isn't visible never shows on your website, whatever its page rules say.
{% hint style="info" %}
Only visible surveys show up on your website. Switch a survey to visible once it's configured the way you want.
{% endhint %}
## Styling your survey
To match your survey to your branding, use the options on **Settings → Design → On-Site**.
#### Background Color
Your brand color for the survey's frame: the launcher, the survey's border and header, the progress indicator and the close button. We suggest you use a complementary color to match your website's branding.
#### Action Color
The color of all buttons and interactive elements in your survey.
#### Notification Color
The color used when there is a notification to show on the launcher — for example, to mark that a survey has been completed by your customer.
#### Custom CSS
Add your own CSS to the survey here. It applies wherever the survey appears, including the hosted survey page. This feature is experimental and selectors may change, so use it at your own risk.
#### Select fonts
Choose your survey font from hundreds of preloaded fonts.
If you want to add in custom fonts see:
{% content-ref url="/pages/w6TnbDEeJuAnnnGakrIz" %}
[Custom Fonts](/polls/display-settings/custom-fonts.md)
{% endcontent-ref %}
#### Text Direction
Choose **Left to right** or **Right to left** to match your language. Zigpoll detects right-to-left languages (Arabic, Hebrew, Persian, Urdu, and others) automatically. Those surveys mirror their layout, including rating scales, matrix grids, and inputs. You only need this setting to override the automatic behavior.
#### Layout
Three rows control where the survey sits and how big it is:
* **Position** — a 3×3 grid of the corners and edges the survey can occupy. Click a cell; the name and a description of that position appear beside the grid. The center cell is a modal, which opens over the page instead of in a corner.
* **Offset** — a sentence, *20 px from the bottom and 20 px from the right*, whose words follow the position you picked. Edit the numbers to move the survey in from the edges. Offset is not shown for the modal position.
* **Size** — *400 px wide and up to 500 px tall*. The width is fixed; the height is a maximum the survey grows into.
See [Shapes and Placements](/tutorials/shapes-and-placements.md) for more on each position.
#### Progress Indicator
Four cards show how a respondent sees their progress through the survey, each drawn on a survey panel:
* **Bar** — a thin bar fills across the top.
* **Circle** — a ring fills in the corner.
* **Counter** — the question number, as text (*2 / 5*).
* **None** — no indicator.
This is the only progress setting. Shopify checkout blocks don't show a progress indicator.
## Launcher
Three cards choose how the survey is launched on the page: **Circle** (a round button in the corner), **Bumper** (a tab along the edge of the page) or **No Launcher** (the survey opens on its own — see [Hide the Launcher](/tutorials/hide-the-launcher.md)). The options below only appear while there is a launcher to set them on.
#### Border Radius and Launcher Scale
Two sliders. **Border Radius** starts at the shape you picked (round for Circle, square-cornered for Bumper), and you can fine-tune it. **Launcher Scale** makes the whole launcher bigger or smaller than its default.
#### Default and After Completion
Two tabs sit above the launcher's Layout, Text and Icon: **Default**, and **After completion**, which shows once someone has finished the survey. On After completion, choose **Same as default** or **Different launcher**. For example, show *Got a sec?* by default and *Thanks!* after. **Different launcher** starts from a copy of the default launcher. **Same as default** switches it back to match. See [Custom Launcher Image](/tutorials/custom-launcher-image.md#after-completion-optional).
#### Layout (desktop and mobile)
Choose whether your launcher shows the icon and text, the icon only, or the text only. You set this separately for desktop and mobile. Mobile defaults to the icon only.
#### Text
Optional text shown on your launcher.
#### Icon
The icon shown on your launcher. Pick one, or use the **Upload** tile for your own square image. See [Custom Launcher Image](/tutorials/custom-launcher-image.md). On mobile, your icon shows even if you chose text only for desktop.
{% hint style="info" %}
All plans are fully white-labeled — surveys show no Zigpoll branding unless you turn on **Zigpoll Link**. **Custom CSS** is available on all plans. **Custom Code** (inserting your own code into Zigpoll iframes) requires a **Standard** plan or better.
{% endhint %}
## Images
Different images live in different places:
* **Launcher image** — the button that opens an on-site survey: **On-Site → Launcher → Icon**. See [Custom Launcher Image](/tutorials/custom-launcher-image.md).
* **Survey background and modal images** — **On-Site → Background Image**, and **Logo Image**, **Side Image** and **Overlay Image** for the modal position.
* **Survey page logo and background** — **Survey Page → Logo** and **Background Image**.
* **Email logo** — **Email → Logo**.
* **Images inside a question** — **Add Image** in the question editor. See [Adding Images to Questions](/tutorials/adding-images-to-questions.md).
See [Custom Header Image](/tutorials/custom-header-image.md) for which to use when.
#### Image Sizes and Quality
Zigpoll resizes images when you upload them, so very large files don't slow your survey down:
| Image | Resized to |
| ------------------------------------- | --------------------------------- |
| Launcher icon | 500 × 500 px, cropped to a square |
| On-Site **Background Image** | 1080 × 300 px, cropped |
| On-Site logo | 300 px tall |
| Survey Page **Logo** | 700 px tall |
| Survey Page **Background Image** | 2400 px wide |
| Favicon | 180 × 180 px |
| Image choice answers | 1000 px wide, converted to WebP |
| Other images, such as question images | 1000 px wide |
Smaller images are never enlarged. For the sharpest result, upload at least these sizes, and crop to the right shape yourself so the automatic crop doesn't cut anything off. Animated GIFs aren't resized.
## Troubleshooting
#### The Next button is grey
The **Next** button stays grey until the question is answered:
* A single-choice question needs an option picked. If the respondent picks a write-in option such as *Other*, they also have to type something.
* A multi-select question needs enough options picked to meet its selection limit — for example, at least one, or exactly three.
A question set to **Optional** never greys out the button. If a question shouldn't block people, open it and turn on **Optional**, then press **Update Question**.
#### Matrix questions on small screens
On a phone, a Matrix question with more columns than fit scrolls sideways, with an arrow showing there's more. To avoid scrolling, use fewer columns or shorter column labels, or split the rows into separate questions.
#### My custom font isn't showing
See [Custom Fonts](/polls/display-settings/custom-fonts.md#my-custom-font-isnt-showing).
#### The survey looks different on my Thank You page
Shopify checkout, Thank You and Order Status blocks use Shopify's checkout branding, not these settings. See [Shopify checkout limits](/installation/shopify-checkout-limits.md).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.zigpoll.com/polls/display-settings.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
