Skip to main content
All checkout styles ship with sensible defaults. Override any variable on :root (or a scoped selector) to reskin without touching the source CSS. 
:root {
  --checkout-input-border-color: #your-color;
  --checkout-btn-border-radius: 4px;
  /* … */
}

​
Form inputs

VariableDefaultControls
--checkout-input-bgwhiteInput / select background
--checkout-input-border-color#d1d5dbInput / select border
--checkout-input-border-radius6pxInput / select corner radius
--checkout-input-padding12px 16pxInput / select padding
--checkout-input-font-size16pxInput / select font size
--checkout-label-color#374151Field label text color
--checkout-label-font-size14pxField label font size
--checkout-label-font-weight500Field label font weight
--checkout-required-color#dc3545Required asterisk color
--checkout-form-gap16pxGap between fields in a row
--checkout-field-margin24pxBottom margin on floating label groups

​
Validation states

VariableDefaultControls
--checkout-error-color#ef4444Error border and shadow
--checkout-error-text-color#dc3545Inline error message text
--checkout-valid-color#10b981Valid border and shadow

​
Submit button

The button background defaults to var(--ef-primary, #3b82f6) (your brand color). These variables control everything else.
VariableDefaultControls
--checkout-btn-border-radius8pxButton corner radius
--checkout-btn-padding16px 32pxButton padding
--checkout-btn-font-size16pxButton font size
--checkout-btn-font-weight600Button font weight
--checkout-btn-hover-bg#2563ebButton hover background
--checkout-btn-disabled-bg#9ca3afButton disabled background

​
Payment panel

These control the Shopify-style grouped card that wraps Credit Card / PayPal / Klarna / Apple Pay tabs.
VariableDefaultControls
--checkout-panel-border-radius10pxPanel wrapper corner radius
--checkout-panel-bg#fffPanel and tab-body background
--checkout-panel-border-color#d1d5dbPanel border and section dividers
--checkout-panel-active-bg#f8fafcActive section background
--checkout-panel-tab-padding14px 16pxTab row padding
--checkout-panel-tab-hover-bg#f3f4f6Tab hover background
--checkout-panel-label-color#1f2937Tab label text color
--checkout-panel-body-padding16pxContent area padding inside an open tab
The radio button accent color inside tabs follows var(--ef-primary, #3b82f6) automatically.

​
Bump products

VariableDefaultControls
--checkout-bump-bgwhiteBump card background
--checkout-bump-border-color#e9ecefBump card border
--checkout-bump-border-radius8pxBump card corner radius
--checkout-bump-padding16pxBump card padding
--checkout-bump-selected-border-color#10b981Selected bump border
--checkout-bump-selected-bg#f0fdf4Selected bump background
--checkout-bump-title-color#111827Bump title text
--checkout-bump-desc-color#6b7280Bump description text
--checkout-bump-price-color#059669Bump price text

​
Order summary

VariableDefaultControls
--checkout-summary-bg#f8f9faSummary box background
--checkout-summary-border-color#e9ecefSummary box border
--checkout-summary-border-radius8pxSummary box corner radius
--checkout-summary-padding24pxSummary box padding
--checkout-summary-heading-color#212529Summary heading text
--checkout-summary-total-border-color#dee2e6Divider above the total line

​
Security indicator

VariableDefaultControls
--checkout-security-bg#f0f9ffSecurity badge background
--checkout-security-color#0369a1Security badge text
--checkout-security-border-radius6pxSecurity badge corner radius

​
Checkout messages

Status messages shown after submit (success / error / info).
VariableDefaultControls
--checkout-msg-border-radius8pxMessage box corner radius
--checkout-msg-success-bg#d4eddaSuccess background
--checkout-msg-success-color#155724Success text
--checkout-msg-success-border-color#c3e6cbSuccess border
--checkout-msg-error-bg#f8d7daError background
--checkout-msg-error-color#721c24Error text
--checkout-msg-error-border-color#f5c6cbError border
--checkout-msg-info-bg#d1ecf1Info background
--checkout-msg-info-color#0c5460Info text
--checkout-msg-info-border-color#bee5ebInfo border

​
Tax display

VariableDefaultControls
--checkout-tax-color#059669Tax amount text (normal)
--checkout-tax-muted-color#6b7280Tax calculating / zero / muted state
--checkout-tax-error-color#dc2626Tax error state
--checkout-tax-reverse-color#7c3aedEU reverse-charge indicator
--checkout-tax-breakdown-color#6b7280Tax breakdown line text
--checkout-tax-breakdown-border-color#e5e7ebTax breakdown divider
--checkout-tax-breakdown-total-color#374151Tax breakdown total line text

​
Address autocomplete

VariableDefaultControls
--checkout-autocomplete-bgwhiteDropdown background
--checkout-autocomplete-border-color#d1d5dbDropdown border
--checkout-autocomplete-border-radius6pxDropdown bottom corner radius
--checkout-autocomplete-item-color#374151Suggestion item text
--checkout-autocomplete-item-border-color#f0f0f0Divider between items
--checkout-autocomplete-item-hover-bg#f0f7ffItem hover background
--checkout-autocomplete-item-active-bg#dbeafeItem active/click background
--checkout-autocomplete-scrollbar-track-bg#f1f1f1Scrollbar track
--checkout-autocomplete-scrollbar-thumb-bg#cbd5e1Scrollbar thumb
--checkout-autocomplete-scrollbar-thumb-hover-bg#94a3b8Scrollbar thumb hover

​
Example: dark checkout theme

:root {
  /* Inputs */
  --checkout-input-bg: #1e293b;
  --checkout-input-border-color: #334155;
  --checkout-input-border-radius: 4px;
  --checkout-label-color: #94a3b8;

  /* Button */
  --checkout-btn-border-radius: 4px;
  --checkout-btn-hover-bg: #1d4ed8;

  /* Panel */
  --checkout-panel-bg: #0f172a;
  --checkout-panel-border-color: #334155;
  --checkout-panel-active-bg: #1e293b;
  --checkout-panel-tab-hover-bg: #1e293b;
  --checkout-panel-label-color: #f1f5f9;

  /* Summary */
  --checkout-summary-bg: #1e293b;
  --checkout-summary-border-color: #334155;
  --checkout-summary-heading-color: #f1f5f9;
  --checkout-summary-total-border-color: #475569;

  /* Bumps */
  --checkout-bump-bg: #1e293b;
  --checkout-bump-border-color: #334155;
  --checkout-bump-title-color: #f1f5f9;
  --checkout-bump-desc-color: #94a3b8;
}