Settings

To make it easier for editors to customize your theme, you can use JSON to create settings that editors can access via the Basker Studio.

You can provide settings at the theme, template, or block level. Settings can be fixed (such as informational elements) or interactive (such as a drop-down menu). Setting values can be static, or use dynamic sources to render contextually appropriate values.

Exposing settings makes your theme more customizable so it can better express a venue’s brand. It also can make your theme more flexible so that you can address various use cases for editors.

Location

You can create settings in the following places:

config > settings.json
Template files in the templates folder, using the template’s {% schema %} tag.
Block files in the blocks folder, using the block’s {% schema %} tag.

└── theme
    ├── config
    |   ├── settings.json
    |   ...
    ├── templates
    |   ├── event.liquid
    |   ├── venue.liquid
    |   ...
    └── blocks
        ├── well.liquid
        ├── review.liquid
    ...

Theme settings

The setting.json file controls the content of the Theme settings area of the theme editor. Settings in this file translate to global theme settings, which can be accessed through the Liquid settings object.

1
{
2
    "name": "social",
3
    "type": "group",
4
    "fields": [
5
        {
6
            "type": "text",
7
            "name": "facebook_link",
8
            "label": "Facebook"
9
        }
10
    ]
11
}

1
{% if settings.social.youtube_link %}
2
    <a href="{{ settings.social.facebook_link }}">Facebook</a>
3
{% endif %}

Template settings

The template {% schema %} tag is where you can create template settings. Those settings can be accessed through the settings attribute of the section object and block object, respectively.

1
{
2
    "name": "event",
3
    "settings": [
4
        {
5
            "type": "color",
6
            "label": "Event Header Color",
7
            "name": "event_header_color"
8
        }
9
    ]
10
}

1
{% if theme.settings.event_header_color %}
2
    <div class="event-header" style="background: {{ theme.settings.event_header_color }}"></div>
3
{% endif %}

Block settings

The block {% schema %} tag is where you can create block settings. Those settings can be accessed through the settings attribute of the section object and block object, respectively.

1
{
2
    "name": "well",
3
    "label": "Well Block",
4
    "settings": [
5
        {
6
            "type": "text",
7
            "label": "Title",
8
            "name": "title"
9
        }
10
    ]
11
}

1
{% if block.settings.title %}
2
    <h2>{{ block.settings.title }}</h2>
3
{% endif %}

Schema

Settings are defined as a JSON settings attribute that’s parented to the object that the settings apply to. This attribute accepts an array of settings.

1
{
2
  ...
3
  "settings": [[
4
      {
5
        "type": "text",
6
        "label": "Title",
7
        "name": "title"
8
      },
9
      {
10
        "type": "richtext",
11
        "label": "Content",
12
        "name": "content"
13
      },
14
      {
15
        "type": "checkbox",
16
        "label": "Center Title?",
17
        "name": "centered"
18
      }
19
    ],
20
  ...
21
}

Usage

Access settings

Depending on where they were created, you can access settings through the following Liquid objects:

The global settings object
The template object
The block object