> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/globo-b2b-bulk-order/targeting-and-design/design-and-custom-css.md). # Design & custom CSS Match each Quick Order form, Variant Table and Collection Quick Order to your theme with the Style settings, and add custom CSS for anything they don't cover. Each Quick Order form, Variant Table and Collection Quick Order has its own design settings on the **Customize** tab of its editor. Use **Style** for sizes, borders and colors, and **Custom CSS** for anything else. The editor's preview shows your changes as you make them, and your storefront shows them after you save. ## Before you start * Turn on the **Globo Bulk Order** app embed in your theme. See [Enable the app embed](/globo-b2b-bulk-order/getting-started/enable-app-embed.md). * Create the form or table you want to style. See [Create a Quick Order form](/globo-b2b-bulk-order/quick-order-form/create-a-form.md), [Create a Variant Table](/globo-b2b-bulk-order/variant-table/create-a-variant-table.md) or [Collection Quick Order](/globo-b2b-bulk-order/collection-quick-order/overview.md). * To see a Quick Order form's design on your storefront, add the form to a page first. See [Add the form to a page](/globo-b2b-bulk-order/getting-started/getting-started.md#add-the-form-to-a-page). * **Style** needs no coding. **Custom CSS** needs some basic CSS knowledge. ## Open the design settings {% stepper %} {% step %} ### Open the tool In Shopify admin, go to **Apps** > **Globo B2B Bulk Order**. In the app navigation, click **Quick Order**, **Variant Table** or **Collection Quick Order**. {% endstep %} {% step %} ### Open the editor Click the pencil icon in the row of the form or table you want to style. To start a new one, click **Create form**. The editor opens in a full-screen window. {% endstep %} {% step %} ### Open the Customize tab Click **Customize** in the editor's sidebar. **Style** and **Custom CSS** are the last two sections. **Custom CSS** starts collapsed: click its header to open it. {% endstep %} {% endstepper %} ## Style settings The **Style** section is split into sub-tabs. They differ by tool: | Tool | Style sub-tabs | Full list of settings | | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | Quick Order Form | **Layout**, **Header**, **Table**, **Button**, **Colors** | [Customize the form](/globo-b2b-bulk-order/quick-order-form/customize-the-form.md#style) | | Variant Table | **Layout**, **Header**, **Table**, **Button**, **Colors** | [Create a Variant Table](/globo-b2b-bulk-order/variant-table/create-a-variant-table.md#style) | | Collection Quick Order, **Classic** template | **Variant** (called **Variant popover** when **Show variants in a popover** is on), **Quantity**, **Add to cart**, **Colors** | [Add a button below products](/globo-b2b-bulk-order/collection-quick-order/button-below-product.md) | | Collection Quick Order, **Floating** template | **Icon**, **Quantity**, **Variant dropdown**, **Colors** | [Add a cart icon on product images](/globo-b2b-bulk-order/collection-quick-order/icon-on-image.md) | In a Collection Quick Order, the **Variant**, **Variant dropdown** and **Quantity** sub-tabs appear only while that column is visible in **Show columns**. Style settings apply only to the form or table you're editing, even when several are on the same page. ### What you can change | | Quick Order Form | Variant Table | Collection Quick Order | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width and spacing | **Layout**: **Form width**, **Content padding**, **Section gap** | **Layout**: **Form width**, **Content padding**, **Section gap** | No width for the whole widget. The **Floating** template's **Quantity** sub-tab has **Width**, **Height** and **Gap**, and the variant panels have **Panel width** and **Row height** | | Text | Font sizes on **Header** and **Table** | **Header**: **Header font size** and **Font weight**. **Table**: **Row font size**. **Button**: **Text size** and **Text weight** | **Text size** and **Text weight** on most sub-tabs | | Borders | **Table**: **Size**, **Radius** and **Style** under **Border** | **Table**: **Border width**, **Border style**, **Border radius** | **Border width** on every sub-tab except **Colors**, plus **Border radius** on some | | Buttons | **Button**: **Button size**, **Button shape**, **Font size**, **Width**, for every button in the form | **Button**: **Same style as theme button**, or the button's text size, text weight and border | **Add to cart** (Classic) or **Icon** (Floating): icon, position and size | | Colors | **Colors**: **Header**, **Table**, **Button** (**Primary**, **Secondary**, **Checkout**, **Quantity**), **Subtotal badge**, **Pagination** | **Colors**: **Add to Cart button in the variant table**, **Variant table**, **Restriction message** | **Colors**: one group for each element, such as **Add to cart** or **Icon** | ### How the controls work * **Sizes** are in pixels and have a slider and a number box. The minimum is 0 and each size has a maximum. A higher number is changed to the maximum. * **Form width** is a percentage, up to 100. In a Quick Order form you can switch its **Unit** to `px` to set a fixed width instead. * **Weights** (such as **Text weight**) go from 0 to 1000 in steps of 100. * **Colors** show a swatch and a hex code. Click either one to open a color picker, which also supports transparency. To type a hex code such as `#111111`, click the pencil icon next to the hex code under the picker. ### Same style as theme button A Variant Table (**Style** > **Button**) and a Collection Quick Order with the **Classic** template (**Style** > **Add to cart**) have a **Same style as theme button** checkbox. When you tick it, the app stops styling its Add to cart button and hides the button's text, border and color settings. In a Collection Quick Order, **Select icon** and **Icon position** stay available. The button then takes your theme's general button styles, so how it looks depends on your theme. Check the result on your storefront: the editor's preview doesn't include your theme's styles. ### What Style doesn't change * **Button and label text.** Storefront wording is set per language in **Settings** > **Translations**. See [Translations](/globo-b2b-bulk-order/settings/overview.md). A Quick Order form's title and description are set in the form itself, on **Customize** > **Header**. A Variant Table's column headers are saved in the app's admin language when you create the table. See [Show columns](/globo-b2b-bulk-order/variant-table/create-a-variant-table.md#show-columns). * **Stock labels.** Stock levels and the labels' colors, font size and weight are set in [Stock thresholds](/globo-b2b-bulk-order/settings/stock-status.md). The label text is set in **Translations**, in the **Stock** section. One exception: in the row of controls under the price, a Collection Quick Order always shows the **In stock** and **Out of stock** statuses in its own green (`#279a4b`) and red (`#cc1313`). To change them, see [Examples](#examples). * **Your theme's own product page.** The theme's variant picker, quantity box and Add to cart button stay as your theme styles them. ## Custom CSS Use **Custom CSS** for changes the Style settings don't offer, such as uppercase button text or hiding a detail. {% stepper %} {% step %} ### Open the Custom CSS section On the **Customize** tab, click **Custom CSS** to open it. {% endstep %} {% step %} ### Insert a class Under **Available CSS classes**, click a class, for example `.saBO-btn-checkout`. An empty rule for that class is added at the end of the box. While the box is empty, it shows **Enter your custom CSS here**. {% endstep %} {% step %} ### Write your styles Type your CSS between the braces. The preview updates as you type. {% endstep %} {% step %} ### Save and check your storefront Click **Save** in the save bar. Then open a page that shows the form or table, reload it and check it on both desktop and mobile. To remove your changes, clear the box and save again. {% endstep %} {% endstepper %}
Custom CSS section of a Quick Order form open on the Customize tab, with a rule for .saBO-btn-checkout in the box and the Available CSS classes list below it

