Purchase Order styles

Customize the Purchase Order drop-in using CSS classes and design tokens. This page covers the Purchase Order-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 0.0.1

Customization example

Add this to the CSS file of the specific commerce block where you’re using the Purchase Order drop-in.

For a complete list of available design tokens (colors, spacing, typography, etc.), see the Design tokens reference.

1
.purchase-orders-confirmation-content__title {
2
  color: var(--color-neutral-800);
3
  font: var(--type-headline-1-font);
4
  letter-spacing: var(--type-headline-1-letter-spacing);
5
  color: var(--color-brand-800);
6
  font: var(--type-headline-1-font);
7
  letter-spacing: var(--type-headline-1-letter-spacing);
8
}

Container classes

The Purchase Order drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.

1
/* ApprovalRuleDetailsContent */
2
.approval-rule-details__button {}
3
.b2b-purchase-order-approval-rule-details-content {}
4
.b2b-purchase-order-approval-rule-details-content__item {}
5
.b2b-purchase-order-approval-rule-details-content__label {}
6
.b2b-purchase-order-approval-rule-details-content__value {}
7

8
/* ApprovalRuleForm */
9
.approval-rule-form-loader__buttons {}
10
.approval-rule-form-loader__section {}
11
.b2b-purchase-order-approval-rule-form {}
12
.b2b-purchase-order-approval-rule-form__applies-to {}
13
.b2b-purchase-order-approval-rule-form__approval-role {}
14
.b2b-purchase-order-approval-rule-form__buttons {}
15
.b2b-purchase-order-approval-rule-form__rule-condition {}
16
.b2b-purchase-order-approval-rule-form__rule-condition-container {}
17
.b2b-purchase-order-approval-rule-form__rule-condition-container--error {}
18
.b2b-purchase-order-approval-rule-form__rule-type {}
19
.dropin-checkbox {}
20
.dropin-multi-select {}
21
.dropin-skeleton {}
22
.error-message {}
23

24
/* FormLoader */
25
.approval-rule-form-loader__buttons {}
26
.approval-rule-form-loader__section {}
27
.b2b-purchase-order-form-loader {}
28
.dropin-skeleton {}
29

30
/* PurchaseOrderApprovalFlowContent */
31
.b2b-purchase-order-approval-flow-content__description {}
32
.b2b-purchase-order-approval-flow-content__divider {}
33
.b2b-purchase-order-approval-flow-content__icon--approved {}
34
.b2b-purchase-order-approval-flow-content__icon--pending {}
35
.b2b-purchase-order-approval-flow-content__icon--rejected {}
36
.b2b-purchase-order-approval-flow-content__item {}
37
.b2b-purchase-order-approval-flow-content__list {}
38
.b2b-purchase-order-approval-flow-content__title {}
39

40
/* PurchaseOrderCommentFormContent */
41
.b2b-purchase-order-comment-form-content {}
42
.dropin-textarea {}
43
.dropin-textarea__label--floating {}
44

45
/* PurchaseOrderCommentsListContent */
46
.b2b-purchase-order-comment-list-content__actions {}
47
.b2b-purchase-order-comment-list-content__description {}
48
.b2b-purchase-order-comment-list-content__divider {}
49
.b2b-purchase-order-comment-list-content__item {}
50
.b2b-purchase-order-comment-list-content__list {}
51
.b2b-purchase-order-comment-list-content__title {}
52

53
/* PurchaseOrderConfirmationContent */
54
.purchase-orders-confirmation-content__link {}
55
.purchase-orders-confirmation-content__message {}
56
.purchase-orders-confirmation-content__title {}
57

58
/* PurchaseOrderHistoryLogContent */
59
.b2b-purchase-order-history-log-content__actions {}
60
.b2b-purchase-order-history-log-content__description {}
61
.b2b-purchase-order-history-log-content__divider {}
62
.b2b-purchase-order-history-log-content__item {}
63
.b2b-purchase-order-history-log-content__list {}
64
.b2b-purchase-order-history-log-content__title {}
65

66
/* PurchaseOrderStatusContent */
67
.b2b-purchase-order-status-content__actions {}
68
.b2b-purchase-order-status-content__message {}
69
.dropin-in-line-alert__description {}
70
.purchase-order-status {}
71

72
/* PurchaseOrdersHeader */
73
.dropin-divider {}
74
.purchase-orders-header {}
75
.purchase-orders-header--with-divider {}
76

77
/* PurchaseOrdersTable */
78
.b2b-purchase-order-purchase-orders-table {}
79
.b2b-purchase-order-purchase-orders-table--empty-state {}
80
.b2b-purchase-order-purchase-orders-table__row-details {}
81
.b2b-purchase-order-purchase-orders-table__row-details-action-inner-wrapper {}
82
.b2b-purchase-order-purchase-orders-table__row-details-content {}
83
.b2b-purchase-order-purchase-orders-table__status {}
84
.b2b-purchase-order-purchase-orders-table__status--negative {}
85
.b2b-purchase-order-purchase-orders-table__status--positive {}
86
.b2b-purchase-order-purchase-orders-table__status--waiting {}
87
.dropin-action-button {}
88
.dropin-card__content {}
89
.dropin-table__body {}
90
.dropin-table__body__cell {}
91
.dropin-table__header__row {}
92
.purchase-orders-table__empty-state {}
93
.purchase-orders-table__header {}
94
.purchase-orders-table__item--skeleton {}
95
.purchase-orders-table__pagination {}
96
.purchase-orders-table__pagination--loading {}
97
.purchase-orders-table__pagination-counter {}
98
.purchase-orders-table__pagination-page-size {}
99
.purchase-orders-table__pagination-wrapper {}
100

101
/* PurchaseOrdersTableActions */
102
.b2b-purchase-order-purchase-orders-table-actions {}
103
.b2b-purchase-order-purchase-orders-table-actions__buttons {}

For the source CSS files, see the storefront-purchase-order repository.