Color-code order status badges
Adds clear colored outlines to order status badges so paid, pending and problem orders stand out instantly.
Code to copy
.Polaris-Badge:has([class*="text"]) { font-weight: 600 !important; }
.Polaris-Badge--toneSuccess,
.Polaris-Badge--statusSuccess {
outline: 2px solid #1a7f4b !important;
}
.Polaris-Badge--toneWarning,
.Polaris-Badge--statusWarning {
outline: 2px solid #b98900 !important;
}
.Polaris-Badge--toneAttention,
.Polaris-Badge--toneCritical,
.Polaris-Badge--statusCritical {
outline: 2px solid #c4341e !important;
}How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's CSS panel and save — the effect appears instantly.
Rate this example
No ratings yet — be the first.