Theme options are setup with blueprints in the theme.json.

A globalBlueprint provides global options that will be set for all pages within a Pagedip. These are set in the Pagedip's settings page. A blueprint will provide options that can be set globally in the Pagedip's settings page, but can then be overridden and set on a page-to-page basis in individual page settings.

Theme options can be organized into groups. Each key within the blueprint object is treated as the name of a theme option group.


This can be given any name that makes sense to you, i.e. "settings" or "footerOptions". Using multiple groups can help organize options by type, and in the Pagedip Writeroom the theme options will be displayed to the user by group.


The label will be displayed as the name for the theme options group in the Pagedip Writeroom settings.


An object containing the individual options for this theme options group.

"blueprint": { // object of theme options
"options_group_name": { // object with any name for options group
"label": "Page Settings", // label for options group
"options": {
"option_name": { ... }

Individual option:


An individual option's key can be set to any name that you like, i.e. "content" or "color". The option is an object containing the following fields:


The option's label.


A brief description of what the option does.


The options input type. Available types are text, textarea, checkbox, and dropdown


The option's default value.


For input type dropdown, an object providing options for the dropdown. Keys are the option's display name and values are the option's value.

Example blueprint:

"blueprint": { // object of theme options
"options_group_name": { // object with any name for options group
"label": "", // label for options group
"options": { // object of options available within this group
"option_name": { // object with any name representing a single option
"label": "", // label for this option
"description": "", // description of option
"type": "", // input type
"default": "" // default value
"values": { // values for dropdowns
"Display Name": value // key is name, value is option value,


All data from the theme, template, and embed blueprints are passed into the templates as variables. Properties on these objects can be accessed with dot notation or bracket syntax.

{{ options.options_group_name.option_name }}
{{ options["options_group_name"]["option_name"] }}

Example Blueprint

Here is an example blueprint and global blueprint in a theme.json, followed by pictures of how the options are displayed in Pagedip.

"globalBlueprint": {
"globalSettings": {
"label": "Global Settings",
"options": {
"globalOption_1": {
"label": "Global Option",
"type": "checkbox",
"default": true
"blueprint": {
"settingsGroup1": {
"label": "Settings Group 1",
"options": {
"option_1": {
"label": "Option 1 Checkbox",
"type": "checkbox",
"default": false
"option_2": {
"label": "Option 2 Text Input",
"type": "text",
"default": "Default Text"
"settingsGroup2": {
"label": "Settings Group 2",
"options": {
"option_3": {
"label": "Option 3 Textarea",
"type": "textarea",
"default": "default text in text area"
"option_4": {
"type": "dropdown",
"label": "Option 4 Dropdown",
"default": "default-value",
"values": {
"Default Value": "default-value",
"Value 1": "value-1",
"Value 2": "value-2"

In the Pagedip settings you'll see both the globalBlueprint options and the blueprint options.

Screen Shot 2017-04-20 at 4.39.32 PM.png

In the individual page settings, you'll see just the blueprint options.

Screen Shot 2017-04-20 at 4.39.09 PM.png