> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/b2b-bulk-order/features/design-and-custom-css.md).

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

{% hint style="info" %}
With "Load more" selected as the pagination type, the pagination colors style the Load more button instead of page arrows.
{% endhint %}

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](/b2b-bulk-order/features/variant-table.md#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.

<figure><img src="/files/RcdSd109h3eN99edsZYF" alt="Custom CSS panel with available classes list"><figcaption><p>Custom CSS panel</p></figcaption></figure>

{% hint style="warning" %}
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.
{% endhint %}


---

# 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.samita.io/b2b-bulk-order/features/design-and-custom-css.md?ask=<question>&goal=<endgoal>
```

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