Quick Order styles

This page lists CSS classes for the Quick Order block layout and Grid Ordering (PDP) visibility. The Commerce boilerplate uses these classes. For design tokens and styling, see Styling Drop-In Components.

Quick Order block (commerce-b2b-quick-order)

Add or override these classes in the block CSS (for example, blocks/commerce-b2b-quick-order/commerce-b2b-quick-order.css). Source: commerce-b2b-quick-order.css.

.commerce-b2b-quick-order {
  padding: var(--spacing-large) 0;
}

.quick-order-main-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  width: 100%;
}

.quick-order-items-container {
  width: 100%;
}

.quick-order-right-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  width: 100%;
}

.quick-order-multiple-sku-container,
.quick-order-csv-upload-container {
  width: 100%;
}

@media (min-width: 800px) {
  .quick-order-main-container {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-medium);
  }

  .quick-order-items-container {
    flex: 2;
    min-width: 0;
  }

  .quick-order-right-side {
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--color-neutral-400);
    padding-left: var(--spacing-medium);
  }
}

• .commerce-b2b-quick-order — Wrapper for the Quick Order block; vertical padding.
• .quick-order-main-container — Flex container: column on small screens, row on wider (800px+).
• .quick-order-items-container — Holds the QuickOrderItems container; takes 2/3 width on desktop.
• .quick-order-right-side — Holds QuickOrderMultipleSku and QuickOrderCsvUpload; 1/3 width on desktop with left border and padding.
• .quick-order-multiple-sku-container, .quick-order-csv-upload-container — Wrappers for the two right-side containers.

Grid Ordering (product details)

When Grid Ordering is enabled for configurable products, the Product Details block uses these classes to show or hide the variants grid. Source: product-details.css.

.product-details__variants-grid-attribute strong {
  font-weight: var(--type-body-1-strong-font);
  margin-right: var(--spacing-xxsmall);
}

.product-details__grid-ordering--enabled {
  display: block;
}

.product-details__grid-ordering--disabled {
  display: none;
}

• .product-details__grid-ordering--enabled — Shown when Grid Ordering is on; contains the QuickOrderVariantsGrid.
• .product-details__grid-ordering--disabled — Hidden when Grid Ordering is off.

Drop-in component classes

The Quick Order drop-in uses additional BEM-style and data attributes for items list, search, CSV input, and notifications. Use browser DevTools to inspect elements; many are prefixed with b2b-quick-order- or dropin- from the drop-in package. For the source CSS, see the storefront-quick-order repository (when available).