Click a class under Available CSS classes to add an empty rule for it, then type your styles.

### Where your custom CSS applies Each form or table has its own **Custom CSS** box, but the CSS isn't limited to that form or table. The app adds it to the storefront page exactly as written: * A rule for a class applies to every element with that class on the page. For example, a rule for `.saBO-card` changes every Quick Order form on the page, and a rule for `.samitaBO-collection-quick-buy-add` changes every Collection Quick Order button. * A Quick Order form's or Variant Table's CSS loads only on pages where that form or table appears. * A Collection Quick Order's CSS loads on every page with product cards, together with the CSS of all your other Active Collection Quick Order forms. It loads even where that form's own targeting doesn't match, for example for guests when the form is only for tagged customers. * **Draft** forms and tables don't load their CSS. * To style two forms on the same page differently, use the **Style** settings. They apply to one form only. {% hint style="warning" %} **Always start a rule with a class from Available CSS classes.** A rule such as `button { … }` or `table { … }` changes every button or table on the page, including your theme's. {% endhint %} ### Available CSS classes These are the classes listed under **Available CSS classes** in each editor, with the description the editor shows. {% tabs %} {% tab title="Quick Order Form" %} | Class | What it styles | | ------------------------ | ---------------------------------------------------------- | | `.saBO-card` | The outer card that wraps the title, table, and pagination | | `table.saBO-order-table` | The order table element | | `.saBO-header h1` | Form title | | `.saBO-header-desc` | Form description text | | `.saBO-price-new` | Current price text | | `.saBO-price-old` | Compare-at (strikethrough) price text | | `.saBO-btn-add` | Row "Add" button | | `.saBO-btn-choose` | "Choose variants" toggle button | | `.saBO-btn-checkout` | Footer checkout button | | `.saBO-btn-view-cart` | Footer view cart button | | `.saBO-btn-ghost` | "Clear" button | | `.saBO-btn-outline` | Bulk order / load more button | | `.saBO-qty` | Quantity stepper wrapper | | `.saBO-qty button` | Quantity +/- buttons | | `.saBO-qty input` | Quantity number input | | `.saBO-pagination` | Pagination container | | `.saBO-pg-arrow` | Pagination arrow buttons | | `.saBO-pg-status` | "Page X of Y" pill | | `.saBO-items-pill` | Selected item count badge | On an English storefront, the "Choose variants" button reads **Show variants** by default. {% endtab %} {% tab title="Variant Table" %} | Class | What it styles | | ------------------------------------------ | ----------------------------- | | `.samitaBO-quick-buy-variant-widget` | The outer widget wrapper | | `.samitaBO-quick-buy-variant-card` | The card wrapping the table | | `.samitaBO-quick-buy-variant-table` | The variant table element | | `.samitaBO-quick-buy-variant-col-price` | Price column cell | | `.samitaBO-quick-buy-variant-name` | Variant name text | | `.samitaBO-quick-buy-variant-sku` | Variant SKU text | | `.samitaBO-quick-buy-variant-qty` | Quantity stepper wrapper | | `.samitaBO-quick-buy-variant-stock` | Stock status text | | `.samitaBO-quick-buy-variant-add` | Add to cart button | | `.samitaBO-quick-buy-variant-footer` | Table footer bar | | `.samitaBO-quick-buy-variant-validation` | Validation/error message text | | `.samitaBO-quick-buy-variant-matrix-cell` | Matrix layout cell | | `.samitaBO-quick-buy-variant-stock-legend` | Stock status legend | | {% endtab %} | | {% tab title="Collection Quick Order" %} | Class | What it styles | | -------------------------------------------------- | ----------------------------------- | | `.samitaBO-collection-quick-buy-widget` | The outer widget wrapper | | `.samitaBO-collection-quick-buy-controls` | Variant + quantity + add button row | | `.samitaBO-collection-quick-buy-quantity` | Quantity stepper wrapper | | `.samitaBO-collection-quick-buy-variant-select` | Variant dropdown/select | | `.samitaBO-collection-quick-buy-stock` | Stock status text | | `.samitaBO-collection-quick-buy-add` | Add to cart button | | `.samitaBO-collection-quick-buy-add-icon` | Add to cart button icon | | `.samitaBO-collection-quick-buy-floating-toggle` | Floating icon toggle button | | `.samitaBO-collection-quick-buy-floating-panel` | Floating variant panel | | `.samitaBO-collection-quick-buy-floating-option` | Floating panel variant option row | | `.samitaBO-collection-quick-buy-floating-actions` | Floating panel footer actions | | `.samitaBO-collection-quick-buy-floating-quantity` | Floating panel quantity stepper | | {% endtab %} | | | {% endtabs %} | | ### Other classes you can use These classes aren't in the lists above, but they're on your storefront too: * **Quick Order Form:** `.samitaBO-quick-order-template` (the whole form), `.saBO-toolbar` (the search and sort bar), `.saBO-search-input` (the search box), `.saBO-sort-select` (the sort menu), `.saBO-footer-bar` (the bar with the item count, **Total**, **View cart** and **Checkout**), `.saBO-stock-tag` (the stock badge) and `.saBO-modal` (the bulk order window). * **Variant Table:** `.samitaBO-quick-buy-variant-validation.is-error` and `.samitaBO-quick-buy-variant-validation.is-success` (the rule message while a rule fails, and once it passes). * **Stock text in all three tools** carries a `data-samita-bo-stock-status` attribute with the value `out-of-stock`, `last-items`, `low-stock`, `in-stock` or `high-stock`. The Quick Order form's bulk order window and the Collection Quick Order's floating variant panel move to the end of the page while they're open. Write their rules on their own, for example `.saBO-modal { … }`, not inside another class such as `.saBO-card .saBO-modal`. ### Examples **Quick Order Form: uppercase checkout button** ```css .saBO-btn-checkout { text-transform: uppercase; letter-spacing: 0.05em; } ``` **Variant Table: hide the SKU under each variant name** ```css .samitaBO-quick-buy-variant-sku { display: none; } ``` **Collection Quick Order: a different color for the In stock text** ```css .samitaBO-collection-quick-buy-stock[data-samita-bo-stock-status="in-stock"] { color: #1f6f43 !important; } ``` This rule needs `!important` because the app already sets this color. See the next section. ## When your CSS has no effect {% hint style="info" %} **Settings from Style win over plain class rules.** The app writes each Style setting with a rule that targets one specific form or table, so it's stronger than a rule like `.saBO-btn-checkout { background: … }`. To change something Style already controls, such as a button color or a font size, change it in **Style** instead. If you still need CSS for it, add `!important` after the value. In a Quick Order form and a Variant Table, stock label colors come from [Stock thresholds](/globo-b2b-bulk-order/settings/stock-status.md) and are set on each label, so change them there. {% endhint %} {% hint style="warning" %} **Your theme's CSS also reaches the widgets.** A theme that adds borders to every table or makes every button uppercase can change how a form looks on your storefront. The editor's preview doesn't include your theme's styles, so always check the storefront too. To undo a theme style, add a rule with the widget's class, for example `.saBO-btn-add { text-transform: none; }`. {% endhint %} If a change still doesn't show: * Make sure you clicked **Save** and that the form or table is **Active**. * Reload the storefront page. Changes can take a few moments to arrive. * Check the class name for typos, and that each rule has its closing brace `}`. One broken rule can stop the rules after it from working. In a Collection Quick Order, that can include the Style settings of your other Collection Quick Order forms. ## Next steps * [Customize the form](/globo-b2b-bulk-order/quick-order-form/customize-the-form.md) * [Create a Variant Table](/globo-b2b-bulk-order/variant-table/create-a-variant-table.md) * [Collection Quick Order](/globo-b2b-bulk-order/collection-quick-order/overview.md) * [Translations](/globo-b2b-bulk-order/settings/overview.md)