Brand Styleguide

Site-wide syncing for branding settings across all themes

Themes automatically receive a brand object at the root of their settings. This object contains site-wide branding settings controlled through the Kajabi admin at https://app.kajabi.com/admin/sites/<SITE_ID>/brand_styleguide.

Kajabi's default themes use these site-wide brand settings as fallbacks. When a theme's branding value is blank (an empty string ""), the theme automatically inherits the brand settings from your Kajabi admin. This keeps your visual branding consistent across all themes unless you override a specific value in an individual theme.

---

The brand object

The brand object gets injected into the root of each page when it renders.

{
  "brand": {
    "primary_color": "#0072EF",
    "accent_color": "#10B981",
    "logo": "<path to Kajabi hosted logo image>",
    "favicon": "<path to Kajabi hosted favicon image>",
    "font_family_heading": "Fira Sans",
    "font_family_body": "Open Sans",
    "social": {
      "facebook": "https://facebook.com/example",
      "instagram": "https://instagram.com/example",
      "x": "https://x.com/example",
      "youtube": "https://youtube.com/example",
      "linkedin": "https://linkedin.com/company/example",
      "tiktok": "https://tiktok.com/@example"
    }
  }
}

---

How to implement brand fallbacks

Kajabi's default themes allow you to override brand settings while still providing fallback values. This requires configuration in both your schema and Liquid markup.

Schema setup

Configure your schema definition with these requirements:

• Add a default_global_settings_attribute that points to a value in the brand object

• Set the default value to blank ("") so the brand value applies on initial install

This configuration tells the theme editor WYSIWYG that a fallback exists and provides UI controls to reset to the brand default.

Example schema:

{
  "type": "color",
  "id": "btn_background_color",
  "label": "Button",
  "default": "",
  "allow_blank": true,
  "default_global_settings_attribute": "brand.accent_color"
}

Liquid markup

Use the Liquid default filter to handle the fallback display.

Example markup:

{% assign btn_color = section.settings.btn_background_color | default: settings.brand.accent_color %}

<style>
  #my-btn {
    background-color: {{ btn_color }};
  }
</style>

<button id="my-btn">Call To Action</button>

This code displays the brand accent color when the override color is blank.