Custom CSS for Quick Order Pages

Most of the look of a Quick Order page is set in the app (Customize under the Storefront preview). If you need a small extra tweak that the app does not offer, you can add your own CSS from your theme. The app does not have a free-form CSS box on purpose: your CSS stays in your theme, under your control.

1. Add your CSS

The Quick Order page draws its content inside its own container, so normal theme CSS cannot reach it. The page reads your CSS from a variable named BSS_QO_CUSTOM_CSS and applies it inside the page.

In Shopify Admin, go to Online Store > Themes, click … next to your theme, then Edit code.
Open layout/theme.liquid and add this just before </head>:

<script>
  window.BSS_QO_CUSTOM_CSS = `
    .bss-qo-product-row { border-bottom: 1px solid #e5e5e5; }
    .bss-qo-add-to-cart-btn { text-transform: none; }
  `;
</script>

Click Save, then open your Quick Order page and refresh it.

Use a template literal (backticks) so the CSS can span several lines. Your CSS only affects Quick Order pages, not the rest of your store.

2. Change colors, radius and border with variables

The values you set in Customize page (colors, corner radius, border) reach the page as CSS variables named --bss-*, for example --bss-primary-btn-bg-color, --bss-border-radius and --bss-text-color-primary. To override one from your CSS, set it on :host:

:host {
  --bss-border-radius: 2px;
  --bss-primary-btn-bg-color: #0b5fff;
}

Prefer variables over class rules when a variable exists: they keep working if the inside of the page changes.

3. Class names

Class names that start with bss-qo- are the public contract. They are not renamed or removed without a note in the release notes. Every other class name (including the older qo-* names and short names such as product-row) is internal and may change in any release, so do not use them.

Area	Stable classes
Banner	`bss-qo-banner-container`, `bss-qo-banner`, `bss-qo-banner-content`, `bss-qo-banner-title`, `bss-qo-banner-description`
Links and tags under the banner	`bss-qo-custom-links-wrapper`, `bss-qo-custom-links`, `bss-qo-tags-wrapper`, `bss-qo-tags`
Page layout	`bss-qo-page-container`, `bss-qo-page`
No-access screen	`bss-qo-page-no-access`, `bss-qo-page-no-access-title`, `bss-qo-page-no-access-description`
Search box	`bss-qo-search-bar`, `bss-qo-search-input`, `bss-qo-search-button`
Product table	`bss-qo-product-table`, `bss-qo-table-footer`
Product row	`bss-qo-product-row`, `bss-qo-product-image`, `bss-qo-product-info`, `bss-qo-info-name`, `bss-qo-info-sku`, `bss-qo-info-type`, `bss-qo-info-vendor`
Price	`bss-qo-product-price`, `bss-qo-product-price-original`, `bss-qo-product-price-discount`
Quantity and buttons	`bss-qo-product-quantity-input`, `bss-qo-add-to-cart-btn`, `bss-qo-btn`, `bss-qo-btn-outline`, `bss-qo-btn-text`
Pagination	`bss-qo-pagination-container`, `bss-qo-pagination-btn`

Not stable (may change without notice):

Old class names without the bss-qo- prefix (qo-*, product-row, btn, and so on).
Icon classes (icon, icon-plus, icon-minus, zoom-icon, arrow-icon, critical-icon).
Everything in pop-ups: the variant pop-up, product detail, out-of-stock and bulk import windows (modal-*, variant-*, product-variants*).
Loading placeholders (skeleton-*), tooltips, toasts and the back-to-top button.
Inline styles set by the app (for example the page width). Use !important only when you must.
The HTML structure and the names of the page’s custom elements.

4. Good to know

The same CSS applies to every Quick Order page on your store.
If the page changes after a release and your CSS stops working, remove the rule first, then check the release notes for changes to the bss-qo-* classes.
To remove all custom CSS, delete the <script> block from theme.liquid.