Customize the Withdrawal Form with CSS

With Custom CSS, you can adjust the visual design of the Revoq withdrawal form to match your store. This is useful for brands with a distinct design system or agencies customizing stores for clients.

Custom CSS applies globally to the storefront form. It is not configured separately per language.

For a smaller theme-level CSS example, see also: Highlight the footer link to your withdrawal page

Availability

Custom CSS is available from the Essential plan.

• Free / Starter: locked
• Essential: available
• Professional: available

Where to find Custom CSS

Open Revoq:

App → Form Editor → Custom CSS

There you can add, save, or clear your CSS.

The CSS applies to:

• Inline form on your withdrawal page
• Popup form
• Popup trigger as a section button
• Floating button
• Mobile layouts through media queries

What you can customize

You can customize most visible form areas, for example:

• Form container
• Background, border, radius, and spacing
• Font family, font size, and text colors
• Inputs, selects, and text areas
• Primary submit buttons
• Step pills, for example “1 · Details”
• Status chips and status lines
• Product rows in the item selection step
• Success state
• Error messages
• Popup dialog and overlay
• Section trigger button
• Floating button, including mobile-specific styling

Important selectors

The easiest approach is to style the larger areas first, then refine individual details.

Selectors for item selection and status

These selectors are especially relevant in the second form step, when customers can select items.

Selectors for popup, section button, and floating button

Recommended CSS variables

For simple brand adjustments, use Revoq CSS variables. This is often more stable than overriding many individual classes.

.widerruf-form-card {
  --revoq-text-color: #111827;
  --revoq-text-secondary: #64748b;

  --revoq-card-bg: #f7fbf8;
  --revoq-card-border-color: #14532d;
  --revoq-card-border-width: 2px;
  --revoq-card-border-radius: 18px;

  --revoq-input-bg: #ffffff;
  --revoq-input-radius: 10px;

  --revoq-button-bg: #14532d;
  --revoq-button-bg-hover: #166534;
  --revoq-button-border-color: #14532d;
  --revoq-button-text: #ffffff;
}

Triggers and the floating button have their own variables:

.widerruf-trigger-button {
  --revoq-trigger-bg: #14532d;
  --revoq-trigger-bg-hover: #166534;
  --revoq-trigger-text: #ffffff;
  --revoq-trigger-border-color: #14532d;
  --revoq-trigger-radius: 999px;
  --revoq-trigger-font-size: 15px;
}

.widerruf-trigger-button--floating {
  --revoq-floating-bottom: 24px;
  --revoq-floating-side: 20px;
}

Example: Match the form to your brand colors

.widerruf-form-card {
  border: 2px solid #14532d;
  background: #f7fbf8;
  padding: 24px;
  border-radius: 18px;
}

.widerruf-primary-button {
  background-color: #14532d;
  border-color: #14532d;
  color: #ffffff;
}

.widerruf-primary-button:hover {
  background-color: #166534;
}

Example: Adjust font and typography

.widerruf-form-card {
  font-family: Inter, Arial, sans-serif;
  color: #111827;
}

.widerruf-form-card__title {
  font-size: 26px;
  font-weight: 750;
}

.widerruf-form__label {
  font-size: 15px;
  font-weight: 700;
}

.widerruf-form__hint {
  font-size: 13px;
}

Example: Style the step pills

.widerruf-form-step-pill {
  border-radius: 8px;
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.widerruf-form-step-pill[aria-current="step"] {
  background: #3730a3;
  border-color: #3730a3;
  color: #ffffff;
}

Example: Customize status chips

.widerruf-status-chip {
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0;
}

.widerruf-status-chip--success {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.widerruf-status-chip--warning {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}

Example: Make the popup wider

.widerruf-popup-modal__dialog {
  width: min(920px, 100%);
}

Example: Adjust the floating button on mobile

@media (max-width: 640px) {
  .widerruf-trigger-button--floating {
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    min-height: 54px;
    border-radius: 14px;
    font-size: 15px;
  }
}

Example: Show a compact floating button on mobile

@media (max-width: 640px) {
  .widerruf-trigger-button--floating {
    right: 14px;
    left: auto;
    bottom: 14px;
    width: 56px;
    min-width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
  }

  .widerruf-trigger-button--floating::after {
    content: "↩";
    font-size: 22px;
    line-height: 1;
  }
}

Example: Style the section trigger button

.widerruf-trigger-button:not(.widerruf-trigger-button--floating) {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0f172a;
  border-radius: 10px;
  min-height: 48px;
  padding-inline: 22px;
}

Security and limits

Custom CSS is validated server-side. The following are not allowed:

• HTML breakouts using <
• @import
• url(...)
• javascript:
• vbscript:
• data:
• expression(...)
• behavior:
• -moz-binding

The limit is 20,000 characters.

Why your theme CSS is not affected

Revoq renders the form in isolated storefront areas. Your Custom CSS is loaded into the Revoq form UI and is not published as general theme CSS across the whole page.

This means:

• your theme is not overwritten globally
• other areas of your store are not styled
• the inline form and popup receive the CSS separately
• the floating button and section trigger are targeted through Revoq selectors

What to test after saving

After saving Custom CSS, test:

• Inline form on desktop
• Inline form on mobile
• Popup form
• Section trigger button
• Floating button on the left or right
• Floating button on mobile
• Step 2 with item selection
• Success state after a test withdrawal

To remove your CSS, open the Custom CSS tab and click Clear CSS.

Updated on: 07/06/2026