Quote Management styles
Customize the Quote Management drop-in using CSS classes and design tokens. This page covers the Quote Management-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.
Version: 1.0.0-beta5
Customization example
Add this to the CSS file of the specific commerce block where you’re using the Quote Management drop-in.
For a complete list of available design tokens (colors, spacing, typography, and more), see the Design tokens reference.
.attached-files-list { gap: var(--spacing-small, 8px); margin: var(--spacing-medium, 16px) 0; gap: var(--spacing-medium, 8px); margin: var(--spacing-large, 16px) 0;}Container classes
The Quote Management drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.
/* ActionsBar */.quote-management-actions-bar {}.quote-management-actions-bar__button {}.quote-management-actions-bar__buttons {}.quote-management-actions-bar__container {}.quote-management-actions-bar__dropdown {}
/* AttachedFilesList */.attached-files-list {}.attached-files-list__error-icon {}.attached-files-list__item {}.attached-files-list__item--error {}.attached-files-list__item--success {}.attached-files-list__item--uploading {}.attached-files-list__item-error {}.attached-files-list__item-icon {}.attached-files-list__item-info {}.attached-files-list__item-main {}.attached-files-list__item-name {}.attached-files-list__item-size {}.attached-files-list__remove-button {}.attached-files-list__spinner {}.attached-files-list__success-icon {}
/* ConfirmationModal */.confirmation-modal__actions {}.confirmation-modal__banner {}.confirmation-modal__content {}.confirmation-modal__message {}.confirmation-modal__title {}.dropin-in-line-alert {}.dropin-modal {}.dropin-modal__body {}.dropin-modal__body--medium {}.dropin-modal__content {}.dropin-modal__header {}
/* ItemsQuoted */.quote-management-items-quoted {}
/* LineItemNoteModal */.dropin-in-line-alert {}.dropin-modal__close-button {}.dropin-modal__header-title-content {}.quote-management-line-item-note-modal {}.quote-management-line-item-note-modal__actions {}.quote-management-line-item-note-modal__cancel-button {}.quote-management-line-item-note-modal__confirm-button {}.quote-management-line-item-note-modal__content {}.quote-management-line-item-note-modal__details {}.quote-management-line-item-note-modal__details-table {}.quote-management-line-item-note-modal__discount {}.quote-management-line-item-note-modal__error-banner {}.quote-management-line-item-note-modal__error-text {}.quote-management-line-item-note-modal__form-field {}.quote-management-line-item-note-modal__helper-text {}.quote-management-line-item-note-modal__product-info {}.quote-management-line-item-note-modal__product-name {}.quote-management-line-item-note-modal__product-sku {}.quote-management-line-item-note-modal__quantity-input {}.quote-management-line-item-note-modal__stock {}.quote-management-line-item-note-modal__success-banner {}.quote-management-line-item-note-modal__table-error {}
/* ManageNegotiableQuote */.quote-management-manage-negotiable-quote {}.quote-management-manage-negotiable-quote__action-bar {}.quote-management-manage-negotiable-quote__attach-files {}.quote-management-manage-negotiable-quote__banner {}.quote-management-manage-negotiable-quote__detail {}.quote-management-manage-negotiable-quote__detail-content {}.quote-management-manage-negotiable-quote__detail-title {}.quote-management-manage-negotiable-quote__details {}.quote-management-manage-negotiable-quote__footer {}.quote-management-manage-negotiable-quote__header {}.quote-management-manage-negotiable-quote__item-actions {}.quote-management-manage-negotiable-quote__quote-actions {}.quote-management-manage-negotiable-quote__quote-comments-container {}.quote-management-manage-negotiable-quote__quote-comments-title {}.quote-management-manage-negotiable-quote__quote-name {}.quote-management-manage-negotiable-quote__quote-name-title {}.quote-management-manage-negotiable-quote__quote-name-wrapper {}.quote-management-manage-negotiable-quote__quote-status {}.quote-management-manage-negotiable-quote__rename-button {}.quote-management-manage-negotiable-quote__shipping-information-container {}.quote-management-manage-negotiable-quote__shipping-information-title {}
/* ManageNegotiableQuoteTemplate */.quote-management-manage-negotiable-quote-template {}.quote-management-manage-negotiable-quote-template__banner {}.quote-management-manage-negotiable-quote-template__comments-container {}.quote-management-manage-negotiable-quote-template__comments-title {}.quote-management-manage-negotiable-quote-template__detail {}.quote-management-manage-negotiable-quote-template__detail-content {}.quote-management-manage-negotiable-quote-template__detail-title {}.quote-management-manage-negotiable-quote-template__details {}.quote-management-manage-negotiable-quote-template__footer {}.quote-management-manage-negotiable-quote-template__header {}.quote-management-manage-negotiable-quote-template__history-log-container {}.quote-management-manage-negotiable-quote-template__history-log-title {}.quote-management-manage-negotiable-quote-template__items-table {}.quote-management-manage-negotiable-quote-template__reference-documents {}.quote-management-manage-negotiable-quote-template__reference-documents-container {}.quote-management-manage-negotiable-quote-template__reference-documents-title {}.quote-management-manage-negotiable-quote-template__rename-button {}.quote-management-manage-negotiable-quote-template__shipping-information-container {}.quote-management-manage-negotiable-quote-template__shipping-information-title {}.quote-management-manage-negotiable-quote-template__template-name-title {}.quote-management-manage-negotiable-quote-template__template-name-wrapper {}.quote-management-manage-negotiable-quote-template__template-status {}
/* OrderSummary */.dropin-accordion-section__content-container {}.dropin-divider {}.quote-order-summary {}.quote-order-summary__caption {}.quote-order-summary__content {}.quote-order-summary__discount {}.quote-order-summary__divider-primary {}.quote-order-summary__divider-secondary {}.quote-order-summary__entry {}.quote-order-summary__heading {}.quote-order-summary__label {}.quote-order-summary__price {}.quote-order-summary__primary {}.quote-order-summary__secondary {}.quote-order-summary__shipping--edit {}.quote-order-summary__shipping--hide {}.quote-order-summary__shipping--state {}.quote-order-summary__shipping--zip {}.quote-order-summary__shippingLink {}.quote-order-summary__spinner {}.quote-order-summary__taxEntry {}.quote-order-summary__taxes {}.quote-order-summary__total {}
/* OrderSummaryLine */.quote-order-summary__label {}.quote-order-summary__label--bold {}.quote-order-summary__label--muted {}.quote-order-summary__price {}.quote-order-summary__price--bold {}.quote-order-summary__price--muted {}
/* ProductListTable */.quote-management-product-list-table-container {}.quote-management-product-list-table-container__submit-container {}.quote-management-product-list-table__bundle-option {}.quote-management-product-list-table__bundle-option-label {}.quote-management-product-list-table__bundle-option-value {}.quote-management-product-list-table__bundle-option-value-original-price {}.quote-management-product-list-table__bundle-option-values {}.quote-management-product-list-table__checkbox {}.quote-management-product-list-table__configurable-option {}.quote-management-product-list-table__configurable-option-label {}.quote-management-product-list-table__configurable-option-value {}.quote-management-product-list-table__discount-container {}.quote-management-product-list-table__note-content {}.quote-management-product-list-table__note-edit-icon {}.quote-management-product-list-table__note-item {}.quote-management-product-list-table__note-meta {}.quote-management-product-list-table__note-text {}.quote-management-product-list-table__notes-container {}.quote-management-product-list-table__notes-header {}.quote-management-product-list-table__notes-list {}.quote-management-product-list-table__notes-row-wrapper {}.quote-management-product-list-table__product-name {}.quote-management-product-list-table__product-name-container {}.quote-management-product-list-table__quantity {}.quote-management-product-list-table__quantity-input {}.quote-management-product-list-table__sku {}
/* QuoteCommentsList */.quote-management-quote-comments-list {}.quote-management-quote-comments-list__attachment-link {}.quote-management-quote-comments-list__attachments {}.quote-management-quote-comments-list__attachments-label {}.quote-management-quote-comments-list__author {}.quote-management-quote-comments-list__by {}.quote-management-quote-comments-list__date {}.quote-management-quote-comments-list__empty-state {}.quote-management-quote-comments-list__header {}.quote-management-quote-comments-list__item {}.quote-management-quote-comments-list__text {}
/* QuoteHistoryLog */.quote-management-quote-history-log {}.quote-management-quote-history-log__empty {}.quote-management-quote-history-log__entries {}.quote-management-quote-history-log__entry {}.quote-management-quote-history-log__entry-author {}.quote-management-quote-history-log__entry-change {}.quote-management-quote-history-log__entry-changes {}.quote-management-quote-history-log__entry-date {}.quote-management-quote-history-log__entry-header {}.quote-management-quote-history-log__entry-meta {}.quote-management-quote-history-log__entry-type {}
/* QuotePricesSummary */.quote-management-quote-prices-summary {}.quote-management-quote-prices-summary__accordion {}.quote-management-quote-prices-summary__entry {}.quote-management-quote-prices-summary__label {}.quote-management-quote-prices-summary__label--strong {}.quote-management-quote-prices-summary__value {}
/* QuoteSummaryList */.dropin-cart-item__quantity {}.quote-management-quote-summary-list {}.quote-management-quote-summary-list-accordion {}.quote-management-quote-summary-list-accordion__section {}.quote-management-quote-summary-list-footer__action {}.quote-management-quote-summary-list__background--secondary {}.quote-management-quote-summary-list__content {}.quote-management-quote-summary-list__heading {}.quote-management-quote-summary-list__heading--full-width {}.quote-management-quote-summary-list__heading-divider {}.quote-management-quote-summary-list__out-of-stock-message {}
/* QuoteTemplatesListTable */.quote-management-quote-templates-list-table {}.quote-management-quote-templates-list-table__actions-cell {}.quote-management-quote-templates-list-table__table {}.quote-templates-list-table__empty-state {}.quote-templates-list-table__footer {}.quote-templates-list-table__item-range {}.quote-templates-list-table__page-size-picker {}.quote-templates-list-table__pagination {}
/* QuotesListTable */.dropin-picker {}.dropin-picker__select {}.quote-management-quotes-list-table {}.quotes-list-table__empty-state {}.quotes-list-table__footer {}.quotes-list-table__item-range {}.quotes-list-table__page-size-picker {}.quotes-list-table__pagination {}
/* ReferenceDocumentFormModal */.dropin-in-line-alert {}.dropin-modal__close-button {}.quote-management-reference-document-form-modal {}.quote-management-reference-document-form-modal__actions {}.quote-management-reference-document-form-modal__cancel-button {}.quote-management-reference-document-form-modal__content {}.quote-management-reference-document-form-modal__error-banner {}.quote-management-reference-document-form-modal__error-text {}.quote-management-reference-document-form-modal__save-button {}.quote-management-reference-document-form-modal__success-banner {}
/* ReferenceDocumentsList */.quote-management-reference-documents-list {}.quote-management-reference-documents-list__add-button {}.quote-management-reference-documents-list__content {}.quote-management-reference-documents-list__document {}.quote-management-reference-documents-list__document-actions {}.quote-management-reference-documents-list__document-link {}.quote-management-reference-documents-list__edit-button {}.quote-management-reference-documents-list__empty {}.quote-management-reference-documents-list__header {}.quote-management-reference-documents-list__info-icon {}.quote-management-reference-documents-list__remove-button {}.quote-management-reference-documents-list__separator {}.quote-management-reference-documents-list__title {}
/* RenameQuoteModal */.dropin-in-line-alert {}.dropin-modal__close-button {}.dropin-modal__header-title-content {}.quote-management-rename-quote-modal {}.quote-management-rename-quote-modal__actions {}.quote-management-rename-quote-modal__cancel-button {}.quote-management-rename-quote-modal__content {}.quote-management-rename-quote-modal__error-banner {}.quote-management-rename-quote-modal__error-text {}.quote-management-rename-quote-modal__save-button {}.quote-management-rename-quote-modal__success-banner {}
/* RequestNegotiableQuoteForm */.request-negotiable-quote-form {}.request-negotiable-quote-form__actions {}.request-negotiable-quote-form__attach-file-field {}.request-negotiable-quote-form__error-banner {}.request-negotiable-quote-form__title {}
/* ShippingAddressDisplay */.quote-management-shipping-address-display {}.quote-management-shipping-address-display--empty {}.quote-management-shipping-address-display__field {}.quote-management-shipping-address-display__name {}.quote-management-shipping-address-display__no-address {}
/* TabbedContent */.quote-management-tabbed-content {}.quote-management-tabbed-content__active-tab-content {}.quote-management-tabbed-content__tab {}.quote-management-tabbed-content__tab--active {}.quote-management-tabbed-content__tabs {}For the source CSS files, see the storefront-quote-management repository .