Styling the standalone survey with CSS

The standalone survey renders with clean, neutral defaults so it fits almost any storefront out of the box. When you want it to match your brand exactly, you can add custom CSS from the editor's Styling tab.

Where to add custom CSS

Open any survey in the editor and select the Styling tab. Most appearance options — colors, fonts, spacing and button styles — are controlled by the visual settings there. For anything those controls don't cover, paste your own rules into the Custom CSS field. Your CSS is scoped to the survey, so it won't affect the rest of your storefront.

Tip: start from the visual controls and only reach for custom CSS to fine-tune. That keeps your survey upgrade-safe as we ship new styling options.

The markup you can target

Asky wraps the survey in a small, predictable set of class names. These are the hooks you'll use most often:

  • .asky-survey — the outer survey wrapper
  • .asky-survey__title — the survey heading
  • .asky-question — each question block
  • .asky-question__label — a question's prompt text
  • .asky-option — a single-choice or multiple-choice option
  • .asky-input — text and date inputs
  • .asky-btn — the submit / next button

Examples

Round the wrapper and give it a soft shadow:

.asky-survey {
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  padding: 28px;
}

Match the submit button to your brand color:

.asky-survey .asky-btn {
  background: #5b3df5;
  border-radius: 999px;
  font-weight: 600;
}
.asky-survey .asky-btn:hover {
  background: #4a2fd0;
}

Style the selected option state:

.asky-survey .asky-option.is-selected {
  border-color: #5b3df5;
  background: rgba(91, 61, 245, 0.06);
}

Tips for reliable styling

  • Scope your selectors — prefix rules with .asky-survey so they only apply to the survey and never leak into your theme.
  • Prefer the visual controls for colors and fonts; use custom CSS for layout and edge cases.
  • Test on mobile — most post-purchase traffic is mobile, so check your survey at narrow widths.
  • Avoid !important unless a theme is overriding you; it makes future tweaks harder.

Need a hand getting a particular look? Contact our team and we'll point you to the right selectors.