Skip to main content

theme.json

The theme.json file is the manifest for your SitePack theme. It defines essential metadata like the theme's name, version, and author, and it also acts as the central configuration point for your theme's settings.

Basic Structure​

A typical theme.json file looks like this:

{
  "name": "My Awesome Theme",
  "version": "1.0.0",
  "author": "CodeBrothers",
  "description": "A clean and modern theme for any store.",
  "homepage": "https://example.com/themes/my-awesome-theme",
  "config": {
    "settings_schema": "config/settings_schema.json"
  }
}

Metadata Fields​

  • name: The display name of your theme as it will appear in the SitePack Marketplace and the Admin Dashboard.
  • version: The current version of your theme (using Semantic Versioning).
  • author: Your name or company name.
  • description: A brief summary of your theme's features and style.
  • homepage: (Optional) A URL to your theme's homepage or documentation.

The config Section​

The config section links your theme to its configuration schemas. This is what enables the Theme Editor in the SitePack Admin.

  • settings_schema: The path to your settings schema JSON file (usually config/settings_schema.json).

Settings Schema​

The settings_schema.json file defines the settings that a merchant can customize. This includes things like:

  • Colors: Primary, secondary, background, and text colors.
  • Typography: Font families and sizes.
  • Layout: Header style, sidebar visibility, or number of products per page.
  • Content: Custom text, images, or links.

Example Schema​

[
  {
    "name": "Colors",
    "settings": [
      {
        "type": "color",
        "id": "primary_color",
        "label": "Primary Color",
        "default": "#ff5500"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Text Color",
        "default": "#333333"
      }
    ]
  },
  {
    "name": "Typography",
    "settings": [
      {
        "type": "font",
        "id": "base_font",
        "label": "Base Font",
        "default": "Open Sans, sans-serif"
      }
    ]
  }
]

Accessing Settings in Twig​

Once defined in your schema and configured by the merchant, you can access these settings in your Twig templates using the settings object.

<style>
  :root {
    --primary-color: {{ settings.primary_color }};
    --text-color: {{ settings.text_color }};
    --base-font: {{ settings.base_font }};
  }
</style>

Learn more about Twig Objects