Design & Custom CSS

Match your theme's look with per-widget style controls and custom CSS

Every widget's builder (Quick Order Form, Variant Table, Collection Quick Order) has a Style section on the Customize tab, plus a Custom CSS section. Settings are per-widget instance — styling one form doesn't affect another.

Style tabs

The Style section is split into sub-tabs. Which ones you see depends on the widget:

• Layout — spacing controls such as form width, content padding, and section gap.

• Header — title and description font size and color.

• Table — row and header font size, text/background colors, border size and radius.

• Button — font size and, per button role (Primary, Secondary, Checkout, Quantity), separate Background/Text/Border/Hover colors.

• Colors — remaining color pickers, including pagination colors.

With "Load more" selected as the pagination type, the pagination colors style the Load more button instead of page arrows.

Variant Table additionally has a Restriction message color section (message box color, error/success message text color, message text size, message box radius) that styles the Advanced Restrictions banners.

Every numeric field (font size, padding, border radius, and so on) has its own maximum — the input won't accept a value above it.

Custom CSS

Each widget has a Custom CSS textarea for anything the style controls above don't cover. Next to it, an Available CSS classes list shows the widget's CSS selectors (for example, .saBO-card — "The outer card that wraps the title, table, and pagination") — click a class to insert it into the textarea.

Custom CSS panel

Custom CSS is applied as-is to your storefront. Test changes on a preview or staging theme before publishing if you're not familiar with CSS.