Before continuing, ensure the following:

Access your store in Ollie’s admin panel, go to Versions, then the Theme Configuration tab, and add or update the variables you want to customize.

​
theme
string

Customize the checkout look by setting these variables to your brand’s hex or CSS color values.

json
  "metadata": {
    "color-info": "",
    "color-text": "",
    "color-error": "",
    "color-accent": "",
    "color-neutral": "",
    "color-primary": "#00315d",
    "color-success": "",
    "color-warning": "",
    "radius-primary": "8px",
    "color-info-dark": "",
    "color-secondary": "#a3affe",
    "color-error-dark": "",
    "color-info-light": "",
    "color-text-light": "#40414a",
    "color-text-muted": "#ccced5",
    "color-accent-dark": "#74678c",
    "color-error-light": "",
    "color-accent-light": "#d3c9de",
    "color-primary-dark": "",
    "color-success-dark": "#000",
    "color-text-lighter": "#484956",
    "color-warning-dark": "",
    "color-accent-darker": "#423759",
    "color-primary-light": "#dbdbdb",
    "color-primary-muted": "#5343e8",
    "color-success-light": "",
    "color-warning-light": "",
    "color-primary-darker": "#002155",
    "color-secondary-dark": "#5343e8",
    "color-accent-contrast": "#540986",
    "color-primary-lighter": "#f1f2f3",
    "color-secondary-light": "#7f85fa",
    "color-secondary-muted": "#dfe6ff",
    "color-primary-contrast": "",
    "color-secondary-darker": "#ff7300",
    "color-secondary-contrast": "#ffffff",
    "color-accent-contrast-dark": "#540986",
    "color-accent-contrast-light": "#d8adfd",
    "color-primary-contrast-dark": "",
    "color-accent-contrast-darker": "#ffffff",
    "color-primary-contrast-light": "",
    "color-primary-contrast-muted": "#ffffff",
    "color-primary-contrast-darker": "",
    "color-secondary-contrast-dark": "#ffffff",
    "color-primary-contrast-lighter": "",
    "color-secondary-contrast-light": "#ffffff",
    "color-secondary-contrast-muted": "#7f85fa",
    "color-secondary-contrast-darker": "#ffffff"
  }